前端开发页面基础样式（移动端、响应式、自适应）
2021-09-19 本文已影响0人
一名有马甲线的程序媛
前言
小编一直对移动端开发颇有兴趣，无奈接手的项目都是主打pc端，如今终于有移动端的项目到我手啦！~
先记录一下，本文会持续更新~~~~~~~~
一 html <head>部分
通常在移动端页面上要加上这样一行代码
<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（默认缩放比例为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(`<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帮我们解决转换的问题。
