css3与页面布局-概要，选择器，特殊性，刻度单位
Q1：选择器
1.id选择器(#):以#开始，引用时使用id，如id="div1"
2.类选择器(.):以.开始，使用class属性引用，可以有多个，如class="cls1 cls2 cls3"
3.标签选择器:以标签名称开始，如p,span,div,*
4.伪类选择器:a:hover，a:link，a:visted，a:active。
Q2：在CSS3中新增了很多的选择器，如果大家会jQuery，jQuery中多数选择器在CSS3中都可以直接使用。
| 选择器 | 例子 | 例子描述 | CSS |
|---|---|---|---|
| .class | .intro | 选择 class="intro" 的所有元素。 | 1 |
| #id | #firstname | 选择 id="firstname" 的所有元素。 | 1 |
| * | * | 选择所有元素。 | 2 |
| element | p | 选择所有 <p> 元素。 | 1 |
| element,element | div,p | 选择所有 <div> 元素和所有 <p> 元素。 | 1 |
| element element | div p | 选择 <div> 元素内部的所有 <p> 元素。 | 1 |
| element>element | div>p | 选择父元素为 <div> 元素的所有 <p> 元素。 | 2 |
| element+element | div+p | 选择紧接在 <div> 元素之后的所有 <p> 元素。 | 2 |
| [attribute] | [target] | 选择带有 target 属性所有元素。 | 2 |
| [attribute=value] | [target=_blank] | 选择 target="_blank" 的所有元素。 | 2 |
| [attribute~=value] | [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素。 | 2 |
| [attribute|=value] | [lang|=en] | 选择 lang 属性值以 "en" 开头的所有元素。 | 2 |
| :link | a:link | 选择所有未被访问的链接。 | 1 |
| :visited | a:visited | 选择所有已被访问的链接。 | 1 |
| :active | a:active | 选择活动链接。 | 1 |
| :hover | a:hover | 选择鼠标指针位于其上的链接。 | 1 |
| :focus | input:focus | 选择获得焦点的 input 元素。 | 2 |
| :first-letter | p:first-letter | 选择每个 <p> 元素的首字母。 | 1 |
| :first-line | p:first-line | 选择每个 <p> 元素的首行。 | 1 |
| :first-child | p:first-child | 选择属于父元素的第一个子元素的每个 <p> 元素。 | 2 |
| :before | p:before | 在每个 <p> 元素的内容之前插入内容。 | 2 |
| :after | p:after | 在每个 <p> 元素的内容之后插入内容。 | 2 |
| :lang(language) | p:lang(it) | 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。 | 2 |
| element1~element2 | p~ul | 选择前面有 <p> 元素的每个 <ul> 元素。 | 3 |
| [attribute^=value] | a[src^="https"] | 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 | 3 |
| [attribute$=value] | a[src$=".pdf"] | 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。 | 3 |
| [attribute*=value] | a[src*="abc"] | 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。 | 3 |
| :first-of-type | p:first-of-type | 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 | 3 |
| :last-of-type | p:last-of-type | 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 | 3 |
| :only-of-type | p:only-of-type | 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 | 3 |
| :only-child | p:only-child | 选择属于其父元素的唯一子元素的每个 <p> 元素。 | 3 |
| :nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 <p> 元素。 | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | 同上，从最后一个子元素开始计数。 | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 同上，但是从最后一个子元素开始计数。 | 3 |
| :last-child | p:last-child | 选择属于其父元素最后一个子元素每个 <p> 元素。 | 3 |
| :root | :root | 选择文档的根元素。 | 3 |
| :empty | p:empty | 选择没有子元素的每个 <p> 元素（包括文本节点）。 | 3 |
| :target | #news:target | 选择当前活动的 #news 元素。 | 3 |
| :enabled | input:enabled | 选择每个启用的 <input> 元素。 | 3 |
| :disabled | input:disabled | 选择每个禁用的 <input> 元素 | 3 |
| :checked | input:checked | 选择每个被选中的 <input> 元素。 | 3 |
| :not(selector) | :not(p) | 选择非 <p> 元素的每个元素。 | 3 |
| ::selection | ::selection | 选择被用户选取的元素部分。 | 3 |
2.关系选择器
包含选择器：E F：选择所有被E元素包含的F元素（与子选择符不同的是，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子...）
<style>
/* 包含选择符(E F) */
.demo div { border:1px solid #f00; }
/* 子选择符(E>F) */
.demo > div { border:1px solid #f00; }
</style>
<div class="demo">
<div>0
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
此例，如果使用.demo div，那么 0, 1, 2, 3 都有有边框；如果使用 .demo > div，那么只有 0 有边框，即只有子元素会被命中；
子选择器:E>F：选择所有作为E元素的子元素F。(与包含选择符不同的是，子选择符只能命中子元素，而不能命中孙辈。)
.demo > div {
position: relative;
}
<div class="demo">
<div class="a">
<div class="b">子选择符</div>
</div>
</div>
此例只有 .a 会被命中，因为它是 .demo 的子元素；
相邻选择器：E+F：选择紧贴在E元素之后F元素。（与兄弟选择符不同的是，相邻选择符只会命中符合条件的相邻的兄弟元素。）
兄弟选择符:E~F:选择E元素后面的所有兄弟元素F。(与相邻选择符不同的是，兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素。)
<style>
/* 相邻选择符(E+F) */
p+p{color:#f00;}
/* 兄弟选择符(E~F) */
p~p{color:#f00;}
</style>
<p>p1</p>
<p>p2</p>
<h3>这是一个标题</h3>
<p>p3</p>
<h3>这是一个标题</h3>
<p>p4</p>
<p>p5</p>
此例，如果使用p + p{color:#f00;}，那么p2将会变成红色；如果使用p ~ p{color:#f00;}，那么p2,p3,p4,p5将会变成红色；
//实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组合选择器</title>
<style type="text/css">
#div1 span
{
color: red;
}
</style>
</head>
<body>
<h2>组合选择器</h2>
<div id="div1">
<span>span1</span>
<div id="div2">
<span>span2</span>
</div>
</div>
<span>span3</span>
</body>
</html>
结果：
如上面所示，我们用到的是后代选择器，所以span1和span2变颜色
3.属性选择器
E[att]:选择具有att属性的E元素。
E[att="val"]:选择具有att属性且属性值等于val的E元素
E[att~="val"]:选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。
<style> div[class~="a"] { border: 2px solid #000; } </style> <div class="a">1</div> <div class="b">2</div> <div class="a b">3</div>
此例，将会命中1, 3两个div，因为匹配到了class属性，且属性值中有一个值为a
E[att^="val"]:选择具有att属性且属性值为以val开头的字符串的E元素。
E[att$="val"]:选择具有att属性且属性值为以val结尾的字符串的E元素。
E[att*="val"]:选择具有att属性且属性值为包含val的字符串的E元素。
E[att|="val"]:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。
<style> div[class|="a"] { border: 2px solid #000; } </style> <div class="a-test">1</div> <div class="b-test">2</div> <div class="c-test">3</div>
此例，将会命中第一个div，因为匹配到了class属性，且属性值以紧跟着"-"的a开头
伪类选择器
E:link:设置超链接a在未被访问前的样式
E:visited:设置超链接a在其链接地址已被访问过时的样式。
E:hover:设置元素在其鼠标悬停时的样式。
E:active:设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
超链接状态顺序：a:link{},a:visited{},a:hover{},a:active{}
注意，a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后
可靠的顺序是：l(link)ov(visited)e h(hover)a(active)te,
即用喜欢(love)和讨厌(hate)两个词来概括
E:focus:设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
input:focus{
width: 200px;
}
</style>
<body>
<input type="text"/>
</body>
</html>
E:lang(fr):匹配使用特殊语言的E元素。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>lang</title> <meta charset="utf-8"/> <style> p:lang(zh-cmn-Hans) { color: #f00; } p:lang(en) { color: #090; } </style> </head> <body> <p lang="zh-cmn-Hans">大段测试文字</p> <p lang="en">english</p> </body> </html>
E:not(s):匹配不含有s选择符的元素E。
有了这个选择符，那么你将可以很好的处理类似这样的场景：假定有个列表，每个列表项都有一条底边线，但是最后一项不需要底边线
.demo li:not(:last-child) { border-bottom: 1px solid #ddd; }
上述代码的意思是：给该列表中除最后一项外的所有列表项加一条底边线
E:root:匹配E元素在文档的根元素。在HTML中，根元素永远是HTML
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>root</title>
<meta charset="utf-8" />
<style>
html:root {
color: #f00;
}
</style>
</head>
<body>
<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
</ul>
</body>
</html>
结果:
颜色都改变
E:first-child:匹配父元素的第一个子元素E。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
这个需要好好讲解一下:
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>root</title> <meta charset="utf-8" /> <style> ul:first-child{ color: red; } </style> </head> <body> <ul> <li>列表项一</li> <li>列表项二</li> <li>列表项三</li> </ul> </body> </html>
当为ul:first-child是，你会看到li全部变色
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>root</title> <meta charset="utf-8" /> <style> li:first-child{ color: red; } </style> </head> <body> <ul> <li>列表项一</li> <li>列表项二</li> <li>列表项三</li> </ul> </body> </html>
当为li：first-child是只有第一个变色
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>root</title> <meta charset="utf-8" /> <style> p:first-child{ color: red; } </style> </head> <body> <div> <p>第一个</p> <span>第二个</span> </div> </body> </html>
当p为第一个位置是，变色
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>root</title> <meta charset="utf-8" /> <style> p:first-child{ color: red; } </style> </head> <body> <div> <span>第二个</span> <p>第一个</p> </div> </body> </html>
当p为第二个位置时，不变色
总结:E:first-child选择符，E必须是它的兄弟元素中的第一个元素，换言之，E必须是父元素的第一个子元素。与之类似的伪类还有E:last-child，只不过情况正好相反，需要它是最后一个子元素。
E:last-child:匹配父元素的最后一个子元素E。
E:last-child选择符，E必须是它的兄弟元素中的最后一个元素，换言之，E必须是父元素的最后一个子元素。与之类似的伪类还有E:first-child，只不过情况正好相反，需要它是第一个子元素
E:only-child：匹配父元素仅有的一个子元素E。
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>only</title> <meta charset="utf-8" /> <style> h1 { font-size: 16px; } li:only-child { color: #f00; } </style> </head> <body> <h1>只有唯一一个子元素</h1> <ul> <li>结构性伪类选择符 E:only-child</li> </ul> <h1>有多个子元素</h1> <ul> <li>结构性伪类选择符 E:only-child</li> <li>结构性伪类选择符 E:only-child</li> <li>结构性伪类选择符 E:only-child</li> </ul> </body> </html>
E:nth-child(n):匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
该选择符允许使用一个乘法因子(n)来作为换算方式，比如我们想选中所有的偶数子元素E，那么选择符可以写成：E:nth-child(2n)
使用E:nth-child(n)实现奇偶：
<style> li:nth-child(2n){color:#f00;} /* 偶数 */ li:nth-child(2n+1){color:#000;} /* 奇数 */ </style> <ul> <li>列表项一</li> <li>列表项二</li> <li>列表项三</li> <li>列表项四</li> </ul>
因为(n)代表一个乘法因子，可以是0, 1, 2, 3, ..., 所以(2n)换算出来会是偶数，而(2n+1)换算出来会是奇数
该选择符允许使用一些关键字，比如：odd, even
<style> li:nth-child(even){color:#f00;} /* 偶数 */ li:nth-child(odd){color:#000;} /* 奇数 */ </style> <ul> <li>列表项一</li> <li>列表项二</li> <li>列表项三</li> <li>列表项四</li> </ul>
关键字odd代表奇数，even代表偶数
有一点需要注意的是：
<div>
<p>第1个p</p>
<p>第2个p</p>
<span>第1个span</span>
<p>第3个p</p>
<span>第2个span</span>
<p>第4个p</p>
<p>第5个p</p>
</div>
p:nth-child(2){color:#f00;}
很明显第2个p会被命中然后变成红色
p:nth-child(3){color:#f00;}
这是会命中第3个p么？如果你这么认为那就错了，这条选择符就不会命中任何一个元素。
p:nth-child(4){color:#f00;}
这时你以为会命中第4个p，但其实命中的却是第3个p，因为它是第4个子元素
总结:E:nth-child(n)会选择父元素的第n个子元素E，如果第n个子元素不是E，则是无效选择符，但n会递增。
假设不确定第1个子元素是否为E，但是又想命中第1个E，应该这样写：
p:first-of-type{color:#f00;}
或者这样写：
p:nth-of-type(1){color:#f00;}
E:nth-last-child(n):匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
该选择符允许使用一个乘法因子(n)来作为换算方式，比如我们想选中倒数第一个子元素E，那么选择符可以写成：E:nth-last-child(1)
其余与上面相反
E:first-of-type：匹配同类型中的第一个同级兄弟元素E。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body
该选择符总是能命中父元素的第1个为E的子元素，不论第1个子元素是否为E
E:last-of-type：匹配同类型中的最后一个同级兄弟元素E。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body
该选择符总是能命中父元素的倒数第1个为E的子元素，不论倒数第1个子元素是否为E
E:only-of-type：匹配同类型中的唯一的一个同级兄弟元素E。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body
该选择符总是能命中父元素的唯一同类型子元素E，不论该元素的位置
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>only-of-type</title> <meta name=charset="urf-8" /> <style> p:only-of-type { color: #f00; } </style> </head> <body> <div class="test"> <p>结构性伪类选择符 E:only-of-type</p> </div> </body> </html>
E:nth-of-type(n):匹配同类型中的第n个同级兄弟元素E。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body
该选择符总是能命中父元素的第n个为E的子元素，不论第n个子元素是否为E
E:empty:匹配没有任何子元素（包括text节点）的元素E。
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>结构性伪类选择符 E:empty_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
p:empty {
height: 25px;
border: 1px solid #ddd;
background: #eee;
}
</style>
</head>
<body>
<div class="test">
<p>结构性伪类选择符 E:empty</p>
<p><!--我是一个空节点p，请注意我与其它非空节点p的外观有什么不一样--></p>
<p>结构性伪类选择符 E:empty</p>
</div>
</body>
</html>
E:checked:匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>用户界面(UI)元素状态伪类选择符 E:checked_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /> <style> input:checked + span { background: #f00; } input:checked + span:after { content: " 我被选中了"; } </style> </head> <body> <form method="post" action="#"> <fieldset> <legend>选中下面的项试试</legend> <ul> <li><label><input type="radio" name="colour-group" value="0" /><span>蓝色</span></label></li> <li><label><input type="radio" name="colour-group" value="1" /><span>红色</span></label></li> <li><label><input type="radio" name="colour-group" value="2" /><span>黑色</span></label></li> </ul> </fieldset> <fieldset> <legend>选中下面的项试试</legend> <ul> <li><label><input type="checkbox" name="colour-group2" value="0" /><span>蓝色</span></label></li> <li><label><input type="checkbox" name="colour-group2" value="1" /><span>红色</span></label></li> <li><label><input type="checkbox" name="colour-group2" value="2" /><span>黑色</span></label></li> </ul> </fieldset> </form> </body> </html>
E:enabled:匹配用户界面上处于可用状态的元素E。
E:disabled:匹配用户界面上处于禁用状态的元素E。
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>用户界面(UI)元素状态伪类选择符 E:enabled_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /> <style> li { padding: 3px; } input[type="text"]:enabled { border: 1px solid #090; background: #fff; color: #000; } input[type="text"]:disabled { border: 1px solid #ccc; background: #eee; color: #ccc; } </style> </head> <body> <form method="post" action="#"> <fieldset> <legend>E:enabled与E:disabled</legend> <ul> <li><input type="text" value="可用状态" /></li> <li><input type="text" value="可用状态" /></li> <li><input type="text" value="禁用状态" disabled="disabled" /></li> <li><input type="text" value="禁用状态" disabled="disabled" /></li> </ul> </fieldset> </form> </body> </html>
E:target:匹配相关URL指向的E元素。
Q3:
特殊性:
a)、同类型，同级别的样式后者先于前者
b)、ID > 类样式 > 标签 > *
c)、内联>ID选择器>伪类>属性选择器>类选择器>标签选择器>通用选择器(*)>继承的样式
d)、具体 > 泛化的，特殊性即css优先级
e)、近的 > 远的 (内嵌样式 > 内部样式表 > 外联样式表)
内嵌样式：内嵌在元素中，<span style="color:red">span</span>
内部样式表：在页面中的样式，写在<style></style>中的样式
外联样式表：单独存在一个css文件中，通过link引入或import导入的样式
f)、!important 权重最高，比 inline style 还要高
计算特殊性值：
内嵌>ID>类|属性|伪类>标签
1.如果样式是行内样式（通过Style=“”定义），那么a=1,0,0,0
2.b为ID选择器的总数 0,1,0,0
3.c为属性选择器，伪类选择器和class类选择器的数量。0,0,1,0
4.d为标签、伪元素选择器的数量 0,0,0,1
5.!important 权重最高，比 inline style 还要高(就好比它为11000)
举个例子:
html body:0002 html body #a:0102 html body div#a:0103 html .a:0011
Q4:刻度
刻度非常强大，被称为是适应布局的神器
在CSS中刻度是用于设置元素尺寸的单位。
特殊值0可以省略单位。例如：margin:0px可以写成margin:0
一些属性可能允许有负长度值，或者有一定的范围限制。如果不支持负长度值，那应该变换到能够被支持的最近的一个长度值。
长度单位包括包括：相对单位和绝对单位。
相对长度单位包括有： em, ex, ch, rem, vw, vh, vmax, vmin
绝对长度单位包括有： cm, mm, q, in, pt, pc, px
em:
相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(相对父元素的字体大小倍数)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>em与rem</title>
<style type="text/css">
#div2{
background: blue;
height: 5em;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
Hello em
</div>
</div>
</body>
</html>
如上：父元素未设置，所以它相对的是默认大小，div2的大小为80px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>em与rem</title>
<style type="text/css">
#div1 {
font-size: 20px;
}
#div2 {
color: white;
background: blue;
height: 5em;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
Hello em
</div>
</div>
</body>
</html>
如上：设置了父元素的大小，所以div2是相对于父元素，最后div2结果为100px
rem
rem是CSS3新增的一个相对单位（root em，根em），相对于根元素(即html元素)font-size计算值的倍数
只相对于根元素的大小
rem（font size of the root
element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of
the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。（相对是的HTML元素的字体大，默认16px）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>em与rem</title>
<style type="text/css">
#div1 {
font-size: 20px;
}
#div2 {
color: white;
background: blue;
height: 5rem;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
Hello em
</div>
</div>
</body>
</html>
如上所示，只设置了父元素，根元素并没有发生变化，因此div2的结果为5*16=80px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>em与rem</title>
<style type="text/css">
html {
font-size: 10px;
}
body {
font-size: 16px;
}
#div1 {
font-size: 20px;
}
#div2 {
color: white;
background: blue;
height: 5rem;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
Hello em
</div>
</div>
</body>
</html>
如上：设置了根元素（html）大小为10px,本应该div2的大小为5*10=50px,但结果并不是，是因为谷歌限制了最小的大小为12px，所以结果为5*12=60px
为了实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值设置font-size的值实现当屏幕分辨率变化时让元素也变化，以前的tmall就使用这种办法，示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rem phone test</title>
<!--
描述：视口
-->
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
html {
height: 100%;
width: 100%;
font-family: 'Heiti SC', 'Microsoft YaHei';
font-size: 20px;
overflow: hidden;
outline: 0;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
}
body {
height: 100%;
margin: 0;
overflow: hidden;
-webkit-user-select: none;
/*取消用户选择*/
width: 100%;
}
header,
footer {
width: 100%;
line-height: 1.5rem;
font-size: 1rem;
color: #000;
border: 1px solid #ccc;
text-align: center;
background-color: #ccc;
}
.bd {
margin-top: 1rem;
margin-bottom: .5rem;
margin-right: -.5rem;
font-size: 0;
}
.bd:after {
clear: both;
}
.box {
width: 5rem;
height: 5rem;
display: inline-block;
margin-right: .5rem;
margin-bottom: .5rem;
}
.blue-box {
background-color: #06c;
}
.org-box {
background-color: #1fc195;
}
</style>
</head>
<body>
<header>我是头部</header>
<div class="bd">
<div class="box blue-box"></div>
<div class="box org-box"></div>
<div class="box blue-box"></div>
<div class="box org-box"></div>
<div class="box blue-box"></div>
<div class="box org-box"></div>
<div class="box blue-box"></div>
<div class="box org-box"></div>
<div class="box blue-box"></div>
<div class="box org-box"></div>
<div class="box blue-box"></div>
<div class="box org-box"></div>
<div class="box blue-box"></div>
<div class="box org-box"></div>
<div class="box blue-box"></div>
<div class="box org-box"></div>
<div class="box blue-box"></div>
<div class="box org-box"></div>
<div class="box blue-box"></div>
<div class="box org-box"></div>
<div class="box blue-box"></div>
<div class="box org-box"></div>
<div class="box blue-box"></div>
<div class="box org-box"></div>
</div>
<footer>我是页脚</footer>
<script>
/*
;(function(win){
win.alert("Hello IIEF");
})(window);
*/
//定义一个方法并执行
(function(doc, win) {
//获得文档的根节点html
var docEl = doc.documentElement;
//如果window中存在orientationchange对象，则取orientationchange,否则取resize
//为了事件绑定
resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize';
//定义一个方法，重新计算font-size大小
var recalc = function() {
//页面的宽度
var clientWidth = docEl.clientWidth;
//如果没有宽度则退出
if (!clientWidth) return;
//重新计算font-size大小，假定320的宽度时字体大小为20;，当页面变化时重新设置字体大小
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
//如果浏览器不支持添加事件监听则结束
if (!doc.addEventListener) return;
//添加事件监听，指定事件处理函数的时期或阶段(boolean)true表示在捕获事件执行，false表示冒泡时执行
win.addEventListener(resizeEvt, recalc, false);
//当Dom树加载完成时执行计算，DOMContentLoaded事件要在window.onload之前执行
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
</body>
</html>
一个简单的实现代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
html{
font-size: 20px;
}
.div1{
border: 1px solid red;
width: 5rem;
height: 5rem;
background: red;
font-size: 1rem;
float: left;
margin-left: 1rem;
margin-top: 1rem;
}
</style>
<body>
<div class="div1">老张</div><div class="div1">老张</div>
<div class="div1">老张</div><div class="div1">老张</div>
<div class="div1">老张</div><div class="div1">老张</div>
<div class="div1">老张</div><div class="div1">老张</div>
<div class="div1">老张</div><div class="div1">老张</div>
<div class="div1">老张</div><div class="div1">老张</div>
<div class="div1">老张</div><div class="div1">老张</div>
<div class="div1">老张</div><div class="div1">老张</div>
<div class="div1">老张</div><div class="div1">老张</div>
<div class="div1">老张</div><div class="div1">老张</div>
<script>
//load页面所有资源加载完成
//JavaScript同步加载
//图片异步加载
/*window.addEventListener("resize",function(){
var w = document.documentElement.clientWidth;
document.documentElement.style.fontSize = (w * 20) / 500 + "px";
},false);*/
;(function(win){
var doc=win.document.documentElement;
var changfont=function(){
doc.style.fontSize=(doc.clientWidth*20)/500+"px";
};
window.addEventListener("resize",changfont,false);
})(window);
</script>
</body>
</html>
结果:
窗口变小，div大小也随之变化
