dpr物理像素比:设备像素 (设计图的像素 640px等)/ 逻辑像素(CSS像素,在调试窗口看到的 320px等)
dpr = 设计图的640 / 逻辑像素 320 = 2
因此假如你在ps量取到的88px,它的逻辑像素为 88 / 2 = 44px
然后根据html中的字体大小(通过媒体查询控制),有着
@media all and (max-width:320px){ html{font-size:12px}}
@media all and (min-width:321px) and (max-width:375px){ html{font-size:14px}}
所以 它的rem值为 =》 44px / 12px = 3.67rem
由于这些除法有着大约值,因此大小有着出入,因此引出了vw结合rem布局
rem是跟随html的字体大小变化而变化的
假如html的字体大小为12px,证明1rem=12px
1vw = 1% 的视口宽度
100vm = 100% 的视口宽度
(1):rem与vw的推理
1vw == 视口的宽度 1% 100vw == 100%
1vh == 视口的高度 1% 100vh == 100%
设计图为640px 750px 1080px
其中dpr为2 2 3
假如设计为750px为例子:
那么750 / 2 = 375px ---也就是调试窗口看到逻辑像素--也就是视口完整为375px
所以啊 375px = 100vw
推出 100px = 26.67vw (给html设置为26.67vw也就是100px,为何不直接,因为vw可变,px直接固定了)
因此需要把750px设计图为标准,给html的文字大小设置为26,67vw(也就是100px),那么在375px的调试窗口下显示的88px(ps量取的)下为44px,在320px之中,显得小一些,在比375px大的显得大一些,这就是所谓的适配。
那么640的设计图时候
640px / 2 = 320 px;
100 vw = 320px;
最后推出==》 100px = 31.25vw
由于rem的值是 1rem = html文字大小的值(这边设置的100px = 31.25vw)
那么也就是说,你在ps量取到的值假如为88px drp为2
88px / 2 = 44px
44px / 100 = 0.44rem;
注意点:文字大小的话,则需要通过媒体查询来控制其大小,这是通过具体的标签来修改的,比如@media all and (max-width:320px) { header{font-size:14px}}
(2):大体的实现rem结合vw实现布局
HTML
<header>文本</header>
<nav>我是</nav>
<main></main>
<footer></footer>
CSS
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
html {
font-size: 26.67vw;
}
header {
height: 0.44rem;
background: yellow;
}
nav {
height: 0.38rem;
background: pink;
}
main {
flex: 1;
}
footer {
height: 0.44rem;
background: pink;
}
@media all and (max-width: 320px) {
header,
nav,
main,
footer {
font-size: 12px;
}
}
@media all and (min-width: 321px) and (max-width: 375px) {
header,
nav,
main,
footer {
font-size: 14px;
}
}
</style>