什么是移动端页面
- 在写HTML页面的时候，使用开发者工具切换到手机视图你会观察到一个现象，页面好像被缩小了，这其实是有历史原因的。
- 最开始我们的页面都只给PC，因为当时还没有智能手机，然后洛基亚手机出现了，它专门给自己造了一个编写网页的语言叫WAP，WAP网页的语法和HTML很像，但它并不是HTML。那个时候为了洛基亚的用户，网页除了编写HTML的版本还要另外做一套WAP版本。
- 后来苹果出现了，为当时的智能手机iphone3Gs提出了一套解决方案，专门用来让手机访问网页，就是将网页缩小让用户可以概览全部（模拟980像素宽，至于为什么是980，是业界的不成文规定），让用户使用手指缩放，这样就解决了不同设备像素宽不匹配的问题。
- 但是移动物联网爆发后，使用原有的方案满足不了现在的需求，所以诞生了新的解决方案，只需在HTML文件中加一个
<meta name="viewport" content="width=device-width, initial-scale=1.0">阻止页面缩放，再配合上rem适配方案就可以为各种手机定制页面。
什么是REM
要说REM我们首先要了解CSS中有哪些常用的表示长度的单位
- px：像素
- em：一个
m的宽度，就是一个字的宽度，自己font-size的像素值 - rem：根元素（html）的
font-size=16px(网页默认值是16px) - vh：viewport height视口高度的1/100
- vw：viewport width视口宽度的1/100
还需要了解，一些浏览器会设置字体一个最小大小，比如chrome默认设置最小只显示12px，这可能会给使用REM造成障碍
为什么要使用REM
在做PC端页面布局的时候，只要定好设计稿，设计布局只要定宽就能实现，但是移动端不同，各个厂商的各种机型屏幕像素宽都不同，这就给还原设计图造成了困难。但是REM方案解决了元素缩放和高度宽度没有关联的问题。
REM和EM的区别是什么
em就是一个m的宽度，一个字的宽度，因为m的宽高相等，就可以理解为一个字的高度，也就是font-size的大小。
所以rem就是根元素的font-size，em就是自己的font-size
手机端方案的特点
自适应布局通常会采用百分比布局方案
或者元素等比例缩放
但是都存在许多问题
使用JS动态调整REM
var pageWidth = window.innerWidth
document.write(`<style>html{font-size:${pagewidth}}</style>`)//这样就使rem等于pageWidth
REM可以与其他单位同时存在
当像素非常小的时候，由于浏览器默认最小字体大小的存在，显示可能会产生错乱。这时直接用px或者其他单位与rem混用也是可行的，不会影响设计美观。
在SCSS里使用PX to REM
在使用动态rem的时候你会发现要还原设计图你要做多次计算才能得出具体的长度，为了简化这一过程，在引入scss的基础上，使用函数自动计算正确的包含rem的返回值
// 根元素字体大小
html{
font-size: 100px;
}
$baseFontSize:100;//基数
@function px2rem($px){
@return $px / $baseFontSize * 1rem;
}
// 调用
.box{
width: px2rem(600);
height: px2rem(400);;
background-color: lawngreen;
}
网友评论