这里用rem不就可以解决那个 dpr的问题了吗

陈立天 2020-08-26

源自：移动端屏幕适配 3-3 通用适配应用--头部header

收起

8回答

好帮手慕粉 2020-08-26 18:28:14

同学你好，同学的编辑器是设置的1rem=40px吗？如果是的话，那么同学这样的效果是正确的。先看浏览器的效果，同学的根元素大小是28.8px：

那么在当前窗口下，0.3rem就是8.64px，是不等于12px的。同学的12px转换为0.3rem是在1rem=40px的条件下的。如果同学编辑器设置的1rem=40px，那么模拟器也要调成这个，在转换的时候才能保持一致：

在写代码的时候，要统一标准才可以。

收起回答

提问者陈立天 2020-08-26 17:03:20

测试了还是跟老师的测试不一致。我的显示器是4k的有影响不？

收起回答

好帮手慕粉 2020-08-26 16:57:16

同学你好，关于同学的问题回答如下：

1、老师这边测试是一样的。可以先将这部分代码去掉进行测试：

因为如果加上了它，就会覆盖掉我们之前设置的字体大小：

当去掉后，进行测试，效果是一样的：

同学要确保是在同一个模拟器下测试的。

2、如果px to rem不能使用，那同学还是使用之前的插件吧。因为每个人的电脑配置和环境都是不一样的，如果实在不行，那只能卸载重启了。

收起回答

提问者陈立天 2020-08-26 16:26:22

下载了老师说的这个插件不能显示rem换算

收起回答

提问者陈立天 2020-08-26 16:22:37

<!DOCTYPE html>

<html>

<head>

<title>通用适配原理自由编程</title>

<meta charset='utf-8' />

<meta name="viewport" content="width=device-width,initial-scale=1,maximun-scale=1,minmum-scale=1,user-scalable=no" />

<style lang="css">

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

html,body {

width: 100%;

height: 100%;

}

img {

width: 100%;

height: 100%;

vertical-align: top;

}

/*设计稿750px header高度100px*/

/* 1rem = font-size = 750 / 18.75 = 40，则100px = 100/40 = 2.5rem */

/* 在375px的屏幕下，header高度是50px 50/20 = 2.5rem */

.header-container {

width: 100%;

height: 2.5rem;

background: #666;

display: flex;

align-items: center;

justify-content: space-between;

padding: 0 0.25rem ;

}

.header-logo {

width: 5rem;

height: 2rem;

}

.header-download {

width: 4rem;

height: 2rem;

border-radius: 1rem;

background: rgba(242,149,242,0.9);

color: #000;

text-align: center;

font-size: 12px;

display: flex;

align-items: center;

justify-content: center;

}



[data-dpr = "2"] .header-download {

font-size:24px;
font-size: 24px;
height: 10px;

}

[data-dpr = "3"] .header-download {

font-size:36px;

}

</style>

</head>

<body>

<header class="header-container">

<div class="header-logo">

<img src="./img/logo.png" alt="慕课网">

</div>

<div class="header-download">

下载APP

</div>

</header>

<script>

(function() {

'use strict';

var docEl = document.documentElement;

var maxWidth = 540;

var minWidth = 320;

//根据dpr动态设置meta缩放

var dpr = window.devicePixelRatio || 1;

var viewportEl = document.querySelector('meta[name="viewport"]');

dpr = dpr >=3 ? 3 : (dpr >= 2 ? 2 : 1);

docEl.setAttribute('data-dpr',dpr);
docEl.setAttribute('max-width',maxWidth);
docEl.setAttribute('min-widht',minWidth);

var scale = 1/dpr;
var content = 'width=device-width,initial-scale='+scale+',maximun-scale='+scale+',minmum-scale='+scale+',user-scalable=no';

if(viewportEl) {
    viewportEl.setAttribute('content',content);
}else {
    viewportEl.createElement('meta');
    viewportEl.setAttribute('name','viewport');
    viewportEl.setAttribute('content',content);
    document.head.appendChild(viewportEl);
}

//动态设置html的font-size

setRemUnit();

window.addEventListener('resize',setRemUnit);

function setRemUnit(){
    var ratio = 18.75;
    var viewWidth = docEl.getBoundingClientRect().width || window.innerWidth;

if(maxWidth && (viewWidth/dpr > maxWidth)) {
    viewWidth = maxWidth;
}else if(minWidth && (viewWidth/dpr < minWidth)) {
    viewWidth = minWidth;
}
    docEl.style.fontSize = viewWidth / ratio + 'px';
}


})();

</script>

</body>

</html>

收起回答