移动端页面使用rem来做适配

Posted 2020-10-07 小小小尾巴

移动端页面使用rem来做适配

rem介绍

rem（font size of the root element）是指相对于根元素（即html元素）的字体大小的单位。
假设根元素的字体大小是10px, 则5rem的大小为 5*10=50px,例如

1 html{
2 font-size: 10px;
3 }
4 width: 2rem; /* 2*10 = 20px;*/
5 margin: 1rem;
6 }
7 img{
8 width:.6rem;
9 ｝

 

rem来做适配

以前我们往往这样做页面：viewport width 设置为 device-width，然后选我们需要兼容设备的最小宽度（一般是320px）。根据这最小宽度来做页面。单位使用px和百分比。在宽度不同的设备上，页面的字体大小，内容尺寸都是一样的，不同的是，大屏的内容间的空隙比小屏的大。所以这样做的缺点就是，页面在某些尺寸的设备上显示的效果不好。

如果用rem来页面，我们会根据不同的设备宽度在根元素上设置不同的字体大小。宽度越宽，字体越大。然后对原本使用px的地方使用rem来替换。这样，字体大小，内容尺寸，对随着屏幕宽度的变大而变大。

具体做法

1 根据不同的设备宽度在根元素上设置不同的字体大小。
为了能将设计稿中的 px 方便的转换为页面中 rem，我设置 1rem 为 宽度为 640px 的设计稿中的 100px。

2 做页面时
将设计稿的宽度缩放至 640px。在上一步中，1rem 为此时设计稿中 100px 的值。屏幕的宽度也就是 (640 / 100) = 6.4rem）

 

 

时刻鼓励自己：

 

       埋头读书，抬头做人!

 

　　不登高山不知天之高也，不临深溪不知地之厚也

 

　　懦弱的人只会裹足不前，莽撞的人只能引为烧身，只有真正勇敢的人才能所向披靡

 

　　我们这个世界，从不会给一个伤心的落伍者颁发奖牌。

 

　　海浪的品格,就是无数次被礁石击碎又无数闪地扑向礁石、

 

　　鞋底磨穿了，不等于路走到了头。

 

　　松驰的琴弦，永远奏不出时代的强音。

 

　　躺在被窝里的人，并不感到太阳的温暖。

 

　　不安于现状，不甘于平庸，就可能在勇于进取的奋斗中奏响人生壮美的乐间。

 

　　不去耕耘，不去播种，再肥的沃土也长不出庄稼，不去奋斗，不去创造，再美的青春也结不出硕果。

　　(小小小尾巴/原创）