适配 --- 原始css（rem）
一、移动适配
概念
设备宽度改变的时候，网页元素宽高随之变化
市面上流行的适配方案
rem目前大多数企业在用的解决方案vh/vw未来的解决方案
二、rem
rem就是一个相对单位px无法完成自动适配， 百分比只能使宽度自动适配， 高度还需要给固定的值
1. rem单位
root emrem单位是相对html表外你的字号计算得来的，1rem = 1HTML 字号的大小
2.rem的基本使用
- 注意： 相对于根元素 所以一定要先设置 根元素的字号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>rem的基本使用</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
font-size: 10px;
/* font-size: 20px; */ // 此处切换修改，在网页观看样式变化
}
.content {
width: 10rem;
height: 10rem;
background-color: purple;
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
3.rem完成适配
1. 手机屏幕宽度不同，分辨率不同，设置不同的HTML标签字号
@media
- 媒体查询; 媒体查询可以检测视口的宽度，然后编写CSS样式，根据设置的条件，渲染对应的样式
语法:
@media (媒体特性) {
选择器 {
css属性
}
}
@media (width: 500px) {
html {
font-size: 30px;
}
}
- 当视口宽度等于
500px的时候,就生效，反之，不生效
多个媒体查询
@media (width: 500px) {
html {
font-size: 50px;
}
}
@media (width: 750px) {
html {
font-size: 750px;
}
}
@media (width: 1000px) {
html {
font-size: 100px;
}
}
目前流行的 rem布局
- 将网页分成10份，
HTML的宽度为视口宽度的1/10 - 根据视口的宽度，设置不同的
HTML标签的字号大小 - 比如设计稿的宽度为
750px,1/10就是75px,HTML的font-size就等于75px
