CSS-动态REM

移动端适配方案（手机专用，iPad和电脑都不可以用）。

REM是什么

• rem MDN查看rem的含义
  这个单位代表根元素的 font-size 大小（例如 元素的font-size）。当用在根元素的font-size上面时 ，它代表了它的初始值(译者注:默认的初始值是html的默认的font-size大小,比如当未在根元素上面设置font-size大小的时候,此时的1rem==1em,当设置font-size=2rem的时候,就使得页面中1rem的大小相当于html的根字体默认大小的2倍,当然此时页面中字体的大小也是html的根字体默认大小的2倍)。

该单位在实际使用中一般用于创建完美的可扩展布局。如果不被目标浏览器支持，可以使用em单位，虽然会稍微复杂一些。

rem：根元素的font-size的大小，（根元素html元素）。REM的主要思想:缩放。

• 长度单位：

1. px：像素
2. em：一个M的宽度或者一个汉字的宽度。
3. ex：一个X的高度。
4. rem：root em根元素的font-size的大小，（根元素html元素,html的font-size：16px；那么rem就是16px）。
5. vh：viewport视口高度。100vh = 视口高度。
6. vw：viewport width视口宽度。100vw = 视口宽度。

十二像素法则：font-size不能小于12px。

• 网页的默认font-size是16px，有的是14px,但是通过对浏览器默认字体进行设置，可以改变默认font-size的大小
• chrome浏览器，设置了最小font-size后，如果取值比这个设置值小，是没有效果的。默认最小值是12px。（只针对chrome有效）
• rem只与根元素有关。

rem和em的区别：

• 一个em的宽度和高度是一样的。
• 1em就等于自己的font-size像素值。
• rem就是根元素的font-size像素值。

动态REM。

如果没有设计图（窄屏、宽屏、iPad屏幕、手机屏幕。），就不设计响应时。

• 响应式：不同的屏幕得到不同的样式。
• 作页面的流程：

1. 有没有两张图。
2. 有：pc版和手机版本，没有：不做。
3. PC版本：float / flex布局,定宽1000px。
4. 手机（各种品牌各种型号的手机的兼容）。不能定宽。（最少要收集20款手机浏览器的分辨率，记住。响应式：0~320 一套CSS；320~375 一套CSS；375~414 一套CSS。）
5. 手机上没有办法做到响应式布局
6. 手机上可以做到：百分比布局（不写死宽度，自适应）；整体缩放（保证每个东西的比例大小不变，整体自适应）。

• 手机屏幕

1. iPhone5/SE: 320 X 568
2. iPhone6/7/8: 375 X 667
3. iPhone6p/7p/8p: 414 X 736
4. iPhonex: 375 X 812
5. ipad: 768 X 1024
6. ipad pro: 1024 X 1366
7. GS5: 360 X 640
8. nexus: 412X 732

百分比布局：

• 优点： 可以在不同的屏幕上做宽度与高度自适应。
• 缺点：布局当中存在太多的不确定性，高度没有办法和宽度做任何的配合，因为宽度是不确定的。
  百分比布局代码：

定宽定屏幕布局

假设只在320px的屏幕上正常显示，并且设置宽度为320px,使其在其他屏幕上看到的和320px的一模一样。
像素代码示例：

rem布局（所有元素按比例缩放）

• REM主要思想：缩放，解决宽度与高度无关联的问题。
  一切单位以宽度为基准，就能保证完美还原设计稿，以rem为单位。（vw最好，但是兼容性差。）
• 主要思想：rem----- > html font-size = (js) page width

 


    
    
    



    你好/*1rem = html font-size = 1 page width*/

rem实现动态布局代码示例：

对动态REM进行微调：

• 宽度的取值不用小数来表示，用数字。
• 要注意font-size的取值不能小于12px。
• 像素比1像素还好，只会显示1像素。特别小的地方不要用rem，比如border直接用px。
• 像素之间可以混用。
  rem实现动态布局代码示例：

不会使用less / sass / scss / webpack的根源

• 不会用命令行。（没有窗口界面，只有命令行界面）
• 不会英语。
• 不会看文档。

在 SCSS 里使用 PX2REM

• npm config set registry [https://registry.npm.taobao.org/](https://registry.npm.taobao.org/ "null")
• touch ~/.bashrc
• echo 'export SASS_BINARY_SITE="[https://npm.taobao.org/mirrors/node-sass"'](https://npm.taobao.org/mirrors/node-sass%22' "null") >> ~/.bashrc
• source ~/.bashrc
• npm i -g node-sass
  以上便：安装成功
• mkdir ~/Desktop/scss-demo
• cd ~/Desktop/scss-demo
• mkdir scss css
• touch scss/style.scss
• vi scss/style.scss
• ruby的sass：用法sass --watch scss:css把scss变成css，变成之后不要动，会一直在监听，之后再打开一个Gitbase
  
  

  1.png
• start scss/style.scss
• node-sass -wr scss -o cssnode-scss转换成CSS的方法

编辑 scss 文件就会自动得到 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;
  }

即可实现 px 自动变 rem