一般绝对定位的header需要px设置成rem吗？
没有引进屏幕适配以及正常设置height:54px 显示的效果。
设置height:1.35rem 时候就会变成扁平了。这时候也没有引入屏幕适配
最后引入屏幕适配以及height:1.35rem。都是扁平的。
有点懵了，对屏幕适配。这怎么弄？按设计图的尺寸设置小图标都会出去红色之外。除非height:54px，且没有设置屏幕适配
尝试过的解决方式：
css 引进这个：
[data-dpr='2'] body,
[data-dpr='2'] a,
[data-dpr='2'] i{
font-size: 28px;
}
[data-dpr='3'] body,
[data-dpr='3'] a,
[data-dpr='3'] i{
font-size: 42px;
}
好像也不得。
这是详情页header
正在回答
同学你好，开发移动端项目，一般涉及到大小尺寸的都建议使用rem作为单位，除非屏幕变化时，有些元素的尺寸改变特别微小，不容易察觉，可以使用px为单位，因此，header部分建议使用rem为单位。
老师目前不知道同学是如何引入的屏幕适配代码，建议同学先打开“开发者工具”，检查一下设置为rem后，换算的像素数是否正确，如图
注意：移动端屏幕尺寸要与设计图保持一致，而且换算的rem也要正确。
如果换算的像素数不正确，应该是引入的屏幕适配代码有问题，或者rem换算有问题，同学可以把相关的代码，粘贴上来，老师测试一下。
祝学习愉快！
-
要每天学习的小蓝同学 #1
<div class="header-layout">
<div class="header">
<i class="iconfont icon-return"></i>
<div>
<i class="iconfont icon-collect"></i>
<a href="javascript:;">
<i class="iconfont icon-share"></i>
</a>
</div>
</div>
</div>
.header-layout {
position: fixed;
left: 0;
top: 0;
z-index: 1000;
width: 100%;
height: 54px;
}
.header {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
transition: background 0.5s;
background-color: red;
}
.header-transition {
background-color:rgba(25,196,138,0.9);
}
(function () {
// 严格模式
'use strict';
// 以下这块是通用适配原理
// dpr-> scale=1/dpr
var docEl = document.documentElement;
var viewportEl = document.querySelector('meta[name="viewport"]');
var dpr = window.devicePixelRatio || 1;
var maxWidth = 540;
var minWidth = 320;
dpr = dpr >= 3 ? 3 : (dpr >= 2 ? 2 : 1);
docEl.setAttribute('data-dpr', dpr);
docEl.setAttribute('max-width', maxWidth);
docEl.setAttribute('min-width', minWidth);
var scale = 1 / dpr;
var content = "width=device-width, initial-scale=" + scale + ",maximum-scale=" + scale + ",minimum-scale=" + scale + ",user-scalable=no";
if (viewportEl) {
viewportEl.setAttribute('content', content);
} else {
viewportEl = document.createElement('meta');
viewportEl.setAttribute('name', 'viewport');
viewportEl.setAttribute('content', content);
document.head.appendChild(viewportEl);
}
// 以下是核心原理
setRemUnit();
window.addEventListener('resize', setRemUnit);
function setRemUnit() {
var ratio = 18.75;
var viewWidth = docEl.getBoundingClientRect().width || window.innerWidth;
// console.log(viewWidth);
if (maxWidth && (viewWidth / dpr > maxWidth)) {
viewWidth = maxWidth * dpr;
} else if (minWidth && (viewWidth / dpr < minWidth)) {
viewWidth = minWidth * dpr;
}
docEl.style.fontSize = viewWidth / ratio + 'px';
}
})();
这些是有两个公共样式，项目有
import 'styles/reset.css'; //重置样式(多网页共用)
import 'styles/base.css'; //公共样式（自己的网页使用）
import './details.css';
import 'icons/iconfont.css';
// 屏幕适配
import './flexible';
2021-11-22 20:14:57 -
同学你好，老师这边测试了一下，引入屏幕适配文件后，height设置为1.35rem与54px，其效果是一样的（此时屏幕宽为375px），如图
而且height设为1.35rem后，随着屏幕宽度的变化，height也会相应变化，如图
所以，同学对于屏幕适配的使用是没问题的，如果感觉太扁的话，可以适当调整一下，不需要太纠结这个问题。
祝学习愉快！
2021-11-23 11:27:33
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星