Geek Answers Handbook

Responsive web design using css or javascript?

I am going to create a website that uses responsive design. I read some info on css media request. I want the layout of my web page to look different using different devices (like PCs, tablets or smartphones).

If I use a media query to identify a device using the screen width (in pixels), I always worry about whether the new device will use an extremely high ppi screen. Can this device threaten like a tablet or something like a PC?

Another solution using a user agent to categorize a device using userAgent. There is also the problem that if the device does not interpret the javascript penalty, then the page may be broken.

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

Or am I misunderstanding the method of using media query?

Thanks.

+8
javascript html css responsive-design
source share
5 answers

CSS is the way to go and you can always provide a reserve for browsers that don’t support multimedia requests using the js plugin like css3mediaqueries.js , but relying on JS solely to make your site responsive is a risk because you you can’t say for sure whether the user will be enabled Javascript, and when he is not included, he will no longer respond.

In addition, it is now believed that it is better to use em values ​​for media queries instead of pixels to ensure that your site always scales correctly. Read more about this topic in this article .

Another tip is that you determine the value of the media queries according to your best content breakpoints instead of device sizes, so you can also make sure your content always looks right, regardless of the number of new devices.

Hope this helps :)

+11
source share

id 'personally uses CSS and sets the minimum width and maximum width. Most responsive projects now use CSS. Thus, if a new device appears on the market, it will simply adjust the screen size accordingly.

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

I prefer Twtitter Bootstrap using CSS3 multimedia queries for such various devices.

0
source share

I prefer to use media queries in CSS. Just write requests after CSS by default ...

@media screen and (max-width: 600px) { write here only those elements that should change the code for flexible 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; } }

Remember to insert the viewport code in your head / HTML.

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

Try jRWD, the JavaScript module I developed recently. It uses 12 lines of pure JavaScript and 2 small helper functions. It is available on GitHub, https://github.com/BlackMagic/jRWD .

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

0
source share

More articles:


All Articles