9

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

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

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

有什么好的解决方案可以解决我上面的担忧吗？或者哪个解决方案更好？

还是我误解了使用媒体查询的方法？

谢谢你。

4

5 回答 5

13

CSS 是要走的路，您始终可以使用诸如css3mediaqueries.js 之类的 js 插件为不支持媒体查询的浏览器提供后备，但仅依靠 JS 来使您的网站响应是一种风险，因为您无法判断确定用户是否将启用 Javascript，并且当它未启用时，它将不再响应。

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

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

希望有帮助:)

于 2013-08-23T06:06:30.840 回答
1

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

@media screen and (max-width:480px) { }
@media screen and (min-width:481px) { ) etc... etccc....
于 2013-08-23T04:22:40.167 回答
0

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

于 2013-08-23T04:23:28.247 回答
0

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

@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;
}
}

不要忘记将视口代码插入到头部/HTML 中。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=false" />
于 2013-08-24T00:05:34.793 回答
0

试试 jRWD，一个我最近设计的纯 JavaScript 模块。它使用了 12 行纯 JavaScript 和 2 个小辅助函数。它可以在 GitHub 上的https://github.com/BlackMagic/jRWD上找到。

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

于 2015-12-27T01:33:54.627 回答