移動端適配最佳方案-rem
JS動態計算當前屏幕每一份大小
缺點：切換屏幕尺寸需要刷新界面纔有效，真機上測試，可忽略
document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";
設置設備像素比
通過meta的initial-scale屬性來縮小
注意點：縮放視口後視口大小會發生變化
當移動端設備的CSS像素和設備像素比例不爲1時，需要進行縮放
let scale = 1.0 / window.devicePixelRatio;// 計算縮放比例
let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maxinum-scale=${scale}, mininum-scale=${scale}, user-scalable=no ">`;
document.write(text);
style樣式中通過比例公式計算
公式：原始元素尺寸 / 原始圖片每一份大小 * 目標屏幕每一份大小 = 等比例縮放後的尺寸
設計圖片是150*150
如何在前端開發中應用這個計算公式
目標屏幕每一份的大小就是HTML的font-size：50px（一共有7.5份，375/7.5）
使用時只需要用 原始元素尺寸 / 原始圖片每一份大小rem 即可
案例
爲了直接計算縮放後的尺寸，這個案例中用了less
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移動端常用適配方案-不用媒體查詢</title>
<style type="text/less">
*{
margin: 0;
padding: 0;
}
@media screen and (max-width: 320px) {
html{
font-size: 42.67px;
}
}
@media screen and (min-width: 375px) {
html{
font-size: 50px;
}
}
@media screen and (min-width: 414px) {
html{
font-size: 55.2px;
}
}
.top{
position: relative;
}
.top>img{
width: 100%;
height: auto;
}
.top>p{
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 80/100rem;
font-size: 36/100rem;
color: #fff;
}
.middle, .bottom{
position: relative;
height: 290/100rem;
}
.main{
border: 1/100rem dashed #0d7efb;
border-radius: 5/100rem;
padding: 10/100rem;
display: inline-block;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.main>img:nth-of-type(1){
width: 410/100rem;
height: 270/100rem;
vertical-align: bottom;
}
.main>img:nth-of-type(2){
width: 84/100rem;
height: 84/100rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 60/100rem;
}
.bottom{
margin-top: 35/100rem;
}
</style>
<script src="../js/less.js"></script>
<script>
/*
* 注意點：通過JS動態計算當前屏幕每一份大小的好處：不用寫很多的媒體查詢
* 壞處：切換了屏幕尺寸之後需要刷新界面纔有效
* 而媒體查詢如果切換了屏幕的尺寸不需要重新刷新界面
* */
console.log(window.devicePixelRatio);
document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";
// console.log(document.documentElement);
let scale = 1.0 / window.devicePixelRatio;
let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maxinum-scale=${scale}, mininum-scale=${scale}, user-scalable=no ">`;
document.write(text);
</script>
</head>
<body>
<div class="top">
<img src="../images/bg.png" alt="">
<p>實名認證</p>
</div>
<div class="middle">
<div class="main">
<img src="../images/back.png" alt="">
<img src="../images/add.png" alt="">
</div>
</div>
<div class="bottom">
<div class="main">
<img src="../images/back.png" alt="">
<img src="../images/add.png" alt="">
</div>
</div>
</body>
</html>