原文地址:https://mp.weixin.qq.com/s/MDlTs0MawX8iSM1IVpCkmg
css 中单位很多 %、px、em、rem,以及比较新的vw、vh等,每个单位都有特定的用途,而我呢,往往不知道什么时候该用什么,调重点总结一下
- 使用px,结合Media Query进行阶梯式的适配;
- 使用%,按百分比自适应布局;
- 使用rem,结合html元素的font-size来根据屏幕宽度适配;
- 使用vw、vh,直接根据视口宽高适配。
在这些大前提下,对小的细节做微调。比如使用px的时候,可能在小屏幕中,要对某个容器进行transform:scale(.8),适当缩小处理。使用rem的时候,需要固定页面的左右间距为10px等。
开发总结:
- 在世界稿要求固定尺寸的元素上使用px。比如1px线,4px的圆角边框。
- 在字号、(大多数)间距上使用rem。
- 慎用em。
%、vw、vh都是根据参考对象按比例适配
%是参考父容器,vw和vh是参考视口。
为什么慎用em?
em会叠加计算。
//HTML
<span>
abc
<span>def</span>
abc
</span>
//CSS
span{font-size:1.5em;}
效果
em的计算原理,它是根据当前元素的字号按比例计算的。
外层span的字号是16px(浏览器默认值),1.5em之后是24px。由于字号是继承的,导致内部span 的字号继承过来是24px,再经过1.5em之后就成了36px。
所以,就算要用em的话,尽量不要用在继承属性(font-size)上,除非你真的清楚自己在做什么!
比如你想根据字号自动调整字符间距,可以这么做:
.content{
font-size:1rem;
letter-spacing:.03em;
}
rem VS. px
px的性质决定了它只能用于固定尺寸。
除了固定尺寸用px,其他大部分情况都可以用rem
现在考虑一个实际的开发场景,一般来说都是先有视觉稿才能开发。两种情况:一、假设视觉稿iPhone 6和iPhone 6+,及其他尺寸各出了一份,那你就按照Media Query去适配。二、设计师只给你一种机型的视觉稿,以iPhone 6为例,750×1334,2倍屏下转换后是375×667。
第一种情况,通过Media Query断点适配
第二种,要根据宽度为375px的稿子,扩展到适配任意宽度的屏幕
视觉稿如下:
测量后主要参数如下:
- 页面间距10px
- 文字间距10px,字号16px
- A高度100px
- B高度50px,上间距30px
HTML结构和CSS
<div class="box box-1">A.第一段内容</div>
<div class="box box-2">B.第二段内容</div>
body{
padding: 10px;
background-color: #f6f0ee;
}
.box{
padding: 10px;
font-size: 16px;
color: #fff;
box-sizing: border-box;
}
.box-1{
height: 100px;
background-color: #1daedc;
}
.box-2{
margin-top: 30px;
height: 50px;
background-color: #ddbe97;
}
然后视觉开始提要求,大屏上要把字体放大、间距放大。
一个选择:确认要适配哪种屏幕,字号是多少,间距是多少。技术上再通过Media Query微调
@media(min-width:414px){
}
另一个选择:首先按rem作为字号,容器高度,外间距的单位。那么代码改为:
html{
font-size: 16px;
}
body{
padding: 10px;
background-color: #f6f0ee;
}
.box{
padding: 10px;
font-size: 1rem;
color: #fff;
box-sizing: border-box;
}
.box-1{
height: 6.25rem;
background-color: #1daedc;
}
.box-2{
margin-top: 1.875rem;
height: 3.125rem;
background-color: #ddbe97;
}
通过Media Query改变iPhone 6+ 的html 字号,其他元素的属性就会自动变化
@media(min-width:414px){
html{
font-size:17.664px;
}
}
17.664 = 414 * 16 / 375.
由此可以得到html的font-size计算公式为:font-size = deviceWidth * 16 /375;
前提是你的html有这条meta属性
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,user-scalable=no">
所以rem 有个明显的有点,它可以通过少量的代码解决大部分问题。
细节问题,用Media Query 微调
关于rem兼容性 PC端仅在IE9+支持。vw和vh一样,如果要考虑IE8兼容,那只能用px。移动端支持
html 的font-size该如何设置
由于(大部分)浏览器的默认字号为16px,所以一般来说把html的font-size归一化为16px是比较合适的实践方式。
常用的Media Query断点(以iPhone 6为基准)
@media only screen and (min-width: 320px) {
html{
font-size: 13.65px;
}
}
@media only screen and (min-width: 360px) {
html{
font-size: 15.36px;
}
}
@media only screen and (min-width: 375px) {
html{
font-size: 16px;
}
}
@media only screen and (min-width: 390px) {
html{
font-size: 16.64px;
}
}
@media only screen and (min-width: 414px) {
html{
font-size: 17.66px;
}
}
@media only screen and (min-width: 640px) {
html{
font-size: 27.31px;
}
}
大家可能还会看到一些文章中建议把html字号设置成62.5%
html{
font-size:62.5%;
}
因为刚提到浏览器默认的字号是16px,因此换算成百分比就是62.5% = 1 / 16
那为什么要用百分比呢?因为考虑到辅助功能和浏览器设置。对于部分用户,可能会在手机或浏览器的设置中增大手机字号,这意味着对方平时看字是很费力的,所以他要放大。那把html的字号设置成百分比就很贴心了,会随着手机设置改变页面的字号
但是呢,就算你看到用62.5%的情况,有些间距也是不合理的,都做的不太好,特别是把文案做到图片上,对字号根本不敏感,所以缩放一定要考虑到位
另外,针对本小节开头用16px 的情况,这里在提供一招
用Media Query的缺点是什么?它是分段函数,对于宽度在[320,360]区间内的屏幕,会适用同一套方案。最完美的应该是线性函数,用vw即可
html{
font-size:4.266667vw;
}
用一行代码代替之前6个冗长的Media Query,还不错吧
如何提高rem的可读性
当你知道html的font-size怎么设置后,肯定想问,难道我每次写代码时,还得做个除法,把rem计算出来吗
如果用到CSS预处理,这事情就好办了,以LESS为例,两部操作如下
// 1\.按iPhone 6的视觉稿,基准字号为16px,因此可以设置一个LESS变量。
@px:16rem;
//2\.通过LESS内置的除法自动运算。比如用到16px的字号时,写成16/@px即可,最后会计算成1rem
.example{
font-size:16/@px;
margin:20/@px 0;
padding:20/@px 10/@px;
}
小结
本文介绍了rem的适配方式,如何设置html的font-size,如何更快的书写rem 的值