使用css或javascript响应式网页设计？

Question

我打算建立一个使用响应式设计的网站。 我读了一些关于css媒体查询的信息。 我想做的是我的网页布局应该通过使用不同的设备（如PC，平板电脑或智能手机）看起来不同。

如果我使用媒体查询通过使用屏幕的宽度（以像素为单位）来确定设备，我总是担心是否会有使用极高ppi屏幕的新设备。 该设备可能会像平板电脑或类似PC一样受到威胁？

另一种使用用户代理通过使用userAgent确定设备类别的解决方案。 还有一个问题是，如果设备不能解释javascript，那么页面可能会被破坏。

任何可以解决我上述担忧的出色解决方案？ 或者哪种解决方案更好？

或者我误解了使用媒体查询的方法？

谢谢。

Answer 1

CSS是可行的方法，你可以随时使用像css3mediaqueries.js这样的js插件为不支持媒体查询的浏览器提供回退，但仅依靠JS来使你的网站响应是一种风险，因为你无法分辨确定用户是否启用了Javascript，并且当它未启用时，它将不再具有响应性。

此外，现在最好的做法是使用em值进行媒体查询而不是像素，以确保您的网站始终正确缩放。 本文中有关此主题的更多信息。

另一个提示是，您可以根据内容的最佳断点而不是设备尺寸来确定媒体查询值，这样您无论制作了多少新设备，都可以确保您的内容始终正确。

希望有帮助:)

Answer 2

id'亲自使用CSS并设置min-width和max-width。 大多数响应式设计现在使用CSS。 这样，如果市场上有新设备，它将根据它的屏幕尺寸进行调整。

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

Answer 3

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

Answer 4

我更喜欢在CSS中使用媒体查询 。 只需在默认CSS之后编写查询 ...

@media屏幕和（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;
}
}

不要忘记将视口代码插入head / HTML。

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

Answer 5

试试jRWD，这是我最近设计的JavaScript模块。 它使用12行纯JavaScript和2个小帮助函数。 它可以在GitHub上获得， 网址是https://github.com/BlackMagic/jRWD 。

如果您想查看jRWD的运行情况，请访问http://ieee-qld.org 。 确保检查源代码。 最小的JavaScript，最小的CSS样式表。 也没有jQuery。