一，了解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文件：
如果觉得《媒体查询（黑马笔记）-移动端布局rem》对你有帮助，请点赞、收藏，并留下你的观点哦！
