7

我在css3.info阅读了关于它们的文章,但我觉得它解释得不够好。我也无法让他们的示例随着我的屏幕尺寸而改变。我尝试在 Safari、FF、Chrome 中使用。

这是一个尚未准备好实现的功能吗?

如果我想在浏览器窗口宽度小于 1024px 时调整一些样式。我怎样才能做到这一点?

4

4 回答 4

6

应用于屏幕尺寸的规则意味着,引用 W3C 规范“如果视口的宽度在指定的约束条件下,则可在屏幕和手持设备上使用”。

http://www.w3.org/TR/css3-mediaqueries/

如果要在视口小于 1024px 时调整样式,可以使用以下规则:

@media screen and (max-width: 1024px) { … }

无论如何,此规则仅适用于视口的实际大小。如果您在不重新加载页面的情况下调整视口大小,则不会应用样式。

于 2010-09-01T15:04:14.650 回答
2

当在大于 800 像素宽的屏幕上显示时将样式表应用到文档:

<link rel="stylesheet" media="screen and (min-device-width: 800px)" >

当在任何小于 400 像素宽的设备上显示时将样式表应用到文档:

<link rel="stylesheet" media="all and (max-device-width: 400px)" >

里面

@media all and (max-width:800px) {
    body { color: red; }
}

苹果手机

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

::结合媒体查询

于 2010-09-01T14:56:48.550 回答
0

要查看不同媒体查询对调整大小或方向更改的反应,请尝试此页面上的演示:

http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/

您可以调整媒体查询属性以了解它们如何影响页面。

于 2011-04-20T16:53:09.140 回答
0

以下是一些解决此问题的项目,它们处于动态 CSS 和屏幕尺寸的最前沿:

  • 320及以上

    “320 及以上”通过使用小屏幕的样式表作为起点来防止移动设备下载桌面资产。

  • 少框架

    Less Framework 是一个用于设计自适应网站的 CSS 网格系统。它包含 4 个布局和 3 组排版预设,所有这些都基于一个网格。

于 2011-04-28T09:49:57.470 回答