rem非常正常显示大小
目前测试的情况
现象1:
| 在浏览器里对overflow,display操作会在运行环境下恢复正常
| 但是如果直接写到代码里面,运行起来还是有问题
现象2:
| 如果给它的父元素设置固定高度,一切就恢复正常了,并且写入代码刷新也显示正常
| 但如果是往上三级,父元素的父父级设置就没效果
目前这种情况设置高度可以解决大部分情况下的需求。但问题是:在考虑元素内部是多行文字无法确定高度的情况时,就没办法了……
只求搞明白这种现象到底是怎么回事……
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1,user-scalable=no">
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var meta=document.createElement('meta')
meta.setAttribute('name','viewport')
meta.setAttribute('content','initial-scale='+1/devicePixelRatio+',user-scalable=no')
document.querySelector('head').appendChild(meta)
function setRem(){
var remDefault=document.documentElement.style.fontSize = window.innerWidth/3.75 + 'px';
}
setRem()
window.onresize=setRem
</script>
<style>
.h1 {
font-size: 0.16rem;
}
p {
font-size: 0.12rem;
}
</style>
</head>
<body>
<div class="h1">
以上的测试我发现:当文档出现换行的时候,这个问题才会出现,以上案例里的p就出现了这种情况:预期是24px 但是最终计算得到的是36px
<p>以上的测试我发现:当文档出现换行的时候,这个问题才会出现,以上案例里的p就出现了这种情况:预期是24px 但是最终计算得到的是36px</p>
</div>
</body>
</html>
以上的测试我发现:当文档出现换行的时候,这个问题才会出现,以上案例里的p就出现了这种情况:预期是24px 但是最终计算得到的是36px
我自己琢磨了一种方法:在rem难以控制的地方,用百分比来处理。(效果依旧在不可控范围内:有些正确,有些不正确)
这个方案只是当初淘宝设计的flexible的简化方案,并且已经在当前项目中使用。所以替换成最新版本的已经来不及了……
说一下我最终的解决方案:
对于段落文本以及参照当初淘宝给出的方案,用dpr判断,然后css写适配来完成。
详细地址:https://www.w3cplus.com/mobil...