‘壹’ pc端web、移动端web的字体大小、颜色、字体样式使用
首先了解下px，em，rem的区别
px（像素）是绝对单位，页面按精确像素展示，使页面较稳定和相对固定一些。但这种方法存在一个问题，用户在浏览我们制作的web页面时，如果他改变了浏览器的字体大小，或是昌亮缩放、放大页面，这时会使页面布局被打乱。
em是相对单位，基准点为父节点字体的大小。上面说到使用px为单位的web页面会遇到的问题可以使用em来解决。
例如con2的父元素为con1，css中<耐陵宽strong>con1</strong>和<strong>con2</strong>的font-size都设置为2em；
可以看得出con1和con2的font-size样式都是2em，但是展现出来的字体大小不一样,因为默认情况下没有对字体进行重新设置的话，浏览器默认字体为16px，con1的2em就相当于32px，那么con2的2em就相当于con1的两倍也就是64px，所以con2字体比con1的大。
rem是相对于页面根元素的大小单位，我们只需给页面的根元素设置一个参考值，就可以在页面中根据参考值设置其他元素的大小，rem不会出现嵌套的繁琐。
设置html下1rem=10px
可以看得出1rem就是12px（汪敏浏览器下最小的字体为12px，当设置小于12px的字体，也默认为12px）
无论元素处于哪一层，都不会受到父元素的影响。
‘贰’ 移动端页面单位的选择（px, em, rem, vw）
px: 绝对字体大小
em: 基于一个基数来计算出相对字体大小。(移动端用的少)
rem: 基于根节点（html）的字体大小来计算。
vw: 可视区宽度单位。1vw等于可视区宽度的旅春正百分之一。
跟字体大小有关
l浏览器默认字体是16px,这里父级字体大小是20px,所以#box里的1em = 20px;即#box是一个长宽均为400px的正方形
vw单位和百分比很相似，不同的是vw的值对所有的元素都一样， 与他们父元素或父元素的宽度无关
以414宽度的屏幕为例
做一个200 * 200的盒子
rem 的字体大小直接与html的字体大小有关。默认是16px = 1rem;
我们可以给html设置10px的字体森橡大小
大多数浏览器（不包括ie8以下）都支持rem单位，如果想都支持，可以
可是这样在拆悔实际开发中，换算起来非常麻烦，所以，我们对此进行了修改，根据手机屏幕的大小，做了自适应。
首先，我们在html的head里边设置html的font-size.
然后根据设计图的尺寸和手机屏幕的尺寸进行换算。
‘叁’ 移动端rem自适应布局-最简单易懂的两种方法
em 是个相对单位，等于该元素或父元素的font-size值；
rem: root 1rem等于根元素的font-size值
Vw（宽）、vh： 把屏幕分为100份，1vw等于屏幕的1%
1、给文件根元素设置font-size值（会影响字体，但可以解决）
<script>
//以iphone6为例，尺寸375，此时font-size=100px。便于计算
var fonsiz=document.documentElement.clientWidth/3.75;
document.documentElement.style.fontSize=fonsiz+"px";
</script>
2、给html设置rem布局后，需要给body重新设font-size，不然很难处理正常的尺寸
body {
碧陪巧 font-size: 16px;
}
3、vscode 安装 px to rem 插件，设置其扩展设置的值为100
4、选中需要把px改为rem单位的css样式，alt+z更换为rem布局
1、安装px to rem插件设置100px转换，如上图3，100px=26.667vw=100/3.75，给html标签设置vw
html {
font-size: 26.66667vw;
}
2、选中悔键需要把px改为rem单乱散位的css样式，alt+z更换为rem布局
‘肆’ 移动端布局适配（px,em,rem,vh,vw)
px就是pixel像素的缩写，相对长度单位，网页简耐枝设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言的
em是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size）
如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸
特点：
1. em的值并不是固定的；
2. em会继承父级元素的字体大小
rem是CSS3新增的一个相对单位，rem是相对于HTML根元素的字体大小（font-size）来计算的长度单位
如果你没有设置html的字体大小，就会以浏览器默认字体大小，一般是16px
html{font-size: 62.5%} /* 10 ÷ 16 × 100% = 62.5% */
body{font-size: 1.4rem;} /* 1.4 × 10px = 14px */
/ 在根元素中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准 ） /
优点是，只需要设置根目录的大小就可以把整个页面的成比例的调好
rem兼容性：除了IE8及更早版本外，所有浏览器均已支持rem
em与rem的区别：
rem是相对于根元素（html）的字体大小，而em是相对于其父元素的字体大小
两者使用规则：
*
如果这个属性根据它的font-size进行测量，则使用em
*
其他的一切事物属性均使用rem
vw、vh、vmax、vmin这四个单位都是基于视口
vw是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100
假如浏览器的宽度为200px，那么1vw就等于2px（200px/100）
vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100
假如浏览器的高度为500px，那么1vh就等于5px（500px/100）
vmin和vmax是相对于视口的高度和宽度两者之间的最小值或最大值
/*
如果浏览器的高为300px、宽为500px，那么1vmin就是3px，1vmax就是5px；如果浏览器的高为800px，宽为1080px，那么1vmin也是8px，1vmax也是10.8px
*/
其他单位：
%（百分比）
一般来说就是相对于父拦敏元素
1、对于普通定位元素就是我们理解的父元素
2、对于position: absolute;的元素是相对于已定位的父元素
3、对于position: fixed;的元素是相对于ViewPort（可视窗口）
css3新单位，相对于视口的宽度或高度中较小的那个
其中最小的那个被均分为100单位的vm
比如：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px
缺点：兼容性差
1、假如使用em来设置文字大小要注意什么？
注意父元素的字体大小，因为em是根据父元素的大小来设置的。
比如同样是1.5em，要是父元素是20，那1.5em就是30px.要是父元素是30px,1.5em就是45px（特别是在多重div嵌套里面更要注意）
2、pc pt ch一般用在什么场景？
这些我们网页设计基本上用亩配不到，在排版上会有用处
3、如何使 1rem=10px
在设置HTML{font-size：62.5%；}即可
4、如果父元素没有指定高度，那么子元素的百分比的高度是多少？
会按照子元素的实际高度，设置百分比则没有效果
‘伍’ 移动端web开发 rem要怎么用
1、rem介绍
rem（font size of the root element）是指相对于根元素（即html元素）的字体大小的单位。
假设根元素的字体大小是10px, 则5rem的大小为5*10=50px,例如
‘陆’ 移动端适配-px转成rem
rem单位是相对于根节点的字体大小的，所以通过设置根节点的字体大小可以动态的改变rem的大小
rem方案的原理其实就是，将每一个不同的屏幕划分成相同的份数，让同一个元素在不同的屏幕上占据相同比例的空间。1rem等于此页面html的font-size，rem可以理解为每份是多少px
比如，设计稿宽度为375px，将页面划分成10份，那么1rem=37.5px，如果有一个div宽度为37.5px，换算成rem为1rem。将375px宽的屏幕划分为10份，这个div宽度占一份。
即 document.body.clientWidth / 10
同理，如果我们想让1rem=10px，那么document.body.clientWidth / 37.5即可
npm install amfe-flexible
import 'amfe-flexible'
此时默宴笑认，1rem = 16px，可稿斗以看到键祥磨Elements中 <html lang="en" style="font-size: 16px;">
在现在的htmlUI设计图中，右上角可选择切换单位，切换到 CSS Rem 16px，即可得到对应的rem标注，不需要手动换算
（若想更改rem和px的换算比例，参考第三步）
此时 1rem = 10px，可以看到Elements中 <html lang="en" style="font-size: 10px;">
‘柒’ 移动端布局vw和vh、em与rem
盒模型是由padding、margin、width、height 这几个属性构成的。一个元素在网页中占据的真正空间大小就是盒模型的大小，而非简单的宽高值。
padding 和 margin 在设置百分比时，纵向的值并不是按照父级的 height 来计算的 ，而是按照宽度。
margin 四个方向的百分冲梁比均是按照父元素的宽度（640px）进行计算的，也就是说，每个p标签的宽度为 116px（18%），高度就是220px（83%），如此计算，一个p元素盒模型的大小为 128px*308px。
CSS 的基本模型着重于 排版 的需求，因此水平和垂直方向上的排版并不是同等权重的。当文字排列方向为横向排列时，就采用水平方向上的排版模式。排版默认是水平宽度一定，垂直方向上可以无限延展。当文字排列方向为纵向时，就采用垂直方向上的排版模式，也就是高度一定，水平方向上无限拓展。
使用百分比设置内外边距时，文字书写方向就决定了 margin、padding 是按照 height 还是 width 来计算。
宽度和高度，设置百分比时，就是按照对应父盒子的宽高（不是总宽总高，换句话说，不包含内外边距）来计算的。
行高设置百分比时，是针对当前元素的字体尺寸来进行计算的。比如，当前元素默认字体大小为 16px，那设置行高 line-height: 100% ，也就是 line-height: 16px; ，也等同于 line-height: 1 。
vw、vh、em、rem，这些单位都是在CSS3中新增的相对度量单位。但是在移动端开发中，应该选取哪个单位作为主力开发？
em ：em 是相对于当前对象内文本的字体大小进行设置的。如果当前对象内文本字体尺寸为被 人为设置 ，则相对于人为设置的值。换句话说，如果当前div字体大小为12px，那 1em=12px。由于每一级都需要进行单独的计算，所以很不适合用来做移动端的相对度量单位；
rem ：这个单位，在刚出来不久，就让每个开发人员都眼前一亮。虽然 rem 也是和字体相关的相对度量单位，但是，它比em更加简单方便。首先，rem 是按照根元素字体的大小进行设置的，所以只要在根元素设置字体大小，不管在哪一个元素使洞碧用rem，都是不会受到其他影响的。
有了 rem 这个特性，它纳判举就能与 JS 配合，很好地解决了移动端的各种像素大小问题。首先通过JS获取设备宽度，然后根据设备宽度来调整HTML这个元素的文字大小。
由于新增的初期，vw 的兼容性是非常不容乐观的，各大主流浏览器都阵亡的前提下，rem + JS 独占了移动端端一个主流布局方式。
vw、vh 是针对移动设备，如果视窗的大小发生改变，这两个值也会跟着发生相应的变化。所以在使用情况上来看，vw 比 rem 更加的智能。由于现在的主流浏览器对vw的兼容性是非常成熟的，所以现在移动端布局主要考虑 vw。
开设设计稿的宽度是 350px，设计稿中一个盒子的大小为 100px * 100px，那如果想将100px转换成vw单位，首先要知道在设计稿中，1vw 代表的像素是多少，比如这里设计稿是350px，那1vw = 350 / 100 = 3.5px，那盒子大小为100px，换算成vw就是 100 / 3.5 = 28.57vw。
具体换算可以按照下面的公式
750px下测量的宽度 / 750 * 100)
‘捌’ 如何利用rem在移动端不同设备上让字体自适应大小
1
2
html{font-size：62.5%}
body{font-size：1.2rem}
对于上面的代码了解过rem的人基本也知道什么意思，这样的结果就是1.2rem=12px，但是在项目中使用rem作为字体单位时并没有什么卵用，万能的网络教会了乱塌衫rem这个单位，却并没有教会我如何使用他，好吧自己摸索吧，然后就有了下面这个js代码
(function (doc, win) {
// html
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
clientWidth = (clientWidth > 768 ) ? 768 : clientWidth ; docEl.style.fontSize = 10 * (clientWidth / 375 ) + 'px';
};
if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false);
recalc();
})(document, window);
/*移动端适应大小*/
使用时建议单独建一个js包，要用直接引用就行，引入上面 的js代码哗腔后，字体和高度使用rem作为单衫亏位，宽带设为百分比，项目在不同的移动端设备就会自动适应屏幕啦
‘玖’ Vant移动端rem适配方案
1、Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具 ：
[ lib-flexible 用于设置 rem 基准值，设置根字体的大小
postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
2、使用 lib-flexible 动态设置 REM 基准值
html 标签的字体大小
2.1 安装
// yarn add amfe-flexible
cnpmiamfe-flexible-S
2.2 然后在 main.js 中加载执行该模块
import 'amfe-flexible'
2.3 最后测试：在浏览器中切换不同的手机设备尺寸，观察 html 标签 font-size 的变化
. 例如在 iPhone 6/7/8 设备下，html 标签字体大薯档猜小为 37.5 px
. 例如在 iPhone 6/7/8 Plus 设备下，html 标签字体大小为 41.4 px
3、使用 postcss-pxtorem 将 px 转为 rem
3.1 安装
// yarn add -D postcss-pxtorem
// -D 是 --save-dev 的简写
cnpminstallpostcss-pxtorem-D
3.2 然后在 项目根目录 中创建 .postcssrc.js 文件
mole.exports={
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0','iOS >= 8']
},
'postcss-pxtorem': {
rootValue:37.5,
propList: ['*']
}
}
}
3.3 配置完毕，重新启动服务
npmrunserve
最后测试： 刷新浏览器页面 ，审查元素的样式查看是否已将 px 转换为 rem
转换之前的样式
4、注意事项：
该插件 不能转换行内样式中的 px ，例如 <div style="width: 200px;"></div>
5、postcss-pxtorem 插件的配置
rootValue：表示根元素字体大小，它会根据根元素大小进行单位转换
propList 用来设定可以从 px 转为 rem 的属性
例如 * 就是所有属性都要转换，width 就是仅转换 width 属性
rootValue 应该如何设置呢？
如果你使用的是基于lib-flexable的REM适配方案，则应该设置为你的设计稿的十分之一。
例如设计稿是750宽，则应该设置为75。
大多数设计稿的原型都是以 iphone6 为原型，iphone6 设备的宽是 750，我们的设计稿也是这样。
但是 Vant 建议设置为 37.5，为什么呢？
因为Vant是基于375写的，所以如果你设置为75的话，Vant的样式就小了一半。
所以如果设置为 37.5 的话，Vant 的样式是没有问题的，但是我们在测量设计数型稿的时候都必须除2才能使用，否则就会变得很大。
这样做其实也没有问题，但是有没有更好的办法呢？我蠢兄就想实现测量多少写多少（不用换算）。于是聪明的你就想，可以不可以这样来做？
如果是 Vant 的样式，就把 rootValue 设置为 37.5 来转换
如果是我们的样式，就按照 75 的 rootValue 来转换
通过 查阅文档 我们可以看到 rootValue 支持两种参数类型
数字：固定值
函数：动态计算返回
postcss-pxtorem 处理每个 CSS 文件的时候都会来调用这个函数
它会把被处理的 CSS 文件相关的信息通过参数传递给该函数
修改配置如下
/**
* PostCSS 配置文件
*/
mole.exports={
// 配置要使用的 PostCSS 插件
plugins: {
// 配置使用 autoprefixer 插件
// 作用：生成浏览器 CSS 样式规则前缀
// VueCLI 内部已经配置了 autoprefixer 插件
// 所以又配置了一次，所以产生冲突了
// 'autoprefixer': { // autoprefixer 插件的配置
// // 配置要兼容到的环境信息
// browsers: ['Android >= 4.0', 'iOS >= 8']
// },
// 配置使用 postcss-pxtorem 插件
// 作用：把 px 转为 rem
'postcss-pxtorem': {
rootValue({file}) {
returnfile.indexOf('vant')!==-1?37.5:75
},
propList: ['*']
}
}
}
其他
[Android]
>=4.0
[iOS]
>=8
具体语法请 参考这里
5. 配置完毕，把服务重启一下，最后测试，very good
‘拾’ 移动端应该如何动态设置字体大小
em由来： font size of the root element，那么rem是个单位，单位大小由它第一代老祖宗的font-size的大小决定。现在前端码农们为了能在各个屏幕上看到一个健康的网页在默默的牺牲着自己的健康，因为不仅要知道rem是个单位，更重要的是要知道怎卖梁么能在不同分辨率下呈现的页面都很NB。
事故造成原因：
1.px单位在PC上很流行，在手机屏幕上一看，MLGB的，同样的12px却小的跟蚂蚁似的。
2.好不容易在iPhone4上调的正常了，换个菊花牌手机，MBD不堪入目了。
3.知道了rem的用法，但是html的font-size到底是多少才合适啊啊啊，妈蛋~。
好了，那么现在来解决这些问题。
在解清亮决之前，麻烦各位大婶要了解一些你可能不想了解的东东（警告：不了解这些就不能知道真相哟~）：
1. 物理像素(physical pixel)
我们看到的每个屏幕都是由一颗颗我们肉眼难以看到的小颗粒（物理像素）组成的。
2.逻辑像素
是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。
3.设备的像素比(device pixel ratio)简称DPR
它的数值体现了物理像素和逻辑像素之间的关系，用公式可以计算出该设备的DPR的大小：
那么了解了上面这些概念，就可以知道，为什么css在pc上写着font-size=12px;但是换到手机上却变小了？因为DPR啊啊啊，大哥~。
没错，我们在电脑屏幕上的DPR是1，但是手机却不同，可能是它可能是2，也可能是3。获取设备DPR的方法还是有的：
1.在JavaScript中，通过 window.devicePixelRatio 来获取
2.在css中，可以通过 -webkit-device-pixel-ratio ， -webkit-min-device-pixel-ratio 和 -webkit-max-device-pixel-ratio 进行媒体查询，对不同DPR的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。
本人也在网上看了不少动态设置rem的文章，下面把几个常用的列举出来：
一，用媒体查询来设置html的font-size：
二、利用js来动态设置
我要说的是最后一种，也是我认答配宽为目前比较好的实现方法：
利用js计算当前设备的DPR，动态设置在html标签上，并动态设置html的 font-size ，利用css的选择器根据DPR来设置不同DPR下的字体大小（这个方法很不错哦~）
忘了说了，手机淘宝很多页面用的就是这种方法来适配终端的。
转自 https://segmentfault.com/a/1190000004189237?_ea=522147