- 不是响应式
- 动态rem的效果就是一套CSS
- 虚拟像素和物理像素
- rem相对于root font-size
- root font-size的大小为屏幕虚拟像素的宽度
<head><script>
document.write(`
<style>
html{
font-size:${document.documentElement.clientWidth/10}px;
}
</style>
`)
</script></head>
动态的等分的横向格子
HTML
ul<li*4
CSS
ul{display:flex}
li{width:2.5rem;text-align:center;font-size:1,23rem}
- vh,vw屏幕虚拟宽高的百分比
- 1px物理像素边框方案-动态rem自适应
只让边框为物理1px
px为单位的属性缩小n倍
rem为单位的属性缩小n倍，放大n倍
window.devicePixeRatio
//得出物理像素相对于虚拟像素的n倍
1px物理像素边框
HTML
<script>
var scale = 1/window.devicePixeRatio///1\2\3
document.write(`
<meta name="viewport" content="initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale},user-scalable=no">
`)
var width = document.documentElement.clientWidth
//获取缩放前的文档宽度，相当于被缩放比缩放后再还原的宽度
var css = `
himt{font-size:${width/10}px;
`
document.write(`<style>${css}</style>`)
<script>
ul>li*4
CSS
*{margin:0;padding:0;box-sizing:border-box;}
ul{list-style:none;}
body{font-size:0.4rem;}
ul{
display:flex;
border-top:1px solid;
border-left:1px solid;
border-bottom:1px solid;
}
li{
width:2.5rem;
line-height:1.25rem;
border-right:1px solid;
text-align:center;
}
安卓低版本UC浏览器可能不兼容
网友评论