CSS3 Media Query：移动Web的完美开端
前端技术 / houtizong 发布于 3年前 58
- 浏览器窗口的宽和高
- 设备的宽和高
- 设备的手持方向，横向还是竖向
- 分辨率
- 后移动时代的 Web 设计
- A List Apart – Responsive Web Design （ALA - 反应灵敏的 Web 设计）
- Apple – Safari Web Content Guide （Apple - Safari Web 内容指引）
- Sitepoint CSS Reference – Media Queries （SitePoint 的 CSS 参考手册 - Media Queries）
- Targeting the iPhone 4 Retina Display with CSS3 Media Queries （使用 CSS3 Media Queries 实现面向 iPhone 4 高精细显示屏的设计）
- Aral Balkan: How to make your web content look stunning on the iPhone 4’s new Retina Display（Aral Balkan：如何让你的 Web 内容在 iPhone 4 的高精细屏上更好地显示）
- Stuff and Nonsense: Proportional leading with CSS3 Media Queries （使用 CSS3 Media Queries 实现按比例行间距）
- Matthew James Taylor: iPad layout with landscape and portrait modes （iPad 的水平和垂直布局模式）
- Media Queries section on When Can I Use, showing which browsers have support （Media Queries 的浏览器支持情况）
- Media Queries jQuery plugin (only deals with max/min width) （Media Queries jQuery 插件）
- css3-mediaqueries-js – a library that aims to add media query support to non-supporting browsers（在不支持 Media Queries 的浏览器中实现对 Media Queries 的支持）
锐商企业CMS 写道 "移动时代，是任何 Web 设计与开发者都不能忽视的一个时代，总有一天，你设计的东西将被显示在两种屏幕上，桌面大屏幕和移动小屏幕，如何让同一个网站同时适应完全不同的两种尺寸的屏幕，这是一个很久以来都没有完美解决方案的问题，直到有了 CSS3（完整图文版）。 CSS3 的 Media Queries
在 CSS2 时代，如果你曾经为你的网站设计过打印版 CSS，就会明白 CSS3 Media Queries 的作用，不过，CSS3 的 Media Queries 比 CSS2 的 Media Type 更实用，事实上，CSS2 的 Media Type 并不曾被多少设备所支持过。CSS3 的 Media Queries 可以帮你获取以下数据：
这个网站在不同尺寸的设备上按不同的布局显示，并且，手机版在 iPhone，Opera Mini， Android 等设备上有完全一致的表现。
使用 Media Queries 为手机创建单独的 CSS
我们举一个简单的两栏式结构的例子。
为了让这个布局更好地在手机上显示，我们为手机版设计一个一栏式布局，且缩小 header 部分的图片大小。
使用 Media Queries 最直接的方法是，在你的 CSS 代码中，加一段独立代码分支，如下：
接着，在这个分支中，为小屏幕编写独立的 CSS 定义，这些定义可以覆盖桌面版 CSS 中的相应定义（只要将这段分支代码放在后面），以下针对小屏幕的 CSS 将布局变成一栏式，且使用了小尺寸的 Header 图片：
最终，我们在小屏幕设备上得到了如下显示效果：
使用 Media Queries 链接单独的 CSS 文件
对于小型的改动，直接在 CSS 代码中插入移动设备代码分支是很方便的，但对于大型站点，可以使用 Media Queries 链接独立的式样表文件，以便在独立的式样表文件中完全自由地为小设备编写 CSS 代码，方法如下：
测试 Media Queries
要在不同设备上测试 Media Queries 并非易事，你要有各种设备，还要将代码上传到某个主机进行访问测试。这里有一个在线服务，ProtoFluid，该服务允许你提供你要测试的网站的 URL，或者你本机上的 URL，然后，模拟 iPhone 等移动设备显示你的设计，下图是上文中提到的 dConstruct 网站在 ProtoFluid 的 iPhone 模拟中显示的样子。你也可以填写你自己的窗口尺寸，来模拟特定的设备。
在 ProtoFluid 使用 Media Queries，你需要同时加上 max-width 和 max-device-width 属性，这意味着，Media Queires 不仅可以针对不同的移动设备，还可以针对桌面系统中某些人为的小窗口情形。
使用上面的代码，在桌面浏览器上，当你改变窗口尺寸到达 480 像素的时候，就会看到布局的改变。需要注意的是，上面的 max-width 部分仅仅为了测试，如果你不希望用户在桌面浏览器中因为改变了窗口大小而导致你的布局改变，可以去掉 max-width 部分，而只针对那些移动设备。
对现有网站的整改
上面的例子为了说明问题起见都很简单，现实中的站点不可能这样，下面的例子，作者将使用他自己的公司网站，说明如何使用 Media Queries 对现有网站进行移动化整改。
桌面布局
作者自己的网站是几年前设计的，那是还没有考虑 Media Queries 问题，这是一个三栏式布局。
增加新的式样表
为了适应移动设备，将使用 Media Queries 加载独立的式样表：
作者的做法是，将他站点中原来的 CSS 文件另存为 small-device.css ，在这个基础上针对移动设备进行整改。
压缩 Header 部分
第一步是让 Logo 部分能在小屏幕上显示，因为这个 Logo 是基于背景图片的，因此很好办，同时，提供一个小尺寸的背景图，以便和 Logo 搭配。
单列式布局
下一步主要的工作是将多栏式布局换成单栏式，桌面版使用 Float 实现多栏布局，要改成单栏，只需将 float 设置为 float:none，并将 width 设置为 width:auto，这样，就实现了单列式布局。
再紧凑一些
然后，将margin 和 padding 进行调整，使之更紧凑一些：
在 iPhone 中测试
在 iPhone 中实际测试的时候，发现网站在单列式布局中仍然向外延伸了，从 Safari developer website 找到解决办法，在网站头，添加一个 meta tag，将网站的视窗宽度设置成何设备一致。
更多资源
如果你面向的访问者是 iPhone， Opera Mini 等移动设备，这没有问题，对于那些不支持 Media Queries 的浏览器（像 IE6/7/8），以下文章或许对你有帮助。
Jon Hicks 在 Hicksdesign 基于 Media Queries 实现了非常好的浏览体验，不仅针对移动设备，还面向那些拥有小屏幕的桌面系统。另外，还可以看看 Simon Collison’s website 以及 Ed Merritt’s portfolio 这些网站中对这种技术的运用。本文作者
Rachel Andrew
Rachel Andrew 是一名 Web 前端设计师与后端开发者，是一家英国 Web 开发顾问公司 edgeofmyseat.com 的主管，她还是一款小型 CMS 系统 Perch 的设计者。她写过多本 Web 开发与设计相关的书，包括由 SitePoint 出版的 CSS Anthology: 101 Essential Tips, Tricks and Hacks，她的个人博客是 rachelandrew.co.uk。
本文国际来源：Smashing Magazine How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
中文翻译来源： 锐商企业CMS 网站内容管理系统 官方网站"
在 CSS2 时代，如果你曾经为你的网站设计过打印版 CSS，就会明白 CSS3 Media Queries 的作用，不过，CSS3 的 Media Queries 比 CSS2 的 Media Type 更实用，事实上，CSS2 的 Media Type 并不曾被多少设备所支持过。CSS3 的 Media Queries 可以帮你获取以下数据：
这个网站在不同尺寸的设备上按不同的布局显示，并且，手机版在 iPhone，Opera Mini， Android 等设备上有完全一致的表现。
使用 Media Queries 为手机创建单独的 CSS
我们举一个简单的两栏式结构的例子。
为了让这个布局更好地在手机上显示，我们为手机版设计一个一栏式布局，且缩小 header 部分的图片大小。
使用 Media Queries 最直接的方法是，在你的 CSS 代码中，加一段独立代码分支，如下：
接着，在这个分支中，为小屏幕编写独立的 CSS 定义，这些定义可以覆盖桌面版 CSS 中的相应定义（只要将这段分支代码放在后面），以下针对小屏幕的 CSS 将布局变成一栏式，且使用了小尺寸的 Header 图片：
最终，我们在小屏幕设备上得到了如下显示效果：
使用 Media Queries 链接单独的 CSS 文件
对于小型的改动，直接在 CSS 代码中插入移动设备代码分支是很方便的，但对于大型站点，可以使用 Media Queries 链接独立的式样表文件，以便在独立的式样表文件中完全自由地为小设备编写 CSS 代码，方法如下：
测试 Media Queries
要在不同设备上测试 Media Queries 并非易事，你要有各种设备，还要将代码上传到某个主机进行访问测试。这里有一个在线服务，ProtoFluid，该服务允许你提供你要测试的网站的 URL，或者你本机上的 URL，然后，模拟 iPhone 等移动设备显示你的设计，下图是上文中提到的 dConstruct 网站在 ProtoFluid 的 iPhone 模拟中显示的样子。你也可以填写你自己的窗口尺寸，来模拟特定的设备。
在 ProtoFluid 使用 Media Queries，你需要同时加上 max-width 和 max-device-width 属性，这意味着，Media Queires 不仅可以针对不同的移动设备，还可以针对桌面系统中某些人为的小窗口情形。
使用上面的代码，在桌面浏览器上，当你改变窗口尺寸到达 480 像素的时候，就会看到布局的改变。需要注意的是，上面的 max-width 部分仅仅为了测试，如果你不希望用户在桌面浏览器中因为改变了窗口大小而导致你的布局改变，可以去掉 max-width 部分，而只针对那些移动设备。
对现有网站的整改
上面的例子为了说明问题起见都很简单，现实中的站点不可能这样，下面的例子，作者将使用他自己的公司网站，说明如何使用 Media Queries 对现有网站进行移动化整改。
桌面布局
作者自己的网站是几年前设计的，那是还没有考虑 Media Queries 问题，这是一个三栏式布局。
增加新的式样表
为了适应移动设备，将使用 Media Queries 加载独立的式样表：
作者的做法是，将他站点中原来的 CSS 文件另存为 small-device.css ，在这个基础上针对移动设备进行整改。
压缩 Header 部分
第一步是让 Logo 部分能在小屏幕上显示，因为这个 Logo 是基于背景图片的，因此很好办，同时，提供一个小尺寸的背景图，以便和 Logo 搭配。
单列式布局
下一步主要的工作是将多栏式布局换成单栏式，桌面版使用 Float 实现多栏布局，要改成单栏，只需将 float 设置为 float:none，并将 width 设置为 width:auto，这样，就实现了单列式布局。
再紧凑一些
然后，将margin 和 padding 进行调整，使之更紧凑一些：
在 iPhone 中测试
在 iPhone 中实际测试的时候，发现网站在单列式布局中仍然向外延伸了，从 Safari developer website 找到解决办法，在网站头，添加一个 meta tag，将网站的视窗宽度设置成何设备一致。
更多资源
如果你面向的访问者是 iPhone， Opera Mini 等移动设备，这没有问题，对于那些不支持 Media Queries 的浏览器（像 IE6/7/8），以下文章或许对你有帮助。
Jon Hicks 在 Hicksdesign 基于 Media Queries 实现了非常好的浏览体验，不仅针对移动设备，还面向那些拥有小屏幕的桌面系统。另外，还可以看看 Simon Collison’s website 以及 Ed Merritt’s portfolio 这些网站中对这种技术的运用。本文作者
Rachel Andrew
Rachel Andrew 是一名 Web 前端设计师与后端开发者，是一家英国 Web 开发顾问公司 edgeofmyseat.com 的主管，她还是一款小型 CMS 系统 Perch 的设计者。她写过多本 Web 开发与设计相关的书，包括由 SitePoint 出版的 CSS Anthology: 101 Essential Tips, Tricks and Hacks，她的个人博客是 rachelandrew.co.uk。
本文国际来源：Smashing Magazine How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
中文翻译来源： 锐商企业CMS 网站内容管理系统 官方网站"
上一篇：无人驾驶汽车开始一万公里长征
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
