移动端适配

一、样式适配

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

格式一：

//满足（）里的条件，就执行大括号里css的样式

格式二：

适配移动端时额外添加，该段代码能将iPhone6屏幕的放缩尺寸修正为真实尺寸

二、尺寸适配

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

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

页面默认font-size： 16px;

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

在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;