Rem设计方案

一、设备的css像素是不同的

1. CSS像素（逻辑像素）

• 可通过浏览器F12控制台查看不同机型的css像素，比如iPhone6为375px，iPhone6Plus为414px
• CSS中使用的一个抽象的概念，单位是px
• 值是相对的，并不是绝对的

2.设备像素（物理像素）

• 屏幕的物理像素，任何设备屏幕的物理像素的数量都是固定不变的，单位是pt（点）
• 一般指的是手机的分辨率
• 1pt = 1/72英寸（inch）

3.像素比（DPR）

• 物理像素 = css像素 * DPR
  本质：一个css像素占用几个设备像素
  获取：window.devicePixelRatio
• iphone6
  750 × 1334 设备像素，屏幕分辨率
  375 × 667 css像素，浏览器中html的宽度就为375px
  2.0 像素比DPR

二、相对单位em和rem

1. em相对于父级

作为font-size的单位时，其代表父元素的字体大小，作为其他属性单位时，代表自身字体大小

问题：
1、chrom下有最小字体限制，必需为12px，所以这个值不能小于12
2、如果两个一样的元素，但是里面字体不一样，那就不能统一设置了。或者元素字体变化了，就又要统一设置一遍

2. rem相对于根元素html

CSS3新增的一个相对单位，是相对于根元素html字体大小

em和rem都是相对单位，不同点在于em是相对于父级的font-size。而rem是相对于根节点html的font-size

三、rem布局原理

iPhone6为例

通过浏览器F12查看控制台可以看到iPhone6的css像素为375px

暂时设置html的font-size为100px（正常开发时是动态设置html根节点的字体大小）
子元素的宽度全部用rem设置
那么所有子元素的css宽度 = 根节点字体大小 * 对应的rem
在上面的例子中

• header的宽度：375px = 100 * 3.75rem
• div的宽度：187.5 = 100 * 1.875rem

iPhone6的css像素为375px，此时header刚好占满屏幕，div为屏幕宽度的一半

iPhone6Plus为例

iPhone6Plus的css像素为414px
此时设置根节点html的字体大小为110.4px,子元素不作任何变化

• header的宽度：414px = 110.4 * 3.75rem
• div的宽度：207px = 110.4 * 1.875rem

此时可以意外的看到header仍然占满了屏幕宽度，div为屏幕宽度一半。
而我们却只是改变了html的字体大小就实现了这样的功能

子元素随着html成比例变化
rem的布局原理就是通过动态改变根节点的字体大小，来影响所有设置了rem单位的子元素的大小，来保证元素大小和屏幕大小是成比例式的同步变化

那么如何设置子元素为多少rem呢？

目前市面通常以iPhone6作为标准，设计稿尺寸一般为750px以便于计算

四.一稿设计多端适配优雅的解决方案 - rem

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200609213135526.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5ajExNTE4ODAzNTk=,size_16,color_FFFFFF,t_70

使用方法

ui设计师设计界面时建议以iphone6的两倍尺寸（750px）为设计标准尺寸，前端开发在开发页面先引用上述代码块，前端开发在选择标注时仍按照标准px来标注，为了计算方便js代码块中乘以100，在css中为实际尺寸只／100（rem）。