老师帮我看下
来源：3-1 通用适配原理
vivi_li
2020-06-12 11:51:06
我这个为什么缩放之后在设备像素比是2 的时候截图出来的还是2px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=no,maximum-scale=0.5,minimum-scale=0.5"/>
<title>Title</title>
<style>
*{
padding:0;
margin:0;
box-sizing: border-box;
}
.header-container{
top: 0;
border-bottom: 1px solid #000;
height: 2.5rem;
width: 100%;
background-color: rgba(222,24,27,.9);
}
</style>
<script>
(function () {
setRemUnit();
window.addEventListener('resize',setRemUnit)
function setRemUnit() {
var docEl=document.documentElement
var ratio = 18.75
var viewPortWidth = docEl.getBoundingClientRect().width||window.innerWidth;
docEl.style.fontSize=viewPortWidth/ratio +'px';
}
})()
</script>
</head>
<body>
<header class="header-container"></header>
</body>
</html>
4回答
-
好帮手慕言
2020-06-12
同学你好，理解的是对的，一个是css像素，一个是物理像素。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0 -
慕侠97781
2020-06-12
你是用什么插件截的图呀？
0h020-06-12 -
vivi_li
提问者
2020-06-12
老师我知道问题了 用两个截图方式截图出来的结果是不一样的，老师可以详细解释下捕获屏幕截图与捕获全尺寸屏幕截图的区别么？ 一个是css像素 一个是物理像素么？
0 -
vivi_li
提问者
2020-06-12
我试了一下用老师源码在我电脑谷歌浏览器打开设备像素比是 2 的情况下啊 也是呈现2px
0
相似问题