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

前端页面基础样式

科技千变万化，手机日新月异；生活中发生的变化很是明显，从最初的上网需要在电脑上浏览信息，再到现在手机亮屏就能上网浏览信息很是方便。手机也从最初占据多半屏幕的实体键盘且只能用来拨打电话和发送信息，发展到目前的虚拟按键而且可以实现3G/4G到5G网络和安装各种手机应用APP。
基于此，移动端的需求也是非常庞大的。作为前端开发者，移动端的页面占据的也是越来越多，相信大家也会经常去开发移动端的页面。下面贴出各个代码，很简单，但很重要。

由于历史的原因，我们的手机在访问网页时，不管你是响应式网页还是非响应式，浏览器都会将你的宽度改为980px。

这是历史遗留的问题，因为最早的智能手机为了完整的显示一个网页，直接将PC上的网页缩放塞进手机浏览器中，经过调研，发现大部分的网页都是980px左右，所以当我们用手机访问网页时宽度都会被缩放到980px。

我们只需要在移动端页面加上这样一行代码就可以解决问题

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

width=device-width（设置页面宽度为设备宽度）
user-scalable=no（不允许用户缩放）
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0（默认缩放比例为1， 最大缩放比例为1，最小缩放比例为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%; }
    }

响应式

此代码可判断设备尺寸大小实现移动端、平板电脑、pc不同样式：

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与sass自动计算转换

js代码实现自适应

var width=document.documentElement.clientWidth;
    document.write(`<style>html{font-size:${width / 10}px</style>`)

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帮我们解决转换的问题。