Responsive web design by using css or javascript?

Question

I am going to make a website that is using responsive design. I read some information about css media query. What I wanna do is that the layout of my webpage should looks difference by using different devices (like PC, tablets or smartphones).

If I use media query to determine the device by using the width of the screen (in pixel), I always worry about if there will be a new device using a extremely high ppi screen. That device may threat as tablet or something like PC?

Another solution that is using the user agent to determine the device category by using userAgent. There's also a problem is that if the device not interpret the javascript fine then the page maybe broken.

Any great solution that can solve my worries above? Or Which solution is better?

Or I misunderstand the method of using media query?

Thank you.

Answer 1

CSS is the way to go, and you can always provide fallback for browsers that don't support media queries using a js plugin like css3mediaqueries.js , but relying on JS solely to make your website responsive is a risk because you can't tell for sure if the user will have Javascript enabled, and when it's not enabled it's not going to be responsive anymore.

Also, it's considered best practice now to use em values for media queries instead of pixels to make sure your website always scales right. More on this topic in this article .

Another tip is that you determine the media query values according to your content's best break points instead of device dimensions, that way you also make sure your content will always look right no matter how many new devices are made.

Hope that helped :)

Answer 2

id' personally use CSS and set min-width and max-width. Most responsive designs now days use CSS. This way if there is a new device on the market it will just adjust according to it's screen size.

@media screen and (max-width:480px) { }
@media screen and (min-width:481px) { ) etc... etccc....

Answer 3

我更喜欢使用Twtitter Bootstrap而不是使用CSS3媒体查询来处理各种设备。

Answer 4

I prefer use media queries in CSS. Just write the queries after the default CSS...

@media screen and (max-width: 600px) { write here only the elements that must change de code for responsive performance }

.logo {
width: 200px;
height: 80px;
background: url... ;
background-size: 100%;
margin: 0;
}

@media screen and (max-width: 600px) {
.logo {
width: 150px;
height: 60px;
margin: 0 auto;
}
}

Don't forget to insert the viewport code into the head/HTML.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=false" />

Answer 5

Try jRWD, a JavaScript-only module I designed recently. It uses 12 lines of pure JavaScript and 2 small helper functions. It's available on GitHub, at https://github.com/BlackMagic/jRWD .

If you want to see jRWD in action, visit http://ieee-qld.org . Make sure you inspect the source code. Minimal JavaScript, minimal CSS stylesheet. No jQuery either.