在web环境下,用户可以将浏览器窗口设置为任意大小,且CSS需要去适应它。
响应式 —— 在CSS中,这指的针对不同大小的浏览器窗口,用不同的方式响应更新页面的样式。我们要对不同尺寸的手机、平板电脑或桌面显示器多花心思了。
CSS支持一些绝对长度单位,其中最常见也最基本的是像素(px)。较不常见的绝对单位有毫米(mm,millimeter)、厘米(cm,centimeter)、英寸(in.,inch)、点(pt,point,印刷术语,长度为1/72 inch)以及pc(pica,印刷术语,长度为12 points)。
以上的长度单位都可以直接转换成另一个单位:
1 inch = 25.4 mm = 2.54 cm = 6 pc = 72 pt = 96 px。
CSS是通过迟邦定(late-binding)的方式把样式渲染到web页面上的:内容和它的样式会在各自的渲染完成之后再合并到一起。比起其他类型的图形设计,这给设计过程添加了它们没有的复杂程度,同时也赋予CSS更强大的能力 —— 一个样式表可供成百上千个页面使用。
em :
em是最常见的相对长度单位,这是排版中使用的一种度量方式,基准值是当前元素的字号大小。 在CSS中,1em表示当前元素的字号大小,实际值取决于在哪个元素上应用。
1) ,把各个方向的padding的值设置为字号大小
把padding赋值为1em,乘以字号,得到一个值为16px的padding渲染值。使用相对单位声明的值会由浏览器转化为一个绝对值,我们称之为计算值。
如果同一个元素的另一个选择器,用一个不一样的字号值去覆盖它,这会改变em在这个域下的基准值,那么padding的计算值也会相应变化。
在设置padding、height、width或border-radius等属性时,使用em可能会很方便,因为如果它们继承了不同的字号大小,或者用户更改了字体设置,这些属性会均匀地缩放。
2),对font-size使用em
在font-size上的em会先从继承到的字号大小衍生出来。
<body>
We love coffee <p class="slogan">We love coffee</p>
</body>
body {
font-size: 16px;
}
.slogan {
font-size: 1.2em;
padding: 1.2em;
background-color: #ccc;
}
slogan字号:19.2px slogan间距:23.04px
如果你已经知道以px为单位的基础字号大小,但希望把它改用em声明,下面有个简单的计算公式:
目标em值 = 目标像素值 / 父元素(被继承元素)像素值。
3),字号收缩问题
当你多层嵌套列表,而每一层声明的字号大小以em为单位,字号收缩现象就会发生
body {
font-size: 16px;
}
ul {
font-size: .8em;
}
<ul>
<li>Top level
<ul> 1
<li>Second level 1
<ul> 2
<li>Third level 2
<ul> 3
<li>Fourth level 3
<ul>
<li>Fifth level</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
每一个列表的字号大小是0.8乘以父元素的字号大小。这代表第一个列表的字号大小是12.8px,嵌套的子列表字号大小是10.24px(12.8px * 0.8),第三层列表的是8.192px,如此类推。同样地,如果你给字号大小的赋值大于1em,相反,文字的字号会一层层变大。
纠正:
ul {
font-size: .8em;
}
ul ul {
font-size: 1em;
}
嵌套在列表里面的列表,应该把字号大小设定为跟父元素一样
如果你不是一个比较小心的人,你应该远离em。使用em作为padding、margin和元素缩放效果的单位挺好的,但当em遇上font-size时,事情可以变得很复杂。