老师好，这里我属实搞不懂设置那个font-size和dpr有什么意义了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/simple.js"></script>
<link rel="stylesheet" href="css/grid-flex.css">
<link rel="stylesheet" href="css/simplebase.css">
<link rel="stylesheet" href="css/simpleindex.css">
</head>
<body>
<header class="header_container">
<div class="header_container_left">
<div class="logo">
<img src="img/logo.png" alt="logo">
</div>
</div>
<div class="header_container_right">
<div class="download">下载APP</div>
</div>
</header>
</body>
</html>
*{margin: 0px;box-sizing: border-box;padding: 0px;}
body{font-size: 12px;color: #5d655b;}
[data-dpr='2'] body{font-size: 24px;}
[data-dpr='3'] body{font-size: 36px;}
a{text-decoration: none;}
img{width: 100%;vertical-align: top;display: block;border: none;}
html,body{width: 100%;}
.header_container{position: fixed;left: 0;top: 0;display: flex;
width: 100%;z-index: 1000;height: 2.5rem;align-items: center;
background-color: gray;justify-content: space-around;}
.header_container_right,
.header_container_left
{height: 100%;display: flex;justify-content: center;align-items: center;}
.header_container_right{background-color: pink;border-radius: 0.5rem;
color: white;height: 1.25rem;line-height: 1.25rem;width: 2.5rem;
font-size: 0.5rem;}
这里我又重新看了一下老师写的那个js，dpr的部分我不是很明白，但是下面的font-size部分我还能理解，总之就是系数在js中已经固定死了，也就是html的font-size可以根据页面变化而变化，但是dpr的2，3情况我还是弄不清楚是怎么变化的，它跟普通的屏幕大小变化有什么区别？另外，根据dpr修改html font-size又是什么原理？请别跟我说回去看课间，这老师讲的我云里雾里，请在答案中再帮我讲解清楚一点
正在回答 回答被采纳积分+1
同学你好，代码中的grid-flex.css可以去掉，不使用该css也可以实现效果。
问题解答如下：
1. dpr的问题：
在simple.js中已经实现了让元素的尺寸随着页面宽度变化而变化，但是如果页面上有个元素的尺寸是1px，那么就会出现一个问题：如果在css样式中，将其设置成1px，当屏幕的dpr为2时，在页面上它看起来会比设计稿上的1px粗。这是因为在dpr=2的屏幕下，比如iphone6(视口宽是375px），它的设计稿通常是750*1334（对应着iphone6的物理像素），所以设计稿上的1px，实际应该对应页面上的0.5px（页面是375px）；而此时我们在css样式中，将其设置了1px，它实际是设计稿上的1px的两倍，所以看起来粗。如果直接将其设置成0.5px，某些机型的支持性并不好。为了解决该问题，就利用了dpr，当dpr=2时，我们设置页面缩放比为0.5，此时视口宽是750px（页面缩小了，但是视口变大了，二者相互作用，保证了页面上元素整体大小没有变）：
即：视口宽刚好和设计稿的宽度相等，此时设计稿上的1px就等于页面上的1px，因此就解决了1px问题。其余dpr同理。
2. 以dpr=2为例，通过如下代码设置页面的缩放比：
设置页面缩放比后，页面情况如下：
即此时页面的宽度变成了750px，可以打印看一下：
由于系数ratio是18.75，所以此时的html的fontsize是40px：
而不考虑dpr时，html的fontsize是20px：
这样就实现了html的fontsize随着dpr不同而变化。
同学再体会一下。
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星