假如你经常关注一些门户网站，比如淘宝、乐视等等，发现他们目前的网站布局在不同的分辨率下有不同的效果，这种技术也是未来的趋势，不仅在PC端，而且在我们的移动端。现在人手基本上是一台智能机器，分辨率也很多，如何在不同的分辨率下，给用户带来更好的体验，作为前端人员应该花更多的时间。在项目过程中，产品和测试人员经常问以下类似的问题：
> 为什么三星S4和苹果4/5错位换行，图片质量太差？
> 为什么我浏览笔记本电脑和台式电脑有不同的效果？
> 能保证不同分辨率下的内容能充满屏幕吗？
…
废话少说，其实今天我想介绍一个强大的东东:Media Queries。您可以根据不同的条件设置不同的media类型的表达式。例如，您可以为大屏幕设置一种样式，为mobile设置另一种样式。这个功能相当强大，你可以为不同的设备提供不同的风格效果，而不需要修改页面内容。
让我们详细介绍如何应用Mediaia Queries！
Media Queries
打开Demo页面，调整浏览器大小，查看页面布局的变化。
Max Width
当页面视图区域小于600px宽度时，使用css。
- @media screen and (max-width: 600px) {
- .class {
- background: #ccc;
- }}
你也可以在页面上使用以下方法<head>引用外部css文件。
<link rel=”stylesheet” media=”screen and (max-width: 600px)” href=”small.css” />
Min Width
当视图区域大于900px宽度时，使用css。
- @media screen and (min-width: 900px) {
- .class {
- background: #666;
- }}
多个 Media Queries
您可以使用多个media queries组合在一起，当视图区域宽度在600px到900px之间时，将使用以下css。
- @media screen and (min-width: 600px) and (max-width: 900px) {
- .class {
- background: #333;
- }}
Width设备
下面的css会在 max-device-width用于480px，如iphone。
注意：max-device-width是指设备的实际分辨率，max-width指的是可区域尺寸。
- @media screen and (max-device-width: 480px) {
- .class {
- background: #000;
- }}
针对 iPhone 4
以下是iphone4的css。
<link rel=”stylesheet” media=”only screen and (-webkit-min-device-pixel-ratio: 2)” type=”text/css” href=iphone4.css” />
针对 iPad
您还可以在ipad上检查定位（portrait 或者 landscapse）。
<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”> <link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”>
针对Internet ExplorerMedia Queries
因为ie8和之前版本的ie浏览器不支持media query，您需要使用JavaScripthack来解决问题。以下是一些解决方案：
CSS Tricks – 用jquery判断浏览器的大小
The Man in Blue – 使用Javascriptt
jQuery Media Queries 插件
示例站点
可以使用支持mediaia query的浏览器访问以下网站，例如：Firefox, Chrome, 和 Safari。您可以查看他们对浏览器宽度的布局响应。
1、淘宝首页新版
现在淘宝主页中间部分布局是：左中右，左导航是固定宽度，中右使用“media query在不同的分辨率下采用响应布局，如下：
默认尺寸[1190px]：
中等尺寸[1009px]：
小尺寸[740px]：
2、Hicksdesign
- 大尺寸: 3 列sidebar
- 小尺寸: 2 列sidebar (中间的sidebar跑到左边)
- 更小尺寸: 1 列sidebar (最右边跑到logo下面)
- 最小尺寸: 没有sidebar (logo 和 右侧的sidebar 其他sidebar向上移动 下移)
3、Colly
根据浏览器的可视区域，页面布局在1列、2列和4列之间切换。
4、A List Apart
大尺寸：导航在上不部， 1行图片
中等尺寸：左边导航， 3列图片
小尺寸：导航在上部，logo没有背景图片， 3列图片
5、Tee Gallery
他和以前的colly有点像，区别在于它的图片会根据页面布局的变化缩放。这里使用的技巧是用百分比宽度代替固定宽度，比如:width=100%。
总结
总而言之，Media Query目前在移动终端上有很多应用。虽然PC端有一些局限性，但未来是一种趋势。我们应该更多地研究它，以使我们的项目有更好的用户体验。
我们需要注意的是，为mobile制作css并不意味着我们的网站优化了mobile设备。优化mobile设备，网站图片和html代码也需要缩小尺寸，这有利于加载。media query所做的只是设计展示，而不是优化操作。后面会讲“下面会讲”如何在网页中实现字体响应？请期待！
评论0