对于页面适配,应该使用px 还是rem
2018/8/5 15:52:11

css 中单位很多  %、px、em、rem,以及比较新的vw、vh等,每个单位都有特定的用途,而我呢,往往不知道什么时候该用什么,调重点总结一下

  • 使用px,结合Media Query进行阶梯式的适配;
  • 使用%,按百分比自适应布局;
  • 使用rem,结合html元素的font-size来根据屏幕宽度适配;
  • 使用vw、vh,直接根据视口宽高适配。

在这些大前提下,对小的细节做微调。比如使用px的时候,可能在小屏幕中,要对某个容器进行transform:scale(.8),适当缩小处理。使用rem的时候,需要固定页面的左右间距为10px等。

开发总结:

  1. 在世界稿要求固定尺寸的元素上使用px。比如1px线,4px的圆角边框。
  2. 在字号、(大多数)间距上使用rem。
  3. 慎用em。

%、vw、vh都是根据参考对象按比例适配

%是参考父容器,vw和vh是参考视口。

为什么慎用em?

em会叠加计算。


	
  1. //HTML
  2. <span>
  3. abc
  4. <span>defspan>
  5. abc
  6. span>
  7. //CSS
  8. span{font-size:1.5em;}

效果

em的计算原理,它是根据当前元素的字号按比例计算的。

外层span的字号是16px(浏览器默认值),1.5em之后是24px。由于字号是继承的,导致内部span 的字号继承过来是24px,再经过1.5em之后就成了36px。

所以,就算要用em的话,尽量不要用在继承属性(font-size)上,除非你真的清楚自己在做什么!

比如你想根据字号自动调整字符间距,可以这么做:


	
  1. .content{
  2. font-size:1rem;
  3. letter-spacing:.03em;
  4. }

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


	
  1. <div class="box box-1">A.第一段内容div>
  2. <div class="box box-2">B.第二段内容div>

	
  1. body{
  2. padding: 10px;
  3. background-color: #f6f0ee;
  4. }
  5. .box{
  6. padding: 10px;
  7. font-size: 16px;
  8. color: #fff;
  9. box-sizing: border-box;
  10. }
  11. .box-1{
  12. height: 100px;
  13. background-color: #1daedc;
  14. }
  15. .box-2{
  16. margin-top: 30px;
  17. height: 50px;
  18. background-color: #ddbe97;
  19. }

然后视觉开始提要求,大屏上要把字体放大、间距放大。

一个选择:确认要适配哪种屏幕,字号是多少,间距是多少。技术上再通过Media Query微调


	
  1. @media(min-width:414px){
  2. }

另一个选择:首先按rem作为字号,容器高度,外间距的单位。那么代码改为:


	
  1. html{
  2. font-size: 16px;
  3. }
  4. body{
  5. padding: 10px;
  6. background-color: #f6f0ee;
  7. }
  8. .box{
  9. padding: 10px;
  10. font-size: 1rem;
  11. color: #fff;
  12. box-sizing: border-box;
  13. }
  14. .box-1{
  15. height: 6.25rem;
  16. background-color: #1daedc;
  17. }
  18. .box-2{
  19. margin-top: 1.875rem;
  20. height: 3.125rem;
  21. background-color: #ddbe97;
  22. }

通过Media Query改变iPhone 6+ 的html 字号,其他元素的属性就会自动变化


	
  1. @media(min-width:414px){
  2. html{
  3. font-size:17.664px;
  4. }
  5. }

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为基准)


	
  1. @media only screen and (min-width: 320px) {
  2. html{
  3. font-size: 13.65px;
  4. }
  5. }
  6. @media only screen and (min-width: 360px) {
  7. html{
  8. font-size: 15.36px;
  9. }
  10. }
  11. @media only screen and (min-width: 375px) {
  12. html{
  13. font-size: 16px;
  14. }
  15. }
  16. @media only screen and (min-width: 390px) {
  17. html{
  18. font-size: 16.64px;
  19. }
  20. }
  21. @media only screen and (min-width: 414px) {
  22. html{
  23. font-size: 17.66px;
  24. }
  25. }
  26. @media only screen and (min-width: 640px) {
  27. html{
  28. font-size: 27.31px;
  29. }
  30. }

大家可能还会看到一些文章中建议把html字号设置成62.5%


	
  1. html{
  2. font-size:62.5%;
  3. }

因为刚提到浏览器默认的字号是16px,因此换算成百分比就是62.5% = 1 / 16

那为什么要用百分比呢?因为考虑到辅助功能和浏览器设置。对于部分用户,可能会在手机或浏览器的设置中增大手机字号,这意味着对方平时看字是很费力的,所以他要放大。那把html的字号设置成百分比就很贴心了,会随着手机设置改变页面的字号

但是呢,就算你看到用62.5%的情况,有些间距也是不合理的,都做的不太好,特别是把文案做到图片上,对字号根本不敏感,所以缩放一定要考虑到位

另外,针对本小节开头用16px 的情况,这里在提供一招

用Media Query的缺点是什么?它是分段函数,对于宽度在[320,360]区间内的屏幕,会适用同一套方案。最完美的应该是线性函数,用vw即可


	
  1. html{
  2. font-size:4.266667vw;
  3. }

用一行代码代替之前6个冗长的Media Query,还不错吧

如何提高rem的可读性

当你知道html的font-size怎么设置后,肯定想问,难道我每次写代码时,还得做个除法,把rem计算出来吗

如果用到CSS预处理,这事情就好办了,以LESS为例,两部操作如下


	
  1. // 1\.按iPhone 6的视觉稿,基准字号为16px,因此可以设置一个LESS变量。
  2. @px:16rem;
  3. //2\.通过LESS内置的除法自动运算。比如用到16px的字号时,写成16/@px即可,最后会计算成1rem
  4. .example{
  5. font-size:16/@px;
  6. margin:20/@px 0;
  7. padding:20/@px 10/@px;

关闭
用手机扫描二维码关闭