rem布局 · 2021 web前端工程师

[TOC] 怎屏幕发生变化的时候元素高度和宽度等比例缩放 # 1、rem单位 ![](https://img.kancloud.cn/20/7a/207a582c62b3eccd61a753c8c250b55a_1133x240.png) ## 说明 | 1、![](https://img.kancloud.cn/99/19/9919b16a97e30b4ea02a974d6b9a56d2_856x461.png) | ![](https://img.kancloud.cn/60/38/60380fab1db26e8124e211501bfb1c9e_1360x381.png) | | --- | --- | | html{font-size: 12px; } 2.rem相对于htm1元素字体大小来说的width: 10rem; height: 10rem; background-color:■pink; | 2.rem相对于htm1元素字体大小来说的width: 10rem; height: 10rem; background-color:■pink; | # 2、媒体查询 ![](https://img.kancloud.cn/2f/da/2fda16ec8773c0571346c6161aea75eb_947x360.png) ## 2.1媒体查询语法规范 ![](https://img.kancloud.cn/64/54/6454b120c6fe92c8f7ca8a2d1131b833_956x526.png) ### 1、mediatype 查询类型 ![](https://img.kancloud.cn/d1/7b/d17b9e2de5976aae9d3bd0bfff9e289d_1112x444.png) ### 2、关键字 ![](https://img.kancloud.cn/65/7d/657dfcd281ff3727a2914a0bf9ee356c_838x367.png) ### 3、媒体特性（定义可见区域） ![](https://img.kancloud.cn/a3/db/a3db406c226f6ab37ff2f0cfe88a9d5d_1250x529.png) ## 媒体查询讲解 ![](https://img.kancloud.cn/dc/37/dc37748c1786847598793c9d882fbf1a_1366x612.png) 根据页面宽度改变背景颜色实现思路 ![](https://img.kancloud.cn/ae/89/ae89a0b42348dda455aee995edb78f9b_1134x292.png) screen还有and 必须带上不能省略的 | ![](https://img.kancloud.cn/ff/b9/ffb9d6454beb778ba4fd4484d6c09228_593x641.png) | ![](https://img.kancloud.cn/28/96/2896dc0cd9a036c87482b69444f9585f_801x650.png) | ![](https://img.kancloud.cn/bf/de/bfde7bee548d93a2de27c9060673daeb_1144x640.png) | | --- | --- | --- | | ![](https://img.kancloud.cn/da/1b/da1b92d746098591bcd7b0f3d5cea216_921x320.png) | ![](https://img.kancloud.cn/5e/a4/5ea4d2cb8ae4776f8c09e19e2871e611_1141x285.png)2、![](https://img.kancloud.cn/8a/f0/8af0046bc7aa589b85745111cefdae20_858x278.png) | ![](https://img.kancloud.cn/07/d3/07d3060573d2e301f4a4e579ba0d1549_831x285.png) | ## 4引入资源(理解) ### 引入资源就是针对于不同的屏幕尺寸调用不同的css文件当样式比较繁多的时候,我们可以针对不同的媒体使用不同stylesheets (样式表)。原理,就是直接在link中判断设备的尺寸,然后引用不同的css文件。 1.语法规范 ~~~ <link rel="stylesheet" media="mediatype and|not I only (media feature) ”href="mystylesheet .css"> ~~~ ![](https://img.kancloud.cn/52/cb/52cb175a33d9f697fd87a527f08ddb66_1527x270.png) ![](https://img.kancloud.cn/c3/e2/c3e27ecb2cd5c0cee57f5be35702953a_1454x376.png)