移动端方案起源及适配方案动态REM

2019-08-21 本文已影响0人明明你也一样

什么是移动端页面

在写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;
  }