Question

我有一个响应良好的网页，可以很好地适应750px，然后遇到麻烦。它需要大量的CSS才能让它看起来很好，这是一个非常糟糕的解决方案。

有没有办法让浏览器的尺寸小一点750px将它们带到某个页面，并带有自己的标记，样式等？

谢谢，约旦

Answer 1

e.g：

@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 */
}

另请参阅Introduction to media queries – Part 1: What are media queries - Adobe，Media queries - Wikipedia, the free encyclopedia和CSS3 Media Queries overview - CSS Media Queries

Answer 2

您需要使用 Media Queries 来获取所需内容。

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

Answer 3

您只能将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

Answer 4

屏幕尺寸：

640×480 800×600 1024×768 1280x1024（及更大）

CSS media queries for screen sizes

如何定位小于特定屏幕尺寸的设备

4 个答案: