如何针对小于特定屏幕尺寸的设备进行定位？

Question

我有一个响应式网页，尺寸在750像素以下表现得很好，但之后就会遇到问题。需要大量使用CSS才能使其看起来好看，而且这是一个相当hackish的解决方案。

如果浏览器大小小于750像素，是否有一种方法可以将它们带到具有自己标记、样式等的特定页面？

谢谢， Jordan

- user1820262

Answer 1

你可以实现媒体查询，例如：

media queries

。

@media all and (max-width: 750px) {
/* CSS rules here for screens lower than 750px */
}
@media all and (min-width: 750px) {
/* CSS rules here for screens above 750px */
}

请参阅介绍媒体查询 - 第1部分：什么是媒体查询 - Adobe，媒体查询 - 维基百科，自由的百科全书以及CSS3媒体查询概述 - CSS媒体查询

- SW4

Answer 2

你可以仅将CSS应用于特定的设备宽度：

@media only screen and (max-width: 767px) {
    body { background-color: red; }
}

你可以轻松地显示和隐藏针对某个设备的HTML区域。即使加载时间会受到影响，因为所有设备都加载所有其他设备的标记，但你甚至可以对整个站点执行此操作。

.phone-section { display: none }

@media only screen and (max-width: 767px) {
    .phone-section { display: block }
    .desktop-section { display: none }
}

这里有一些更多的例子： http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml

- djk

Answer 3

你需要使用媒体查询来获得你想要的内容。

请参考链接以了解更多信息。

- Nitesh

Answer 4

屏幕尺寸：

640x480 800x600 1024x768 1280x1024（及更大）

用于屏幕尺寸的CSS媒体查询

- Krishna