Css - 学习笔记（一）响应式布局

最近在做 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 标签的 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_type	设备类型说明
all	所有设备
aural	听觉设备
braille	点字触觉设备
handled	便携设备，如手机、平板电脑
print	打印预览图等
projection	投影设备
screen	显示器、笔记本、移动端等设备
tty	如打字机或终端等设备
tv	电视机等设备类型
embossed	盲文打印机

浏览器支持

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

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

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

完整的支持情况罗列

流浪器	是否支持
IE6	不支持
IE7	不支持
IE8	不支持
IE9	支持
Chrome5	支持
Opera10	支持
Firefox3.6	支持
Safari4	支持

自适应网页设计

允许网页宽度自动调整

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

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

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

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

不使用绝对宽度

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

具体说，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）