移动端rem自适应实操讲解

最新推荐文章于 2024-05-05 18:17:26 发布

webzenghao

最新推荐文章于 2024-05-05 18:17:26 发布

阅读量1.8k

点赞数

文章标签：前端适配器模式 html

原文链接：https://mp.weixin.qq.com/s/8S1WVGRRiNsdcvCIZKzslg

版权

很多小伙伴应该都知道在做PC端页面的时候，如果想做响应式那多半会选择bootstrap或者自己手写媒体查询。但是当产品经理过来跟你说，今天要做一个移动端的项目，你或许就会有点懵，之前做得那么多项目都是PC端的套路啊，移动端应该怎么做呢？做移动端还能用bootstrap吗？虽然知道可以用rem或者百分比，但是还是有点不知道怎么下手。

随着科技的发展，手机型号越来越多，而手机屏幕不仅大而且尺寸不同，想做到页面自适应是一件很头疼的事情。如果把页面的宽度都定死，在iphone 5上可能看着整好，但是现在已经出到iphone X了，屏幕那么大，页面中的内容还是那么的小。目前做移动端自适应大概分为三种，最流行的是rem，其次是百分比跟viewport。

rem自适应

在学习CSS的时候应该都听过rem跟em都是尺寸单位，就跟px一样，其中rem是相对于根元素的字体大小，em是相对于元素的字体大小。如果用rem来页面，我们会根据不同的设备宽度在根元素上设置不同的字体大小。宽度越宽，字体越大。然后对原本使用px的地方使用rem来替换。这样，字体大小，图片尺寸，对随着屏幕宽度的变大而变大。

在这里我推荐使用的是阿里团队开源的Flexible.js，我会在文章最后放上下载地址。Flexible可以算上是无限自适应，可以兼容各种移动端设备屏幕，而且还能解决移动端border: 1px的问题。Flexible的大概思路是根据屏幕的宽度除以10来设置rem，然后再根据图片的宽度来计算出rem的倍数关系。这里之所以除以10也是因为好计算。

一般UI给你的图都会相对的比较大，尺寸可能会上千，但是咱们在做的时候第一步就是把设计稿在PS中把分辨率缩小成540px或者640px。因为当时的主流是iPhone5及iPhone5s，物理像素宽度为 640，分辨率为320。其他安卓机型可以根据这些尺寸做简单粗暴的匹配。这样的话，在540px的屏幕下，通过Flexible计算的出的结果就是1rem = 54px。如果你想插入一个大小为200*200的div，那么就需要先200/54≈3.7rem，算出倍数关系。也就是在540px的屏幕下1rem是54px，200px的div需要3.7个54px。所以这个div的css就应该是width:3.7rem;height:3.7rem。

具体步骤

第一步：引入flexible.js

注意一定要在<head>头部引用js文

在这里插入图片描述
此时打开chrome调试，会看到<html>的font-size已经是54px了，也就是屏幕宽度540除以10的结果。

第二步：分别创建三个div，红色div为5454，蓝色div为200200，绿色div为540*540

<div id="red" style="width: 1rem;height: 1rem;background: red;"></div>
<div id="blue" style="width: 3.7rem;height: 3.7rem;background: blue;"></div>
<div id="green" style="width: 10rem;height: 10rem;background: green;"></div>

在540屏幕下，rem为1rem=54px，所以红色div为54/54=1rem; 蓝色div为200/54≈3.7rem; 绿色div为540/54=10rem;

在屏幕540px的时候你会看得三个div依次是54px54px；199.8199.8px；540px540px；因为蓝色div是约等于的，所以可能会一些小误差。

在320px屏幕下，<html>下的font-size会自动改成32px，所以1rem也会跟着改变，1rem=32px；这时上面设置的三个div的宽度和高度依然是上面设置的那样，但是除以rem的这个基数发生改变，则宽度和高度也发生了相应的改变。

**由于rem改变，所以div也会跟着屏幕的宽度变小，三个div分别为3232；118.39118.39；320320。**
是不是觉得rem特别的神奇，有了rem任何屏幕都可以适配了。