极客观点
研发管理
HarmonyOS
高清屏中1px = 2px 如果设计稿是640切图的时候就要除以2去切，今天做个实验有些疑惑为什么我给头部定义50px的高，在移动端没有变成100px呢?
pc端
iphone5下
这时候高度看起来好像不一样但是如果只截取一小部分的话看起来高度没有任何区别
pc
iphone5
另外一个困惑就是看很多文章说移动端用rem，后来甚至可以用flexible.js自动适配，而我写的固定高度的px看上去也没什么问题啊 高度没有随着dpr值得变化而变化？
下面是源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
<title>像素的秘密</title>
<style type="text/css">
*{
margin:0;padding: 0;box-sizing : border-box;text-decoration: none;list-style: none;font-size: 14px
}
html,body{
width:100%;
height: 100%;,
-webkit-overflow-scrolling : touch;
}
.head{
height: 50px;width:100%;text-align: center;line-height: 50px;position: fixed;background: #00b38a
}
.main{
padding-top: 50px;width:100%;background: #eee;height: auto;padding-bottom: 60px;
}
.main .banner{
height: 180px;background-image: url(img/short.png);background-repeat: no-repeat;background-size: 100% 100%;
}
.item{
width:100%;height: 45px;background:#fff;overflow:hidden;margin-top:10px;
}
.item .job,.item .money{width:50%;float:left;height: 100%;line-height: 45px}
.item .job{
text-align: left
}
.item .money{
text-align: right;
}
.foot{
position: fixed;width:100%;height:50px;bottom: 0;left: 0;overflow:hidden;background:#00b38a;
}
.foot li{
width:25%;text-align: center;height: 50px;line-height: 50px;float: left;
}
</style>
</head>
<body>
<div class="head">标题</div>
<div class="main">
<div class="banner"></div>
<div class="news">
<li class="item">
<span class="job">职位：工程师1</span>
<span class="money">薪资：15-20K</span>
</li>
<li class="item">
<span class="job">职位：工程师2</span>
<span class="money">薪资：15-20K</span>
</li>
<li class="item">
<span class="job">职位：工程师3</span>
<span class="money">薪资：15-20K</span>
</li>
<li class="item">
<span class="job">职位：工程师4</span>
<span class="money">薪资：15-20K</span>
</li>
<li class="item">
<span class="job">职位：工程师5</span>
<span class="money">薪资：15-20K</span>
</li>
<li class="item">
<span class="job">职位：工程师6</span>
<span class="money">薪资：15-20K</span>
</li>
<li class="item">
<span class="job">职位：工程师7</span>
<span class="money">薪资：15-20K</span>
</li>
<li class="item">
<span class="job">职位：工程师8</span>
<span class="money">薪资：15-20K</span>
</li>
<li class="item">
<span class="job">职位：工程师9</span>
<span class="money">薪资：15-20K</span>
</li>
<li class="item">
<span class="job">职位：工程师10</span>
<span class="money">薪资：15-20K</span>
</li>
<li class="item">
<span class="job">职位：工程师11</span>
<span class="money">薪资：15-20K</span>
</li>
<li class="item">
<span class="job">职位：工程师12</span>
<span class="money">薪资：15-20K</span>
</li>
<li class="item">
<span class="job">职位：工程师13</span>
<span class="money">薪资：15-20K</span>
</li>
<li class="item">
<span class="job">职位：工程师14</span>
<span class="money">薪资：15-20K</span>
</li>
</div>
</div>
<div class="foot">
<ul>
<li class="navbar">首页</li>
<li class="navbar">求职</li>
<li class="navbar">简历</li>
<li class="navbar">更多</li>
</ul>
</div>
</body>
</html>
html5
1px永远都是1px。px这就是页面上元素的尺寸单位。
Retina的dpr为2，其实是
理想视口下，1px的像素点会由2*2个物理像素来渲染（渲染更精致，且一个物理像素是渲染的最小单位。非Retina屏1px就是1物理像素大小，那么小于1px的元素如何渲染？然后针对Retina屏有些设计会要求你用一个物理像素去呈现边框。这时候就会用到缩放的问题了）。其他的我感觉你需要去看一下，移动浏览器对pc页面(就是没做任何处理的页面)是怎么做的适应性显示和meta头的具体作用。想搞明白的话只看适配方案是不行的。
你的第二个问题。
没有理解rem适配的作用或者说目的。
你没有发现在不同分辨率下的你的页面的结构不是等比例的吗，有些间距是不同的，正是因为元素尺寸没有跟随分辨率改变引起的。