移动端布局笔记(常用属性)

rem'布局
固定定位元素中有input元素的时候，获取焦点弹出小键盘会影响布局
<script>
  var pixclPatio = 1 / window.devicePixelRatio;
  document.write('<meta name="viewport" content="width=device-width,initial-scale='+pixclPatio+',minimum-scale='+pixclPatio+',maximum-scale='+pixclPatio+',user-scalable=no" />');
  
  var html = document.getElementsByTagName('html')[0];
  var pageWidth = html.getBoundingClientRect().width;
  html.style.fontSize = pageWidth / 16 + 'px';

</script>

在页面引用这段代码，然后页面单位用rem 换算前需要提示答应出来1rem是多少像素，在iPhone5下是40px；

还有 个人感觉写移动端 尤其是用到rem布局的时候使用less或者sass会减少我们计算的次数，on个人大大的提高

页面开发速度，并且可以减少运算失误，

顺便补充一点响应式布局:

个人的理解就是根据不同的屏幕宽度 设置不同的样式

媒体查询 @media

  min-width   分辨率宽度大于等于设置值的时候识别
  max-width   分辨率宽度小于等于设置值的时候识别
  orientation:portrait        竖屏
  orientation:landscape       横屏
  -webkit-min-device-pixel-ratio:2    像素比

1. @media screen and (max-width : 320px){
2. body{...}
3. }
4. @media screen and (min-width: 800px) and (max-width: 1024px){
5. body{...}
6. }

 关键字
  and 和，与（链接媒体特性）
  not 排除指定媒体类型
  only 指定某种特定的媒体类型，很多时候是用来对那些不支持媒体特性但却支持媒体类型的设备使用

弹性盒模型(设置给父元素)
  display:flex display:box的进化版但是兼容性
    flex-direction 设置主轴方向
      row  从左向右排列(默认值)
      row-reverse 从右向左排列
      column 从上往下排列
      column-reverse 从下往上排列


    justify-content 主轴对齐
      flex-start (默认) 元素在开始位置 富裕空间占据另一侧
      flex-end 富裕空间在开始位置 元素占据另一侧
      center 元素居中 富裕空间 平分左右两侧
      space-between 富裕空间在元素之间平均分配
      space-around  富裕空间在元素两侧平均分配


    align-items 侧轴对齐
      flex-start (默认)元素在开始的位置 富裕空间占据另一侧
      flex-end  富裕空间在开始的位置 占据元素另一侧
      center   元素居中 富裕空间平均分配两侧


    flex-wrap 换行
      nowrap  默认
      wrap 换行
      wrap-reverse 反向换行


    align-content 堆栈伸缩行
      align-content 会更改 flex-wrap 的行为。它和 align-items 相似，但是,不是对齐伸缩项目，它对齐的是伸缩行。
      flex-start (默认) 元素在开始位置 富裕空间占据另一侧
      flex-end 富裕空间在开始位置 元素占据另一侧
      center 元素居中 富裕空间 平分左右两侧
      space-between 富裕空间在元素之间平均分配
      space-around  富裕空间在元素两侧平均分配
      
      flex-flow
      flex-flow 是 flex-direction 和 flex-wrap 的缩写
      flex-flow: [flex-direction] [flex-wrap]


    order 显示顺序(设置给子元素)
      数字越大，显示越靠后
      支持负数


    flex 伸缩性(设置给子元素)
      flex: auto;
      flex: none;
      flex: num;


    align-self 子元素侧轴对齐(设置给子元素)
      flex-start (默认) 元素在开始位置 富裕空间占据另一侧
      flex-end 富裕空间在开始位置 元素占据另一侧
      center 元素居中 富裕空间 平分左右两侧