element 手机适配_移动端常用适配（完美解决）

移动端常用适配,解决了1px像素看起来变粗的 问题

移动端常用适配

/*

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.如何缩小?

通过 的initial-scale属性来缩小

注意点: 缩放视口后视口大小会发生变化

* */

// console.log(1.0 / window.devicePixelRatio); // 1 / 1 = 1; 1 / 2 = 0.5;

let scale = 1.0 / window.devicePixelRatio;

let text = ``;

document.write(text);

document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";

console.log(document.documentElement.style.fontSize)

*{

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;

}

实名认证

在不同手机下的展示