前端开发页面基础样式（移动端、响应式、自适应）

前言
小编一直对移动端开发颇有兴趣，无奈接手的项目都是主打pc端，如今终于有移动端的项目到我手啦！~
先记录一下，本文会持续更新~~~~~~~~

一 html 部分

通常在移动端页面上要加上这样一行代码

width=device-width（设置页面宽度为设备宽度）
user-scalable=no（不允许用户缩放）
initial-scale=1.0（默认缩放比例为1）
maximum-scale=1.0（ 最大缩放比例为1）
minimum-scale=1.0（最小缩放比例为1）

二 移动端多尺寸自适应

html {font-size: 625%; /*100 ÷ 16 × 100% = 625%*/}
/* 设计稿px换算直接/100即可得到rem值。移动平台*/ 
    @media all and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
        html { font-size: 703%; }
    }
    @media all and (min-width:375px) and (max-width:383px) and (orientation:portrait) {
        html { font-size: 732.4%; }
    }
    @media all and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
        html { font-size: 750%; }
    }
    @media all and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
        html { font-size: 781.25%; }
    }
    @media all and (min-width:414px) and (max-width:431px) and (orientation:portrait){
        html { font-size: 808.6%; }
    }
    @media all and (min-width:432px) and (max-width:479px) and (orientation:portrait){
        html { font-size: 843.75%; }
    }

三 响应式

html{font-size: 100px;}
/* 需要把得到的像素值/100px,转换为rem单位。多终端响应式*/
    @media only screen and (min-width: 320px) and (max-width: 767px) {
       .div{
           font-size: 0.12rem;
       }
    }
    @media only screen and (min-width: 768px) and (max-width: 1023px){
        .div{
            font-size: 0.14rem;
        }
    }
    @media only screen and (min-width:1024px) {
        .div{
            font-size: 0.16rem;
        }
    }

四 内容自适应

html{font-size:10px;}/*1rem等于10px。固定尺寸用px，自适应用rem*/
.div{/*此处为固定尺寸*/
    width:100px;
    height:100px;
}
.div{/*此处为自适应*/
    width:10rem;
    height:10rem;
}

五 js代码实现自适应

var width=document.documentElement.clientWidth;
document.write(``)

JS代码就两行，将rem设置为手机宽度的的10%，虽然设置width / 100可以完全模拟vw（自适应不用vw是因为vw兼容性太差了），但是当em为1%时，一但宽度小于120px时，font-size就会小于12px，低于chrome默认的最小font-size就会出现bug，所以我们设置rem为10%。

还需要注意的是虽然width和height是用rem使用，但是不代表别的大小也需要用rem（如果字体的font-size也用rem，那当宽度很小时，字会小的看不清），我们应该搭配别的单位以获得更美观的效果。

六 使用SCSS自动转换px

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

.box{
  background: grey;
  width: px(256);
  height: px(128);
  margin: px(32) px(32);
  float: left;
}

为了减少我们计算量，我们可以直接使用scss写一个function帮我们解决转换的问题。

感谢参考文章