rem
认识
优点：
可以适应不同大小的屏幕
使用px或者百分比布局不能实现：
- px单位时绝对单位
- 百分比布局是宽度自适应，高度固定的
rem使用
rem使用时需要配合:
- 媒体查询
- flexible.js(推荐使用⭐)
rem 单位
- 相对单位
- 相对于HTML标签的字号计算结果
- 1 rem = 1 HTML字号大小
媒体查询
作用
能够检测视口宽度，根据不同的视口宽度设置不同的html字号大小
HTML字号取值
不同的视口宽度，设置不同的HTML字体大小，取值为视口宽度的1/10
语法
@media (媒体特性) {
选择器 {
css属性；
}
}
例如：
@media(width:320px) {
html {
font-size: 32px;
}
}
@media(width:375px) {
html {
font-size: 37.5px;
}
}
.box {
width: 2rem;
height: 2rem;
background-color: red;
}
注意：
如果电脑显示的缩放为125%，那么给媒体特性设置宽度时只设置手机型号的宽度不起作用。（因为电脑显示的手机宽度是 ：125%×真实手机宽度）
媒体特性常用写法
- max-width 从小到大
- min-width 从大到小
/* max-width 从小到大
min-widrh 从大到小 */
/* 视口宽度 >= 768px，网页背景色是 粉色 */
@media (min-width : 768px) {
body {
background-color: pink;
}
}
/* 视口宽度 >= 992px，网页背景色是 绿色 */
@media (min-width : 992px) {
body {
background-color: lightgreen;
}
}
/* 视口宽度 >= 1200px，网页背景色是 skyblue */
@media (min-width : 1200px) {
body {
background-color: skyblue;
}
}
rem单位尺寸
-
确定设计稿对应的HTML标签字号
- 查看设计稿宽度
- 确定参考设备宽度（视口宽度）一般参考375px
- 确定基准根字号（1/10视口宽度）
-
rem单位 = px数值/基准根字号值 ，取小数点后4位
flexible
动态的检测手机大小，给网页中html根节点设置不同的font-size。
相比较媒体查询，优点：
- 减少代码量
- 适配所有类型手机
- 不用担心电脑显示的缩放
<style>
.box {
/* 盒子大小:
宽 = 68 / 37.5
高 = 29 / 37.5
*/
width: 1.8133rem;
height: 0.7733rem;
background-color: green;
}
</style>
</head>
<body>
<div class="box"></div>
<script src="./js/flexible.js"></script>
</body>
1633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
