先说好处:无需借助js,只用css就可以实现一定屏宽范围内元素大小随屏幕宽度改变平稳变化。
再说用法:
第一步:元素大小单位选用rem。
第二步:根据设计稿的屏幕宽度设置html的font-size大小,且单位用vw。
第三步:通过media query设置html根font-size的最大最小px值。
以上就是把大象关冰箱的三个步...啊呸,是一定范围内适配任意屏幕宽度的三个步骤。
例:假设设计稿是1200px的屏幕,第一二步的效果将是:
1200px宽度的屏幕,html的font-size设为1vw,p标签设为1rem,则为12px实际大小;
1800px宽度的屏幕,html的font-size设为1vw,p标签设为1rem,则为18px实际大小;
但如果屏幕宽度是375px,p标签1rem的话,实际大小就只有3.75px了。虽然谷歌浏览器做了最小字号限制(12px)但我们还是希望能自己控制它的大小。于是就有了第三步:
@media screen and (max-width: 1200px) {
font-size: 12px;
}
再举个例子,假如设计稿是375的屏幕。我们将html的font-size设为12/3.75 = 3.2vw。
375px的屏幕下,p标签设为1rem,则实际大小为12px。
400的屏幕下p标签设为1rem,则实际大小为12.8px。
So,you see。没有借助js,我们就实现了字体大小平稳变化。
好了,上面把好处和结论都给出来了。下面要说原理了:
NO.1 啥是rem?
也不单说rem定义了,随便一搜就有,看完仿佛过眼云烟,转瞬即忘。还是来个css中各单位的对比吧,一看就明白,还顺便巩固了别的单位概念:
- em: 本身元素的font-size值的相对大小(2em就是2倍本元素font值大小)
- rem:根元素(html)的font-size值的相对大小
- vw:viewport(屏幕)宽度的1%
- vh:viewport(屏幕)高度的1%
- %:相对于父元素的大小
- px:实际像素值
为什么要用rem?
首先,为什么不用px很显然了,设完就是个定死的值,完全无法自适应。其次,为啥不用em?因为随着元素的嵌套,这个相对值将随时改变。使代码结构复杂难懂。Tada!那为什么用rem呢?就是因为1能自适应,是个相对值。2是因为其相对根元素的大小,参照物不变,可以贯穿于代码始终。
NO.2 啥是vw?
上边那个表已经说了:vw:viewport(屏幕)宽度的1%。加粗:屏幕宽度的1%!
这意味着,vw本身就带有自适应属性。所以,如果我们把html的font-size设为1vw,则它的实际像素值是随着屏幕大小改变而改变的。1200px的屏幕,1vw就是12px,375px的屏幕,1vw就是3.75。
vw+rem适配的方法绕过了js,直接使用css完成任意宽度适配,就是靠vw的这个特性。为什么要绕过js呢,因为还是css性能好啊!
我们说到1200px的屏幕,根font-size是1vw,那么当我们设置具体的元素大小时,此时使用根font-size相对大小的rem时,就使得具体的任意元素大小都随着根font-size,也就是1vw而改变了。
比如p标签的字体大小设为1rem,那就是1vw,那就是12px!
如果是1800px的屏幕,p标签字体大小设为1rem,那就是1vw,那就是18px了!
如此,随着屏幕的大小改变,元素大小都随之改变!
NO.3 还是要用媒体查询的!
虽然绕过了js,但还是绕不过媒体查询的,我们看到假如设计稿是1200px,那在一定范围内,字体和屏幕宽度成正比都还合理。但如果屏幕过大或过小。比如375px,此时你字体缩缩成了3.75px,肯定就不是我们所期望的了!
所以在给根字体font-size设为vw单位的同时,我们要控制其上下限。具体控制范围按实际情况而定。
举个例子:设计稿1500px时,最小字体低于12px就对人类不友好了,所以,当屏幕宽度低于1200的时候,就将根html的font-size定格在12px:
@media screen and (max-width: 1200px) {
font-size: 12px;
}
下限情况同理。
NO.4兼容
vw的兼容可能会差一点。查一下:
From: https://caniuse.com/#search=vw
也还行!
Summary!
样式嘛,能用css解决就不要用js。。。vw+rem实现了原来js才能实现的效果,感觉通体舒畅,开心极了!与君共享!Hooray!