单位

最新推荐文章于 2022-07-04 21:52:47 发布

qq_38068491

最新推荐文章于 2022-07-04 21:52:47 发布

阅读量176

点赞数

本文链接：https://blog.csdn.net/qq_38068491/article/details/82715558

版权

一、单位
1、默认字体大小：16px；1rem=16px；
px,em,pt,rem 1pt=12px；
2、rem是一个单位，相对于根元素（html）定义
html{font-size: 12px;},n那么：1rem = 12px;
html{font-size: 14px;},n那么：1rem = 14px;
3、em 相对父元素（body）去定义
body{font-size: 12px;},n那么：1em = 12px;
body{font-size: 14px;},n那么：1em = 14px;
4、如果你们手机是320px的，那么截图出来尺寸是640px;
dpr:像素比
dpr=物理像素（750px） / 逻辑像素(375px，我们去布局写的尺寸) =2
逻辑像素 = 物理像素 / dpr;
dpr的取值：如果的设计图是640px ,750px 的时候 dpr= 2
如果你的设计图为1080的时候，那么dpr=3；

5、rem结合媒体查询
<style>
@media all and (min-width:320px) {
html {
font-size: 12px;
}
}

@media all and (min-width:375px) {
html {
font-size: 14px;
}
}

@media all and (min-width:414px) {
html {
font-size: 16px;
}
}

div {
width: 10rem;
height: 10rem;
background: #ccc;
float: left;
}
</style>
</head>

</body>
6.
vw：viewpoint width；视口的宽度
1vw=视口的width的1%。
（一般不使用vh）vw：viewpoint height；视口的高度
1vw=视口的height的1%。
7.移动端布局一般使用
方法一：rem+媒体查询+弹性盒
方法二：vw+rem+弹性盒
(1)如果设计图为750px drp = 2 -> 375px(逻辑像素)
给html设置font-size：26.67vw;
给body设置{font-size：16px；}
下面布局的尺寸：90px（量出来的尺寸） / dpr(2) = 45px(逻辑像素)；
我们ren写多少：45/100= 0.45rem;

(2)如果设计图为640px drp = 2 -> 320px(逻辑像素)
给html设置font-size：31.25vw;
给body设置{font-size：16px；}
下面布局的尺寸：90px（量出来的尺寸） / dpr(2) = 45px(逻辑像素)；
我们ren写多少：45/100= 0.45rem;

(3)如果设计图为1080px drp = 3 -> 360px(逻辑像素)
给html设置font-size：27.78vw;
给body设置{font-size：16px；}
下面布局的尺寸：90px（量出来的尺寸） / dpr(3) = 30px(逻辑像素)；
我们ren写多少：30/100= 0.3rem;
注意：给html设置
<style>
html {
/* font-size:100px; */
font-size: 26.7vw;
}
body{
font-size：0.16rem;
}
div {
width: 1rem;
height: 1rem;
background: red;
}
</style>

qq_38068491

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
单位

一、单位1、默认字体大小：16px；1rem=16px；px,em,pt,rem 1pt=12px；2、rem是一个单位，相对于根元素（html）定义html{font-size: 12px;},n那么：1rem = 12px;html{font-size: 14px;},n那么：1rem = 14px;3、em 相对父元素（body）去定义body{font-size: 12p...
复制链接

扫一扫