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?
