0
\$\begingroup\$

Currently I am using javascript to make my website full responsive, but this is extremly painful...

I do it like this and control the behaviour of all the elements from window width 50px till 2000px. Basically I change classes with removeClass and addClass.

function responsiveDesign()
{
  var wh = $(window).height();
  var ww = $(window).width();

  if (ww <= 50) {

  } else if (ww <= 100) {
    ...
  } else if (ww <= 150) {
    ...
  } else if (ww <= 200) {
    ...
  } else if (ww ....
    ...
  //and so on, until 2000
}

$(window).resize(function() {
    responsiveDesign();
});

responsiveDesign();

I have multiple thousands lines of javascript already... I know I could also use @media but then I would also need thousands of code lines if I want a perfect responsive website.

e.g.

@media only screen and (max-width: 767px) {

@media only screen and (min-width: 710px) and (max-width: 768px) {

}

Is there a better way, or is it normal that we need so much lines of code for full responsive websites?

\$\endgroup\$
  • \$\begingroup\$ Down voted for sketchy code. \$\endgroup\$ – 200_success Jun 29 '17 at 16:18
1
\$\begingroup\$

No, this is not the "normal" way to build a responsive website. "Normally" people use frameworks that are built specifically to remedy this problem.

Bootstrap, made by the guys who run Twitter, is the most popular responsive framework. Basically it's a set of styles and (opionally) javascript that you include in your sites and then you just add class names to your HTML depending on how you want things arranged. It's really easy to learn and use. Much easier than writing 1000s of lines of JS or CSS.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.