一,了解px,em,rem的区别
- px:像素
- em:长度单位,基准是父元素的font-size值大小。
- rem:长度单位,基准是html的font-size值大小。
二,媒体查询
一旦采用rem布局, 屏幕上的元素大小就会和html的字体大小相联系起来,也就是说,html的字体一变化,全局元素就会随之变化。
但是存在一个问题,屏幕不同的情况下,如何去变化这个字体大小,从而引发全局重新渲染呢?
这就要引入媒体查询的概念:
媒体查询可以根据不同的屏幕尺寸,选用不同的样式!
语法规范如下:
例如:当屏幕尺寸变化时,采用对应尺寸的样式
<style type="text/css">
@media screen and (max-width:900px){
body{
background: red;
}
}
@media screen and (max-width:800px){
body{
background: green;
}
}
@media screen and (max-width:700px){
body{
background: yellow;
}
}
</style>
三,媒体查询+rem就可以实现元素的动态变化了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
@media screen and (min-width:320px){
html{
font-size: 50px;
}
}
@media screen and (min-width:640px){
html{
font-size: 100px;
}
}
.top{
height: 1rem;
font-size: 0.5rem;
background-color: green;
color: #fff;
text-align: center;
line-height: 1rem;
}
</style>
</head>
<body>
<div class="top">购物车</div>
</body>
</html>
实现的两档变化:
四,引入资源
实际上就是准备多套css文件,当条件变化至满足某个条件时,就调用对应的css文件: