使用 css 或 javascript 的响应式网页设计？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18394632/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsive web design by using css or javascript?
提问by benleung
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).
我将制作一个使用响应式设计的网站。我阅读了一些有关 css 媒体查询的信息。我想做的是使用不同的设备（如 PC、平板电脑或智能手机），我的网页布局应该看起来有所不同。
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?
如果我使用媒体查询通过使用屏幕宽度（以像素为单位）来确定设备，我总是担心是否会有使用极高ppi屏幕的新设备。该设备可能会威胁到平板电脑或 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.
另一种解决方案是使用用户代理通过使用 userAgent 来确定设备类别。还有一个问题是，如果设备不能很好地解释 javascript，那么页面可能会损坏。
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.
谢谢你。
回答by Sara Sou
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 notenabled it's not going to be responsive anymore.
CSS 是可行的方法，您始终可以使用css3mediaqueries.js等 js 插件为不支持媒体查询的浏览器提供回退，但仅依靠 JS 使您的网站响应是一种风险，因为您无法分辨确定用户是否启用了 Javascript，当它没有启用时，它将不再响应。
Also, it's considered best practice now to use emvalues for media queries instead of pixels to make sure your website always scales right. More on this topic in this article.
此外，现在将em值用于媒体查询而不是像素被认为是最佳实践，以确保您的网站始终正确缩放。在本文中详细介绍了此主题。
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 :)
希望有所帮助:)
回答by vzeke
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.
id' 个人使用 CSS 并设置最小宽度和最大宽度。现在大多数响应式设计都使用 CSS。这样，如果市场上有新设备，它只会根据其屏幕尺寸进行调整。
@media screen and (max-width:480px) { }
@media screen and (min-width:481px) { ) etc... etccc....
回答by Tepken Vannkorn
I prefer Twtitter Bootstrapover using CSS3 media queries for such various devices.
我更喜欢Twtitter Bootstrap，而不是为各种设备使用 CSS3 媒体查询。
回答by Ico Portela
I prefer use media queriesin CSS. Just write the queriesafter the default CSS...
我更喜欢在 CSS 中使用媒体查询。只需在默认 CSS 之后编写查询...
@media screen and (max-width: 600px) { write here only the elements that must change de code for responsive performance}
@media screen and (max-width: 600px) {在这里只写那些必须改变代码以获得响应性能的元素}
.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.
不要忘记将视口代码插入到 head/HTML 中。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=false" />
回答by BlackMagic
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.
试试 jRWD，这是我最近设计的一个纯 JavaScript 模块。它使用 12 行纯 JavaScript 和 2 个小辅助函数。它可以在 GitHub 上找到，网址为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.
如果您想查看 jRWD 的实际应用，请访问http://ieee-qld.org。确保检查源代码。最少的 JavaScript，最少的 CSS 样式表。也没有 jQuery。
