移動端常用適配,解決了1px像素看起來變粗的 問題
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移動端常用適配</title>
<script>
/*
1.如何解決設備像素和CSS像素不一樣的問題?
如果設備像素和CSS像素一樣, 那么無需處理不會帶來任何負面影響
如果設備像素是CSS像素的2倍, 那么我們只需將CSS像素縮小一半即可
但是有時候設備像素可能是CSS像素的3倍/4倍...
2.獲取設備像素比DPR(Device Pixel Ratio)
DPR = 設備像素 / CSS像素
iPhone3GS : 320 / 320 = 1
iPhone4S: 640 / 320 = 2
iPhone678: 750 / 375 = 2
iPhoneX: 1125 / 375 = 3
在JS中我們可以通過 window.devicePixelRatio 獲取當前的設備像素
3.如何縮小?
通過 <meta name="viewport">的initial-scale屬性來縮小
注意點: 縮放視口后視口大小會發生變化
* */
// console.log(1.0 / window.devicePixelRatio); // 1 / 1 = 1; 1 / 2 = 0.5;
let scale = 1.0 / window.devicePixelRatio;
let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no">`;
document.write(text);
document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";
console.log(document.documentElement.style.fontSize)
</script>
<style type="text/less">
*{
margin: 0;
padding: 0;
}
.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: 1px 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;
vertical-align: bottom;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 60/100rem;
}
.bottom{
margin-top: 35/100rem;
}
</style>
<script src="js/less.js"></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>
在不同手機下的展示
