6

我有一个响应式网页，它非常适合直到 750 像素，然后它就会遇到麻烦。它需要大量的 CSS 才能使它看起来不错，而且这是一个非常 hackish 的解决方案。

有没有办法让如果浏览器尺寸小于 750px 将它们带到具有自己标记、样式等的特定页面？

谢谢，乔丹

4

4 回答 4

12

You can implement media queries

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

Also see Introduction to media queries – Part 1: What are media queries - Adobe, Media queries - Wikipedia, the free encyclopedia and CSS3 Media Queries overview - CSS Media Queries

于 2013-11-12T12:09:38.910 回答
0

You need to Use Media Queries to get what you are looking for.

Refer the link to know more about it.

于 2013-11-12T12:09:46.913 回答
0

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

于 2013-11-12T12:18:05.960 回答
0

屏幕尺寸：

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

屏幕尺寸的 CSS 媒体查询

于 2013-11-12T12:22:12.563 回答