动态REM

什么是rem？

rem是相对于根元素html字体大小来计算的，即( 1rem = html字体大小 )

rem和em区别？

rem:（root em，根em）根元素的fort-size的大小计算
em：相对长度单位，相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被设置，则相对于浏览器的默认字体尺寸。 em 的值并不是固定的， em的值会继承父级元素的字体大小。

rem手机端方案特点？

• 所以手机端显示界面比例都一样，只是大小不同
• 1 rem==html fort-size ==viewport width
• 在线转换工具: http://pxtoem.com/

JS动态调整REM

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

REM 可以与其他单位同时存在

 font-size: 16px;
 border: 1px solid red;
  0.5rem;

在 SCSS 里使用 PX2REM

• npm config set registry https://registry.npm.taobao.org/

• touch ~/.bashrc

• echo 'export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"'>> ~/.bashrc

• source ~/.bashrc

• npm i -g node-sass

• mkdir ~/Desktop/scss-demo

• cd ~/Desktop/scss-demo

• mkdir scss css

• touch scss/style.scss

• start scss/style.scss

• node-sass -wr scss -o css

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

  在 scss 文件里添加

  @function px( $px ){
    @return $px/$designWidth*10 + rem;
  }
  
  $designWidth : 640; // 640 是设计稿的宽度，你要根据设计稿的宽度填写。
  
  .child{
     px(320);
    height: px(160);
    margin: px(40) px(40);
    border: 1px solid red;
    float: left;
    font-size: 1.2em;
  }

  即可实现 px 自动变 rem

---

屏幕适配布局问题

响应式布局

流式布局+媒体查询

• 用来解决不同宽度的布局问题，父级宽度不够的时候，子级节点会“挤下去”
  使用css3，根据屏幕分辨率进行不同的样式应用

优劣：

• 这种布局通吃pc和移动端，做到精细处，两者的效果都很好，
• 缺点是媒体查询是有限的，也就是可以枚举出来的
• 对设计要求简单、清晰、复杂的设计稿会直接弄死前端，同时需要多个设计稿
• css3低版本浏览器不支持

伸缩布局

使用的是Flexbox ，有兼容性问题
整体思路：考虑把一个元素变成一个伸缩容器 -->伸缩容器中子元素的排列方式 -->子元素所占空间

伸缩布局的属性：

1 主轴方向 flex-direction:row /row-reverse（右到左）/column/column-reverse(下到上)
2 伸缩项目在主轴的对齐方式 justify-content：flex-start /flex-end/center/space-between/space-around
3 伸缩项目是否换行 flex-wrap：nowrap/wrap
4 换行后对齐方式 align-content:stretch:拉伸/flex-start...sapce-around
5 不换行对齐方式 align-items 默认拉伸 值同上

伸缩项目的属性:

1 伸缩项目在伸缩容器中所占的空间 flex 值 数字 比例
2 自己的对齐方式 align -self：start /end/center
3 排列顺序 order 数字 值越小越靠前