移动端适配

一、样式适配

使用媒体查询，在移动端不同的屏幕宽度下，选择合适的样式，达到页面最佳显示效果。

格式一：

<style>@media （）and（）{}</style>
//满足（）里的条件，就执行大括号里css的样式

格式二：

<link rel="stylesheet" href="style.css"media="(max-width:320px)">

适配移动端时额外添加<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">，该段代码能将iPhone6屏幕的放缩尺寸修正为真实尺寸

二、尺寸适配

由于手机屏幕宽度尺寸规格繁多，动态rem方案旨在获取实际的手机屏幕尺寸，通过调整根元素的font-size值来调整页面缩放后的各个元素的尺寸和定位。确保在不同页面元素尺寸与页面宽度比例保持不变。

rem：room-em，即html根元素，子元素会继承html元素字体大小;

页面默认font-size： 16px;

chrome设置中默认最小像素： 12px;

在script标签加入这段代码：

<script>
   var pageWidth=window.innerWidth  //获取屏幕宽度
   document.documentElement.style.fontSize= `${pageWidth/60}px`
</script>

此处，需放缩的尺寸单位使用rem，CSS可以这样写：

.xxx{
    width:0.4rem;
    height:0.2rem;
    margin:0.05rem 0.05rem;
    float:left;
 }

用sass将px转化为rem：

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