移动端（三）—— rem适配和flex适配

来源：互联网发布：策略模式 java示例编辑：程序博客网时间：2024/06/01 09:24

之前说过百分比适配、比例缩放适配和viewport适配，但是，现在的主流适配方案是rem适配，它很强大。

4、rem适配

首先说说常用像素单位：
常用像素单位

1. px

绝对单位，给多少就是多少，
问题：不管屏幕尺寸怎么变化，它都不会变。做不到适配

2.em

相对单位，相对于自身字体大小的值
font-size:12px 1em=12px
问题：
1. chrom下有最小字体限制，必需为12px，所以这个值不能小于12
2. 如果两个一样的元素，但是里面字体不一样，那就不能统一设置了。或者元素字体变化了，就又要统一设置一遍

3. rem

CSS3新增的一个相对单位，相对于根节点(html)字体大小的值
r就是root
html{font-size:10px} 则2rem=20px
通过它就可以做到只修改根元素的大小，就能成比例地调整所有的字体大小，只依赖html字体的大小

另外还有vw和vh这里不做过多介绍。可以自己搜索资料或者查看张鑫旭老师的博客。

那么，怎么去适配呢？

方案步骤：
1、首先动态计算html的font-size
2、将所有的px换算成rem(计算过程请看下面代码和注释（注意：rem的换算是根据设计图稿的像素计算的，下面的计算只是动态计算html的font-size大小），请看下面的注意事项

<meta name="viewport" content="width=device-width,user-scalable=no"/><style>    body{        margin: 0;    }    div{        /*width: 80px;*/        height: 100px;        width: 4rem;        height: 4rem;        /*1rem=20;  nrem=80;    n=80/rem;   n=80/20;    n=4*/        background: green;        float: left;    }<style><body>    <div>1</div>    <div>2</div>    <div>3</div>    <div>4</div></body><script>    (function(){        var html=document.documentElement;        var width=html.getBoundingClientRect().width;  //获取屏幕宽度（设备独立像素），如iPhone6 为414        html.style.fontSize=width/16+'px'; //html font-size = 20px        //iphone5下    1rem=20   这里之所以除以16，是因为要把宽度分成16份，这个数字并没有固定，一般选15，16，以ipone5为准是16，因为一除可以得到整数20，好计算。      })();</script>

注意：

1、必需动态的去设置html的大小，才能适配
2、根据页面(注意：是psd图，也就是真实大小大)的宽度除以一个系数，把算出的这个值赋给html的font-size属性，rem换算值是根据psd设计图的宽度/系数的rem系数。
1、为什么要除一个数字，原因是：一个页面里，不可能全都是整屏的元素，肯定有一行中放多个元素。所以就把一行分成n份
2、不除一个数字的话，那1个rem就是屏幕的宽度，这个值太大，如果一个元素的宽度比它小的话，就不方便计算
3、这个系数，自己定。多少都可以，但是建议给一个能整除的值（这个能整除的数，是还要根据设计稿能整除的数。）

3、对于切的图片，尺寸是根据设计图的尺寸宽度的，显示起来会很大，如果是Img标签，可以设置宽度为切出的图片尺寸，换算成rem，如果是background-img，用background-size属性，设置设计图尺寸宽高，换算成rem进行图片的缩放适配。

对于上述的第二点，根据设计稿动态转换rem，这里说一下，前面的计算是动态的设置html的font-size的大小，这是根据设备的独立像素计算的。而设计稿往往是根据物理像素，即设备像素设计的，往往很大，是750px及以上，所以在转换rem的时候，转换是根据psd设计稿的像素进行转换，即1rem = 设计稿像素宽度/系数，例如，如果是1080px的设计稿，那么，就用1rem = 1080/18 = 60px（这里用18做系数，是因为能整除），然后布局的时候就根据设计稿的元素尺寸转换，例如设计稿一个元素的高为60px，那么就可以转化为1rem了。

特点：
1、所有有单位的属性会根据屏幕的尺寸自动计算大小
2、同样一个元素，在不同的设备下的大小是不一样的。在尺寸小的设备下显示的小，在尺寸大的设备下显示的大
3、一般以iphone6为基准，以它的宽度750除上一个系数，再去算rem

Tips：上述步骤2中换算可以通过Hbuilder将px自动转rem以及通过less自动计算成rem，sublime也可以通过插件进行自动转换，这里不详细说明，可以百度搜索

打开Hbuilder，顶部栏的工具》选项》Hbuilder》代码助手》px自动转rem设置。
less自动转换：Hbuilder也可以将less文件自动转成css文件。less文件的书写如下所示

比如想设置宽度为187px，高度为100px的元素，可以通过下面方式计算适配@rem：25rem； /*这是1rem = X px的X的值，但是用了rem做单位而已*/div{    width: 187/@rem;    height: 100/@rem;}

5. 弹性布局适配(会配合rem适配使用 )

flex布局（弹性布局）

兼容情况

IE10及以上、ios9及以上、android4.4及以上版本支持

特点

默认所有子元素都会在一行中显示，即使给子元素一个很大的宽度
父级加了这条属性，子级的float、vertical-align就会失效
如果兼容低版本的机型要加前缀-webkit-，包括后面讲的所有属性

容器属性（父元素样式）具体看菜鸟教程或阮一峰的教程，这里说一下一些重点知识。

flex-direction：子元素排列方向（主轴的方向，如果设置了column，则意味着主轴旋转了90度）
flex-wrap：换行方式
flex-flow：以上两种方式的简写
justify-content：水平对齐方式（子元素在主轴上的对齐方式）
align-items：垂直对齐方式（子元素在交叉轴上的对齐方式）
align-content：多行垂直对齐方式（多根轴线的对齐方式）

项目属性（子元素样式）

order：排列位置 //如果有两个的值是相等，按书写顺序排列
flex-grow：扩展比例
flex-grow 当父级的宽度大于所有子元素宽度之和时，根据父级的剩余空间，设置子元素的扩展比例（设置后，元素给的固定宽度会被覆盖）它是一个系数
默认为0，即如果存在剩余空间，也不扩展
剩余空间
剩余空间=父级的宽度-所有子元素的宽度和
注意：如果没有设置初始宽度，也没有内容，则默认为0，否则为内容的宽度。例如设置了文字，会撑开有初始宽度。
```
        子元素宽度计算公式            子元素的宽度=（父级的宽度-所有子元素的宽度和）/所有子元素的flex-grow属性值之和*子元素的flex-grow属性值+子元素初始宽度
```

flex-shrink：收缩比例
flex-shrink 当所有子元素宽度之和大于父级宽度的时候，根据超出的空间，设置子元素的收缩比例（设置后，元素给的固定宽度会被覆盖）它是一个系数
默认为1，如果给个0的话，就不会收缩
超出空间
超出空间=所有子元素的宽度和-父级的宽度

        子元素宽度计算公式            1、算出超出空间，所有子元素的宽度和-父级的宽度            2、子元素的初始宽度*子元素的flex-shrink值            3、算出第二步所有结果的和            4、每个子元素的第二步/第三步*第一步            5、子元素的初始宽度-第四步