使用 CSS 媒体查询创建响应式网站
简介现今每天都有更多的手机和平板电脑问市。消费者能够拥有可想象到的各种规格和形状的设备，但是网站开发人员却面临一个挑战：如何使他们的网站在传统浏览器、手机和平板电脑浏览器上有很好的效果，如何在各种大小的屏幕上提供一流的用户体验,答案是：采用响应式设计。响应式设计可以随所显示的屏幕大小而改变。实现响应式设计的主要方法是使用 CSS 媒体查询。
在本文中，将探索如何将媒体查询用于桌面网站、移动电话和平板电脑。同时还将了解如何检测媒体查询支持，以及如何为尚未支持此项技术的浏览器提供可靠体验。 先决条件本文中的代码样例被设计为可运行于支持 CSS 媒体查询的网页浏览器中，这些浏览器包括 Mozilla Firefox、Apple Safari、Google Chrome 和 Opera。请参阅 ，获取展示了桌面和移动浏览器中的 CSS3 媒体查询的浏览器兼容性支持的完整列表。
响应式设计响应式设计可根据所显示的屏幕大小而改变, 它呈现的每个屏幕看起来并不相同。按照可用的屏幕属性，响应式设计提供了 UI 的最佳效果。
例如，如果网站布局上有一个占据 25% 的屏幕宽度的侧边栏，那么该侧边栏在不同大小的屏幕上的呈现是不同的。该侧边栏在较大的桌面监控器上是宽屏的，在较小的
智能手机屏幕上是极其窄的。而在最高的或最小的屏幕上，侧边栏很可能不再是可用的 UI 组件。
有了媒体查询，您就可以编写 CSS，自动将设计更改为提供不同屏幕大小的最佳 UI 体验。
媒体查询从 CSS 版本 2 开始，就可以通过媒体类型在 CSS 中获得媒体支持。如果您曾经使用过打印样式表，那么您可能已经使用过媒体类型。清单 1 展示了一个示例。
清单 1. 使用媒体类型&link rel="stylesheet" type="text/css" href="site.css" media="screen" /&
&link rel="stylesheet" type="text/css" href="print.css" media="print" /&在清单 1 中，media 属性定义了应该用于指定每种媒体类型的样式表：screen 适用于计算机彩色屏幕。print 适用于打印预览模式下查看的内容或者打印机打印的内容。作为 CSS v3 规范的一部分，可以扩展媒体类型函数，并允许在样式表中使用更精确的显示规则。媒体查询 是评估 True
或 False 的一种表达。如果为 True，则继续使用样式表。如果为 False，则不能使用样式表。这种简单逻辑通过表达式变得更加强大，使您能够更灵活地对特定的设计场景使用自定义的显示规则。
媒体查询包含一个媒体类型，后跟一个或多个检查特定条件（如最小的屏幕宽度）的表达式。样式表中的媒体查询看起来如清单 2 中的示例所示。
清单 2. 媒体查询规则@media all and (min-width: 800px) { ... }根据清单 2 中的标记，所有最小水平屏幕宽度为 800 像素的屏幕（屏幕和打印等）都应使用如下 CSS 规则。该规则在示例中省略号所在的地方。对于该媒体查询：@media all 是媒体类型，也就是说，将此 CSS 应用于所有媒体类型。(min-width:800px) 是包含媒体查询的表达式，如果浏览器的最小宽度为 800 像素，则会告诉浏览器只运用下列 CSS。请注意，在清单 2 中，可以省略关键词 all 和 and。在将某个媒体查询应用于所有媒体类型时，会省略 all。后面的 and 也是可选的。使用简写语法重新编写媒体查询，如清单 3 所示。
清单 3. 简写语法@media (min-width:800px) { ... }媒体查询也可以包含复杂表达式。例如，如果您想要创建一个仅在最小宽度为 800 像素且最大宽度为 1200 像素时应用的样式，则需要按照清单 4 中的规则来做。
清单 4. 复杂表达式@media (min-width:800px) and (max-width:1200px) { ... }在您的表达式中，您可以根据自己的喜好使用任意数量的 and 条件。如果您想要增加其他条件来检查特定的屏幕方向，只需添加另一个 and 关键词，后跟 orientation 媒体查询，如清单 5 所示。
清单 5. and 条件@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }清单 5 中的媒体查询仅在宽度为 800 到 1200 像素且方向是纵向时才能激活。（通常，方向仅对能够轻易转换纵横模式的智能手机和平板电脑上是有意义的。）如果其中一个条件为 False，则无法应用媒体查询规则。
and 关键词的反义词是 or 关键词。和 and 一样，这些条件组合在一起会构成复杂表达式。如果其中有一个条件为 True，那么整个表达式或分离的两个条件都会为 True，如清单 6 所示。
清单 6. or 关键词@media (min-width:800px) or (orientation:portrait) { ... }如果宽度至少是 800 像素或方向是纵向的，则会应用该规则。另一个保存在词库中的媒体查询关键词是 not。位于媒体查询的开始处，not
会忽略结果。换句话说，如果该查询本来在没有 not 关键词的情况下为 true，那么现在它将为 false。清单 7 展示一个示例。
清单 7. 使用 not@media (not min-width:800px) { ... }仅从英文意思上理解，清单 7 中代码的表示：当最小宽度不是 800 像素时，会应用下列 CSS 规则。这些示例只是将像素作为媒体查询中的测量单位，但是测量单位并不仅限于像素。您可以使用任何有效的 CSS 测量单位，比如厘米 (cm)、英寸 (in)、毫米 (mm) 等。
有用的媒体特性媒体很多特性，比如宽度、颜色和网格，您可以在媒体查询中使用它们。对每个可能的媒体特性进行描述不在本文讨论范围内。关于媒体查询的文档 The World Wide Web Consortium's (W3C) 提供了这方面的一个完整清单。（请参阅 ）。
要设计响应式网站，只需要了解一些媒体特性：方向、宽度和高度。作为一个简单媒体特性，方向的值可以是 portrait 或 landscape。这些值适用于持有手机或平板电脑的用户，使您可以根据两个形状因素来优化内容。当高度大于长度时，则认为屏幕是纵向模式，当宽度大于高度时，则认为屏幕是横向模式。清单 8 显示了一个使用 orientation 媒体模式查询的示例。 清单 8. orientation 媒体查询@media (orientation:portrait) { ... }高度和宽度行为十分相似，都支持以 min- 和 max- 为前缀。清单 9 展示了一个有效的媒体查询。
清单 9. 高度和宽度媒体查询@media (min-width:800px) and (min-height:400px) { ... }如果没有 min- 或
max- 前缀，您还可以使用 width 和 height 媒体特性，如清单 10 所示。清单 10. 不带 min- 和 max- 前缀@media (width:800px) and (height:400px) { ... }
当屏幕正好是 800 像素宽、400 像素高时，可以使用清单 10 中的媒体查询。现实中，像这样的媒体查询可能过于具体而不太有用。检测精确维度是大多数网站访问者都不可能遇到的一个场景。通常情况下，响应式设计会使用范围来执行屏幕检测。
作为媒体查询大小范围的后续内容，下一节将讨论一些常见的媒体查询，在设计一个响应式网站时，您可能会发现它们非常有用。
常见媒体查询因为 Apple 首次向市场推出了用户智能手机和平板电脑产品，所以下列大多数媒体查询都是基于这些型号的设备。
如果目标是横向模式智能手机，则使用：
@media (min-width: 321px) { ... }
如果目标是纵向模式智能手机，则使用：
@media (max-width: 320px) { ... }
如果目标是横向模式 Apple iPad，则使用：
@media (orientation: landscape) { ... }
如果目标是纵向模式 iPad，则使用：
@media (orientation: portrait) { ... }
您可能已经注意到了，iPad 上使用的是 orientation 媒体特性，而 width 用于 Apple iPhone 之上。主要是因为 iPhone 不支持 orientation 媒体特性。您必须使用 width 模拟这些方向断点。请参阅 ，获取有关常见媒体特性的更多信息。
SASS 中的媒体查询 Ruby on Rails 中的内置支持有助于推进 Syntactically Awesome Style Sheets (SASS) 的盛行，使其在 Web 开发社区中迅速走强。关于 SASS 的详细讨论已超出了本文的讨论范围，但我会在基于 SASS 的样式表中简要介绍使用媒体查询的基础知识。请参阅 ，获取有关 SASS 的更多信息。
SASS 行为中的媒体查询与普通 CSS 中的完全相同，但有一个例外：它们可以嵌套在其他 CSS 规则中。当一个媒体查询嵌套在另一个 CSS 规则中时，会将规则置于样式表的顶层，如清单 11 所示。清单 11. 嵌套的媒体查询#header {
width: 400
@media (min-width: 800px) {
width: 100%;
}清单 11 中的示例将编译到清单 12 的代码中。清单 12. 编译结果#header {
width: 400
@media (min-width: 800px) {
width: 100%;
}组织您的媒体查询现在，我们已经了解了如何编写媒体查询，是时候考虑采用以一种合乎逻辑的、有组织的方式将媒体查询部署到您的 CSS 代码中了。确定如何组织媒体查询很大程度上是一种个人偏好。这一小节将探讨两种主要方法的优点和缺点。
第一个方法是为不同屏幕大小指定完全不同的样式表。优点是规则可以保存在独立样式表中，这使得显示逻辑能够清楚地划分出来，更便于团队进行维护。另一个优势是源代码分支之间的合并变得更为容易。但优点同时也是缺点。如果要为每个媒体查询创建单独的样式表，则无法将一个元素的所有样式表放在同一文件夹的同一位置。当改变一个 CSS 中的一个元素时，需要创建多个位置进行查看，这使得网站 CSS 的维护变得更加困难。
第二个方法是在现有样式表中使用媒体查询，该样式表就在定义其余元素样式表的位置的旁边。这种方法的优势是可以将所有元素样式保存在同一个位置。当在团队模式下工作时，这种做法可以创建更多源代码合并工作，但这是所有基于团队的软件开发都可以管理且常见的一部分。
没有所谓正确或错误方法。您只需选择最适合您的项目和团队的方法即可。
浏览器支持到现在为止，您可能已经相信 CSS 媒体查询是一个强大的工具，而且想知道哪些浏览器支持 CSS 媒体查询。以下是这方面的好消息和坏消息。好消息是：大多数现代浏览器（包括智能手机上的浏览器）都支持 CSS 媒体查询。坏消息是：最近，来自 Redmond 的 Windows® Internet Explorer® 8 浏览器不支持媒体查询。
对于大多数专业 Web 开发人员来说，这意味着您需要提供一个解决方案，以便在 Internet Explorer 中支持媒体查询。 下列解决方案是一个名为 respond.js 的 JavaScript polyfill。带有 respond.js 的 Polyfill Respond.js 是一个极小的增强 Web 浏览器的 JavaScript 库，使得原本不支持 CSS 媒体查询的浏览器能够支持它们。该脚本循环遍历页面上的所有 CSS 引用，并使用媒体查询分析 CSS 规则。然后，该脚本会监控浏览器宽度变化，添加或删除与 CSS 中媒体查询匹配的样式。最终结果是，能够在原本不支持的浏览器上运行媒体查询。
由于这是一个基于 JavaScript 的解决方案，所以浏览器需要支持 JavaScript，以便运行脚本。该脚本只支持创建响应式设计所需的最小和最大 width 媒体查询。这并不是适用于所有可能 CSS 媒体查询的一个替代。在
部分，可以阅读关于该脚本特性和局限性的更多信息。Respond.js 是您可以选择的诸多可用开源媒体查询 polyfills 之一。如果您觉得 respond.js 无法满足您的需求，在进行一个小小的研究之后，您就会发现几个替代方案。
结束语有了 CSS 媒体查询，您就可以轻松地将特定屏幕大小作为目标，并创建一个可靠的用户体验，不管使用何种浏览器或设备来访问您的网站。这些技术是响应式设计的重中之重，响应式设计是一个新兴移动 Web 设计和开发实践。在您的网站上尝试使用媒体查询并不涉及实际成本（除了只是增强您的现有 CSS 文件），为何不尝试一下使在平板电脑、手机或电子阅读器上访问您网站的访客有良好的体验。
相关主题：您会看见一个显示 CSS 媒体查询的浏览器支持的列表。 ：获取可能媒体特性的完整清单。
：获取关于常见媒体查询的更多信息。
：在 SASS 官方网站上找到关于如何使用它的详细信息。
：获取提高您 XML 领域技能所需的资源，包括 DTD、schema、以及 XSLT。访问
获得广泛的技术文章和技巧、教程、标准和 IBM 红皮书。：在 Github 上访问官方 Respond.js 项目。
：找到各种基于 Web 的解决方案的文章。访问
获取广泛的技术文章和技巧、教程、标准和 IBM 红皮书。：下载或
并开始使用来自 DB2、Lotus、Rational、Tivoli 和 WebSphere 的应用程序开发工具和中间件产品。
添加或订阅评论，请先或。
有新评论时提醒我
static.content.url=http://www.ibm.com/developerworks/js/artrating/SITE_ID=10Zone=Web developmentArticleID=848489ArticleTitle=使用 CSS 媒体查询创建响应式网站publish-date=对文章打分
CSS3 Media Query：移动 Web 的完美开端
阅读 (24310) 评论 (13)
阅读 (21741) 评论 (8)
阅读 (18542) 评论 (19)
阅读 (92759) 评论 (2)
阅读 (63522) 评论 (15)
阅读 (37020) 评论 (21)
Advertisment ad adsense googles cpro.baidu.comrem 作为一个低调的长度单位，由于手机端网页的兴起，在屏幕适配中得到重用。使用 rem 前端开发者可以很方便的在各种屏幕尺寸下，通过等比缩放的方式达到设计图要求的效果。(当然了,他是一个相对单位,以html中的font-size为基准,这也是优于以em为单位的好处)rem 的官方定义『The font size of the root element.』，即以根节点的字体大小作为基准值进行长度计算。一般认为网页中的根节点是 html 元素，所以采用的方式也是通过设置 html 元素的 font-size
来做屏幕适配，但实际情况真有这么简单吗？首先我们来看看使用 rem 实现手机屏幕适配的常用方案。以设计稿的宽度为640px，即：designWidth = 640，同时设定在640px屏宽下 1rem=100px ，即：rem2px = 100。设置 1rem=100px 的优点不言而喻。前端开发者在切图、重构页面的时候，通过直接位移小数点的方式，就可以将UI图中测量到的 px 值换算成对应的 rem 值，方便快捷。此外，在 head 中我们还设置了：&meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"
viewport 的作用很重要，(不加这个meta标签,我不会告诉你在手机屏幕上字体显示特别小)但不是本文的重点所以不展开，有兴趣的同学可以自行搜索。
下面四个方案来自同事共享，原理都是采用等比缩放的方式 —— 获得目标屏幕宽度和设计稿宽度的比，作为 rem 的基值（缩放系数），设置为html标签的字体大小。不同的只是在于性能取舍和书写习惯。方案1@media screen and (min-width: 320px) {html{font-size:50}}@media screen and (min-width: 360px) {html{font-size:56.25}}@media screen and (min-width: 375px) {html{font-size:58.59375}}@media screen and (min-width: 400px) {html{font-size:62.5}}@media screen and (min-width: 414px) {html{font-size:64.6875}}@media screen and (min-width: 440px) {html{font-size:68.75}}@media screen and (min-width: 480px) {html{font-size:75}}@media screen and (min-width: 520px) {html{font-size:81.25}}@media screen and (min-width: 560px) {html{font-size:87.5}}@media screen and (min-width: 600px) {html{font-size:93.75}}@media screen and (min-width: 640px) {html{font-size:100}}@media screen and (min-width: 680px) {html{font-size:106.25}}@media screen and (min-width: 720px) {html{font-size:112.5}}@media screen and (min-width: 760px) {html{font-size:118.75}}@media screen and (min-width: 800px) {html{font-size:125}}@media screen and (min-width: 960px) {html{font-size:150}}方案2@media screen and (min-width: 320px) {html{font-size:312.5%;}}@media screen and (min-width: 360px) {html{font-size:351.5625%;}}@media screen and (min-width: 375px) {html{font-size:366.211%;}}@media screen and (min-width: 400px) {html{font-size:390.625%;}}@media screen and (min-width: 414px) {html{font-size:404.2969%;}}@media screen and (min-width: 440px) {html{font-size:429.6875%;}}@media screen and (min-width: 480px) {html{font-size:468.75%;}}@media screen and (min-width: 520px) {html{font-size:507.8125%;}}@media screen and (min-width: 560px) {html{font-size:546.875%;}}@media screen and (min-width: 600px) {html{font-size:585.9375%;}}@media screen and (min-width: 640px) {html{font-size:625%;}}@media screen and (min-width: 680px) {html{font-size:664.0625%;}}@media screen and (min-width: 720px) {html{font-size:703.125%;}}@media screen and (min-width: 760px) {html{font-size:742.1875%;}}@media screen and (min-width: 800px) {html{font-size:781.25%;}}@media screen and (min-width: 960px) {html{font-size:937.5%;}}方案3var designWidth = 640, rem2px = 100;document.documentElement.style.fontSize =
((window.innerWidth / designWidth) * rem2px) + 'px';方案4var designWidth = 640, rem2px = 100;document.documentElement.style.fontSize =
((((window.innerWidth / designWidth) * rem2px) / 16) * 100) + '%';为了更避免理解上的混乱，我在上面js的代码中加了 ( ) ，实际代码中是不需要的。详细分析一下，rem 和 px 直接的转换公式可以写为：1rem = 1 * htmlFontSizehtmlFontSize 为 html 元素的字体大小。首先来看方案1中，在屏宽为640px情况下的设置：@media screen and (min-width: 640px) {html{font-size:100}}可以很明显的表现出这一点 1rem = 1 * 100px ，同我们最初的设定。那么我们要得到其它屏幕大小的 htmlFontSize 值要怎么办。很简单如方案3，因为我们的采用等比缩放的方式适配，所以计算目标屏幕宽度和设计稿的宽度的比即可：window.innerWidth / designWidth * rem2px + 'px'由于浏览器默认字体大小为 16px，所以当我们使用百分比作为根节点 html 的字体大小时，即html元素的font-size值设置为一个百分比值，rem 的计算方式就会改为：defaultFontSize = 16px1rem = 1 * htmlFontSize * defaultFontSize如方案2中，在屏宽为640px情况下的设置：@media screen and (min-width: 640px) {html{font-size:625%;}}应用上面的公式：1rem = 1 * 625% * 16px其中：625% * 16 = 6.25 * 16 = 100所以：1rem = 1 * 100px同样的可以得到所有屏幕大小下，html 的 font-size 值的计算公式，即为方案4：window.innerWidth / designWidth * rem2px / 16 * 100
+ '%'通过方案3和方案4的公式，就可以很方便的生成方案1和方案2中的css。这里只给出了方案3和方案4对应验证页面（方案1和方案2是它们的变形）: scheme3.html, scheme4.html如下面两张图，是在屏宽为360px下的效果，通过计算目标为：1rem = 56.25px。方案3设置值为：56.25px，方案4设置值为：351.5625%方案3
到目前为止貌似很完美的解决了问题，实际情况当然是出现了意外。在有些
手机上，浏览器或
webview 的默认字体是随着系统设置的字体改变的。这样就会导致默认字体大于或小于 16px。修改默认字体大小后，我们再看方案3和方案4。同样在屏宽为360px下，我们调大系统字体大小，如下面的效果设置前 html 元素的字体大小的计算值为 18px ，设置后的计算值为 65px ，由于屏幕宽度没有改变，我们的目标值，即我们在 html 元素上设置的 font-size 值也没有变化任然为 56.25px，而最终计算值出现了偏差。方案3
分析偏差前，先来看在360px屏宽下，方案3和方案4的计算过程：方案3：document.documentElement.style.fontSize = 56.25pxhtmlFontSize = 56.25px1rem = 1 * htmlFontSize = 56.25px实际为：1rem = 64.6875px方案4：document.documentElement.style.fontSize = 351.5625%htmlFontSize = 351.5625%defaultFontSize = 18px1rem = 1 * htmlFontSize * defaultFontSize = 351.5625% * 18px = 63.28125px351.5625% * 18 = 63.28125实际为：1rem = 64.6875px貌似方案4的计算结果很接近实际效果，而方案3偏差很大。再来比较方案3和方案4的计算公式：// 方案3document.documentElement.style.fontSize =
window.innerWidth / designWidth * rem2px + 'px';// 方案4document.documentElement.style.fontSize =
window.innerWidth / designWidth * rem2px / 16 * 100 + '%';方案4较于方案3其实多除了一个16，可以推测浏览器在计算 rem 的具体值时，如果 html 设置的 font-size 为 px 值时会先除以 16 ，然后再乘以 htmlFontSize。1rem = 1 * (56.25px / 16) * 181 * (56.25 / 16) * 18 = 63.28125方案4存在问题，是因为系统的默认字体改为了 18px ，但是我们在计算百分比是时候，还是以 16px 为基准值进行计算，所以出现偏差（计算值和实际值之间还有一点偏差这个在后面会提到）。而在方案3中，我们其实是不考虑浏览器默认字体大小的，但在实际使用的过程中，浏览器还是除了 16 ，而此时默认字体大小为 18px。得出如下在 html 的 fontSize 设置为 px 的情况下 rem 的计算公式为：1rem = 1 * (htmlFontSize / 16) * defaultFontSize在系统设置的字体大小发生改变时，defaultFontSize 会跟着改变，而 16 不会变化。所以方案3虽然表面上不考虑默认字体大小的变化，只关注屏幕与设计稿之间的宽度比，但在实际计算中还是使用到了默认字体大小，而且还有一个不变的 16 在作祟，导致方案3失败。所谓的「root element」其实不是想象的那样，一个是16，一个是18，到底取的是那个 root element 的字体大小。ok，rem 的计算的时候，px 的方式会有一个16不随系统字体大小改变，所以我们采用百分比的方案，绕开这个问题。采用百分比的方案4因为在计算时写死了默认字体大小 16px。所以它的偏差在于没能动态的获取默认字体大小。更新如下：方案4.1var designWidth = 640, rem2px = 100;var h = document.getElementsByTagName('html')[0];var htmlFontSize = parseFloat(window.getComputedStyle(h, null)
.getPropertyValue('font-size'));document.documentElement.style.fontSize =
window.innerWidth / designWidth * rem2px / htmlFontSize * 100 + '%';效果如下图：16px 的图中，设置后的 html 的 font-size 与 1rem 的实际值有偏差，同时 6.4rem 的计算值也有偏差。通过查看代码发现html的font-size使用的是： getPropertyValue('font-size') 而 1rem 使用的是 getPropertyValue('width')，偏差出在计算 font-size 的时候浏览器进行了四舍五入。rem 定义中的另一个元素「font size」也不能按字面意思使用，宣告失守。18px 中的偏差，以及上文中方案4在 18px 实际值和计算值出现的偏差都是同样的问题。所以基准值还需要修改。16px
在更新一版，方案4.2：var designWidth = 640, rem2px = 100;var d = window.document.createElement('div');d.style.width = '1rem';d.style.display = "none";var head = window.document.getElementsByTagName('head')[0];head.appendChild(d);var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));d.remove();document.documentElement.style.fontSize =
window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%';效果如下图：16px
到此为止，rem 在默认字体不是 16px 的情况下的处理已经解决，考虑到还有设计屏幕旋转，最终手机端的解决方案为：function adapt(designWidth, rem2px){
var d = window.document.createElement('div');
d.style.width = '1rem';
d.style.display = "none";
var head = window.document.getElementsByTagName('head')[0];
head.appendChild(d);
var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));
d.remove();
document.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%';
var st = document.createElement('style');
var portrait = "@media screen and (min-width: "+window.innerWidth+"px) {html{font-size:"+ ((window.innerWidth/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}";
var landscape = "@media screen and (min-width: "+window.innerHeight+"px) {html{font-size:"+ ((window.innerHeight/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}"
st.innerHTML = portrait +
head.appendChild(st);
return defaultFontSize};
方案五,当然了,如果你会使用less或者sass,利用less就会自动计算出不同屏幕下的字体大小,样式会跟方案一相同,下面贴代码:
.re(@width){
@xs : 100px/(640px/@width);
@media (max-width:(@width + 2px)){
font-size:@
你只需要写入屏幕大小即可
.re(320px);
.re(768px);
.re(640px);
.re(600px);
移动端屏幕适配 fis3+rem方案
media媒体查询，移动端适配尺寸大全
@media screen解决移动web开发的多分辨率问题
利用@media screen实现网页布局的自适应
@media响应式媒介尺寸
没有更多推荐了，温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
刘国利：白色,是我的世界的颜色,独特而隐逸。我的“自由”不单纯是不让别人决定我的人生,还是认识我的个性,维护我的个性,决定我生活目标的代名词,也从不以“地位”、“权力”为目标,只为了自己心底的梦、珍重的事、守护的情而奋斗。
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
阅读(2382)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'移动端H5知识普及[系列] - CSS3媒体查询',
blogAbstract:'移动端H5知识普及 - CSS3媒体查询。\n前些日子，趁平日空隙书写了类库系列，这几天就来“普及”一下移动端HTML5开发的小知识吧~！虽然知识小，但是不得不承认的是，它们很重要~！\n我们每个人都有自己的属性，例如年龄、性别、身高、体重等。作为媒体（电脑、手机、电视、电话），也有它们的特性。CSS3针对所有的媒体均定义了width、color等媒体特性。作为媒体特性本身，其作用并没有什么，但是对于我们来说，我们可以通过检测媒体的特性确定不同的媒体，从而执行相应处理。那么此时就涉及到了我们的媒体查询~',
blogTag:'h5,css3,media,query,媒体查询',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:0,
publishTime:4,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'刘国利：白色,是我的世界的颜色,独特而隐逸。我的“自由”不单纯是不让别人决定我的人生,还是认识我的个性,维护我的个性,决定我生活目标的代名词,也从不以“地位”、“权力”为目标,只为了自己心底的梦、珍重的事、守护的情而奋斗。',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}