2vw 和 vh
3媒体查询 + rem;
注意：不能使用px作为移动端适配的单位。
在高清屏下，1个css像素 1px 所占用的物理像素点是动态变化的，在高清屏中，同样是100px，此时
1px只是占用的像素点更多了而已。因此不管切换到什么样式的屏幕尺寸下，100px始终看起来就是
那么大，所以px不能作为适配单位。
物理像素：(设备像素)：一个设备的屏幕是由一个一个的小像素点组成的，设备出场时，屏幕有多
少个像素点构成是一定的
逻辑像素：(逻辑像素 css像素)：px，它是我们前端开发使用的一个单位
手机屏幕分为1倍屏，2倍屏，3倍屏
1倍屏：1px的css像素，对应1个物理像素点
2倍屏：1px的css像素，对应2个物理像素点
1假设设计稿尺寸为 375px,我们将屏幕尺寸分为若干份，比如10份，
12份，15份，20份等。然后设置html的font-size,比如375px,评分15份，一份为25px,即html(font-
size:25px)
2 假设设计稿尺寸为：375px,将设计稿中元素的尺寸转换为rem。虽然其他尺寸下元素的rem没有
变化，但是html的font-size是根据媒体查询在动态变化的，所以最终计算出来元素的尺寸也是动态
变化的。
px 换算 rem ：安装插件 px to rem & rpx(cssrem)
设置基准为font-size:375px/15等份
meta视口标签的主要作用：让布局视口的宽度和设备宽度保持一致，形成理想视口，
简单就是设备有多宽，布局视口就有多宽px：像素
em：一个 M 的宽度（面试：一个字的宽度）
rem：root em 根元素（ <html> ）的 font-size //oppo个别机型不适用
vh：view height，视口高度 100vh === 视口高度
vw：view width，视口宽度 100vw === 视口宽度
浏览器默认 font-size:16px;
Chrome浏览器默认最小字号为12px：font-size:12px;
所以一般情况下，rem 的font-size不要小于12px;
rem 就是 <html> 元素的 font-size，默认为 16px;(浏览器默认font-size)
rem和em 的区别：
1meta viewport
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
2媒体查询
更具查询结果选择不同的css样式,设置屏幕最大宽度，如果页面范围在这个宽度内就可以显示对应的CSS，以最大500为例
<style>
@media (max-width: 500px) {
}
</style>
3动态 rem方案
一切单位以屏幕宽度为标准，就能完美还原设计稿。
动态REM思路：动态rem 采用整体缩放的思想，在页面渲染之前，使用JS获取设备宽度并设置rem(1rem == html font-size == viewport width)，之后的布局单位全部使用rem来实现整体缩放。
在使用动态 rem 布局的移动端页面中，很小的宽度如border-width 依然使用px，因为即使使用rem，当rem小于1px 时，依然会被浏览器当做1px 使用。开发移动端有一段时间了，目前移动端主流的适配方案依然是rem。由于rem适配以根元素字体大小为基准的单位，当用户设置了系统字体大小的时候，普通的rem适配方法会失效，导致样式错乱。我在开发的时候也遇到这个问题，所以在原有rem适配方法上加了校验功能。
链接： >
在CSS中我们一般使用px作为单位，需要注意的是，CSS样式里面的px和物理像素并不是相等的。CSS中的像素只是一个抽象的单位，在不同的设备或不同的环境中，CSS中的1px所代表的物理像素是不同的。在PC端，CSS的1px一般对应着电脑屏幕的1个物理像素，但在移动端，CSS的1px等于几个物理像素是和屏幕像素密度有关的。
首先：我们必须了解几个概念，就是：Retina屏、物理像素、设备独立像素、设备像素比
所谓“Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。由摩托罗拉公司研发。最初该技术是用于Moto Aura上。这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。也被称为视网膜显示屏。Retina屏一般在苹果公司的产品上用的比较多，诸如MacBook、iPad、iPhone等
物理像素又被称为设备像素、设备物理像素，它是显示器（电脑、手机屏幕）最小的物理显示单位，每个物理像素由颜色值和亮度值组成。所谓的一倍屏、二倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显示一个CSS像素，也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点，在普通屏幕下1个CSS像素对应1个物理像素，而在二倍Retina屏幕下，1个CSS像素对应的却是4个物理像素
设备独立像素是我们写CSS时所用的像素，它是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。
设备像素比简称为dpr，物理像素与设备独立像素的比例。
当这个比率为1:1时，使用1个设备像素显示1个css像素。当这个比率为2:1=2时，使用4(2 2)个设备像素显示1个css像素。当这个比率为3:1=3，使用9(3 3)个设备像素显示1个css像素。
这里要注意，dpr=2,并不是物理像素是设备独立像素的2倍，而是用4个物理像素去表示1个设备逻辑像素
应该说1个设备独立像素是1个物理像素的4倍！！！！！，因为你4个网物理像素才代表我1个设备独立像素
dpr只代表一个数字比例，不是倍数关系。
CSS的1px等于几个物理像素，除了和屏幕像素密度dpr有关，还和用户缩放有关系。例如，当用户把页面放大一倍，那么CSS中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，CSS中1px所代表的物理像素也会减少一倍。关于这点，以后的1px细线问题部分还会讲到。
对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。
对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
rem是相对于根元素的字体大小的单位，也就是html的font-size大小，浏览器默认的字体大小是16px，所以默认的1rem=16px，我们可以根据设备宽度动态设置根元素的font-size，使得以rem为单位的元素在不同终端上以相对一致的视觉效果呈现。
事实上 rem是把屏幕等分成 指定的份数，以20份为例，每份为 1rem ， 1rem 对应的大小就是 rem基准值 ，rem做的就是把 rem基准值 给<html>的 font-size ，所以如果设备的 物理像素 宽为 640px ，分成20份，那么 1rem=640px/20=32px , <html>的 font-size为32px 。
当然，你也可以分成30份，40份，60份等等，这个看自己的喜好了
在我们实际切图的时候，对于视觉稿上的元素尺寸换算，只需要元素的 原始的px值(即你量的大小) 除以 rem基准值 即可。例如设计稿的大小为640px， rem基准值 = 640px/20 = 32px ，有个元素的大小你量出来是 140px286px ，那么换算过来就是：
这样我们就可以用rem来代替像素px了， 而且在所有的移动端都是自适应的
这个方法目前是比较好的适配方法，只是rem在计算时很麻烦，有很多小数，这个时候大家可以试一下用less解决rem的小数问题
rem单位是相对于根节点的字体大小的，所以通过设置根节点的字体大小可以动态的改变rem的大小rem方案的原理其实就是，将每一个不同的屏幕划分成相同的份数，让同一个元素在不同的屏幕上占据相同比例的空间。1rem等于此页面html的font-size，rem可以理解为每份是多少px
比如，设计稿宽度为375px，将页面划分成10份，那么1rem=375px，如果有一个div宽度为375px，换算成rem为1rem。将375px宽的屏幕划分为10份，这个div宽度占一份。
即 documentbodyclientWidth / 10
同理，如果我们想让1rem=10px，那么documentbodyclientWidth / 375即可
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;">（font size of the root element）是指相对于根元素的字体大小的单位
目前，IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。即使浏览器不支持rem，就多写一个绝对单位的声明即可，浏览器会忽略用rem设定的字体大小。
（1）首先浏览器的默认字体大小是16px
（2）100%=16px => 625%=1px => 625%=10px，因为rem是相对于根元素，因此在css的html中全局声明font-size=625%，此时的1rem就等于10px，这样一来rem和px之间的换算就比较简单，使用起来更方便
（3）使用JS根据浏览器宽度（或浏览器可视区域宽度（clienWidth））动态设置html的大小
通过JS动态设置根元素的font-size，这样的好处是所有设备分辨率都能兼容适配，淘宝首页目前就是用的JS计算。如果不用JS也是可以做适配的，一般我们在做web app都会先统计自己网站有哪些主流的屏幕设备，然后去针对这些设备去做media query设置也可以实现适配，如：
（4）使用媒体查询设置根元素大小——rem和px在响应式中的应用对比，如：
（5）Rem自适应JS，现在也有封装好的JS供我们直接使用
（6）屏幕适配还有一种简单粗暴的做法，即设置viewport进行缩放
天猫web app的首页就采用过这种方式，以320宽度为基准，进行缩放，最大缩放为32013 = 416，基本缩放到416都就可以兼容iphone6 plus的屏幕了，这个方法简单粗暴，又高效。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）