移动端适配

1.meta viewport

它提供有关视口初始大小的提示，仅供移动设备使用。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

2.媒体查询 media

当媒体查询为true时，其对应的样式表或样式规则就会生效，为false时，就不生效
大多数媒体属性可以带有“min-”或“max-”前缀，用于表达“最低...”或者“最高...”。例如，max-width:12450px表示应用其所包含样式的条件最高是宽度为12450px，大于12450px则不满足条件，不会应用此样式。

<style> @media(max-width:375px){ body{background: blue;} } </style>

表示 宽度在[0 - 375px] 时样式生效

3. REM

• 使用 JS 动态调整 REM
  让font-size与页面宽度相等，那么就可以使用rem来调整元素大小。是一种比例关系，跟着页面宽度变化，让元素的比例不变。

 <script>
     var pageWidth = window.innerWidth
     document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
 </script>

• 用sass把px转成rem

@function px( $px ){
 @return $px/$designWidth*10 + rem;
} //*10 表示 1rem是1/10页面宽度
$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;
}