最近在做 react 移动端开发，重新开始接触到叫高级的Css使用，为了加深自己的记忆，整理一些学习笔记，供日后查阅。

Media Queries

Media 这个东西让看到它吓了我一跳，真真的了不起，它让我可以给不同大小的浏览器定制不同的效果，以及针对不同设备设定不同布局。

今天在做移动端css效果时，发现一个问题，在做一个个性化Tab标签时，发现在iphone5，iphone6，ipad上，我需要让他展示不同的效果，用js可以实现这样的效果，但是感觉css和js耦合起来的编程方式让我很不舒服。

于是我想到了使用 Media 来达到我想要的效果，使用它的时候感觉很奇妙，真的很有趣。

使用

• screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型
• and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)
• (min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。完整的特性参看 相关的Media features部分

<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">

可以通过 link 标签的 media 属性，来根据不用的像素加载需要的css，但是在项目前期高频修改的前提下，使用这样的方式，增加了维护的成本（个人原因，喜欢把东西细化，但是在不断分化、细化后发现，在需求不太确定的项目前期做这样的事情，增的是在作死...）

min-width和max-width的含义

max-width表示最大宽度，也就是说在不超过该宽度下的情况下执行。所以@media only screen and (max-width: 1024px) {}表示的含义是：当浏览器的宽度小于1024像素的时候，花括号里面的CSS样式其作用

@media only screen and (max-width: 1024px) {
    body { background-color: blue;}
}

详细介绍

@media only screen and (min-width: 320px)

• not: not 是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）
• only: 用来定某种特别的媒体类型。对于支持 Media Queries 的移动设备来说，如果存在 only 关键字，移动设备的Web浏览器会忽略 only 关键字并直接根据后面的表达式应用样式文件。对于不支持 Media Queries 的设备但能够读取 Media Type 类型的Web浏览器，遇到 only 关键字时会忽略这个样式文件。
• all: 所有设备，这个应该经常看到

浏览器支持

并非所有的浏览器都支持Media Queries

Media Queries是CSS3对于Media Type的一个扩展，所以不支持Media Queries的浏览器，应该仍然要识别Media Type，但是IE只是简单的忽略了样式。only 关键字可能显得有些多余，对支持Media Queries的浏览器来说确实是这样，因为加不加 only 没有影响。only的作用，很多时候是用来对那些不支持Media Queries但是却读取Media Type的设备隐藏样式表的。比如：

<link rel="stylesheet" type="text/css" href="example.css" media="only screen and (color)">

• 支持Media Queries的设备，正确应用样式，就仿佛only不存在
• 不支持Media Queries但正确读取Media Type的设备，由于先读取到only而不是screen，将忽略这个样式
• 不支持Media Queries的IE不论是否有only，都忽略样式

完整的支持情况罗列

自适应网页设计

允许网页宽度自动调整

首先，在网页代码的头部，加入一行viewport元标签。

<meta name="viewport" content="width=device-width, initial-scale=1" />

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

正常的web开发均可使用，这是常规的 meta 标签，如果不使用该标签写出来的页面效果，在手机屏幕上看会被缩小到默认像素，影响在手机上的使用。

所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。

<!--[if lt IE 9]>
　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

不使用绝对宽度

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。

具体说，CSS代码不能指定像素宽度：

width:xxx px;

只能指定百分比宽度：

width: xx%;

或者

width:auto;

相对大小的字体

字体也不能使用绝对大小（px），而只能使用相对大小（em）。

body {
　　font: normal 100% Helvetica, Arial, sans-serif;
}

上面的代码指定，字体大小是页面默认大小的100%，即16像素。

h1 {
　　font-size: 1.5em;
}

然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。

small {
　　font-size: 0.875em;
}

流动布局（fluid grid）

"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。

.main {
　　float: right;
　　width: 70%;
}
.leftBar {
　　float: left;
　　width: 25%;
}

float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

图片的自适应

img { max-width: 100%;}

参考文章

• CSS3 Media Queries 详解
• CSS3 Media Queries的些野史外传
• 自适应网页设计（Responsive Web Design）