CSS9:动态 REM-手机专用的自适应方案

动态 REM是手机专用,是如何适配所有手机的方案,不是响应式方案,
例如 : taobao.com 是专门的PC端
m.taobao.com 是专门的手机端,如果用电脑短访问网页布局就很奇怪
就像用手机访问pc端没有自适应的网站一样

当别人问会不会移动端开发,说会就行了,因为我会了动态REM!手机专用

1.REM是什么

em:一个m的宽度.如果面试官问,就说是一个汉字的宽度.这个单位是相对于font-size的

rem:root em,根元素的font-size.即<html>的font-size.rem是相对于html的font-size的

vh:视口高度,总共100vh
vw:视口宽度,总共100cw
MDN-length

2. 12像素法则

网页的默认font-size是16px.
chrome浏览器默认设置能显示的最小字体是12px,也就是说如果给css样式小于12px,那么还会显示12px.这需要手动设置才行.但浏览器用户一般都不会去设置这个.所以让字体不要小于12像素,否则chrome浏览器没法显示

而firefox和safir浏览器就没有这个限制

3. em和rem的区别

对于汉字来说,宽高一样,所以font-size高度就是1个em的值(M这个字宽高基本一致,且宽度就是一个汉子的宽度.所以叫em)
区别:
em:自己的font-size的值
rem:根元素的font-size

4.动态REM

做响应式之前需要四个设计图(没图不做.因为设计不是前端该做的事,没有完整最终确定的的设计图之前,不要写代码.):
一个是窄屏,一个是宽屏,一个是ipad,一个是手机端的

不同的屏幕得到不同的样子算式响应式.

这篇博客不讨论响应式.只看手机端怎么做.

4.1手机端出现的问题:

pc端只需要选一个布局,然后定宽就可以了,

但是手机端,手机太多.

各种宽度像素都有很多.没有办法做响应式,
解决方法:

使用百分比:例如,宽度5%,40%,让它始终自适应.
整体缩放:做一个图,然后遇到宽度不一样的情况就整体缩放

4.2手机上百分比布局,固定宽度布局缺点

百分比布局缺点:宽度容易确定,因为可以和父容器作比较,是相对于父容器的.但是高度很难确定,比如高度写成20%,没有写过,想做一个宽高1:2的div,没法做,有很强的不确定性.高度没有办法跟宽度做任何的配合

如果想写出下面的设计

假设固定宽度为320px,固定宽高后出现的问题:

即如果手机宽度变化,那么就不会适应屏幕变化

如果居中,两侧就会变大,固定宽度只能让别的宽度的手机看到320px宽度的样子

想要的效果是所有元素按比例放大

单位应该相对于宽度,才能很好地还原设计稿
px,em都不行,vw可以,但是vw兼容性太差
所以退而求其次

4.3 最终解决方案

rem依赖的是<html>的font-size,使用js使<html>的font-size依赖pagewidth,那么rem就间接地依赖于页面的pagewidth

所以引入REM方案

在<head>标签里加上如下代码,让1rem等于页面宽度

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>动态REM</title>
  <script>
    var pageWidth = window.innerWidth
     document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
  </script>
  
</head>

使用上面代码,使长度单位相对于页面宽度定义,从而适应任何不同屏幕尺寸的手机

不管屏幕宽度如何变化,布局总是完美适应屏幕

4.4优化

rem小于1不方便写
将pageWidth/100,于是就将款入分为100rem,刚才的0.4rem就可以写成40rem.这样用起来像vw.但是有一个问题

谷歌浏览器字体设置不能小于12px,所以除以100后,html标签的font-size变成了12px.
解决方法:之缩小10倍即可,10rem为页面总宽度
rem和其他长度单位混用

因为border这种小的单位,让它固定就可以,不需要缩放,因为1px缩放,border还显示1px.如果5px缩放,不显示2.5px,值显示2px,px不会变成小数.
font-size也不必缩放,将所有屏幕的手机font-size设置成一样大小,显示不影响美观

5.使用sass自动将设计稿的px转换为rem

px需要算,很麻烦。假如设计师给的设计稿是只有640px的宽度的一个设计稿，里面有一个div是256px×128px，那么宽度的rem就是256/64010rem，高度的rem就是128/64010rem，全部换成rem之后，所有的手机页面才能自动缩放。这样的缺点显而易见，难道自己要一点点算rem的值？

有没有什么办法可以将px转换为rem并交给程序来做？有，sass。

一定要强制自己用命令行，强制自己学英语，强制自己看文档。
只有这三条都做了，才有可能成为前端水平20%的程序员。
现在前端很多工具没有窗口界面，我已经装了linu虚拟机，安装软件等工具包只需要一条命令，很方便。

5.1 安装并使用sass

使用npm安装（linux环境）
因为国内特殊的网络环境，不能直接安装，所以需要先设置国内的镜像，设置淘宝源
npm config set registry https://registry.npm.taobao.org/
touch ~/.bashrc
设置之后还没用，因为node-sass会下载亚马逊上的一个资源，所以要设置一下，从淘宝上下载资源，不要去国外下载
echo 'export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"' >> ~/.bashrc
source ~/.bashrc

全局安装
npm i -g node-sass
如果使用windows，那么一定会报错，我也不知道为什么，所以推荐从现在开始，编程使用linux或者mac，安装工具就一句命令行的事情。如果放不下windows，就在Windows上装虚拟机，在安装深度linux，deepin或ubantu都可以。

安装好之后，接下来做个示例：
mkdir ~/Desktop/scss-demo
cd ~/Desktop/scss-demo
mkdir scss css
touch scss/style.scss
start scss/style.scss
在scss文件夹里创建style.scss接下来：

node-sass -wr scss -o css
使用上面的命令监听scss文件夹。开始实验：

这时候编辑 scss 文件就会自动得到 css 文件

例如，在style.scss里写

html{
  color:red;
  p{
  color:blue;
 }
}

在css里没有这样的语法
这时观察css文件

自动转化成符合正确语法的css语句
所以，
在 scss 文件里添加：

@function px( $px ){
  @return $px/$designWidth*10 + rem;
}

$designWidth : 640; // 640 是设计稿的宽度，你要根据设计稿的宽度填写。设计师的设计稿宽度需要统一

.child{
  width: px(320);
  height: px(160);
  margin: px(40) px(40);
  border: 1px solid red;
  float: left;
  font-size: 1.2em;
}

那么相应得，css这时会将px自动变成em（宽度为640px的情况下）

.child {
  width: 5rem;
  height: 2.5rem;
  margin: 0.625rem 0.625rem;
  border: 1px solid red;
  float: left;
  font-size: 1.2em; }

这样就无需在手动换算rem的值了。

CSS9:动态 REM-手机专用的自适应方案