CSS响应式布局

目录

rem单位

媒体查询

rem + 媒体查询

rem适配方案（了解）

响应式布局总结

---

rem单位

1.设置文字大小的单位

1. px：设置为固定的css像素

2. em：相对于父元素字体的大小

3. %：相对于父元素字体的大小

4. rem：相对于根元素（html）的字体大小

2.设置宽度的单位

• px：设置为固定的css像素

• em:

  1. 如果自身有font-size，em相对于自己的font-size

  2. 如果自身没有font-size，em相对于父元素的font-size

• %：相对于父元素的宽度大小

• rem：相对于根元素（html）的字体大小

3.总结：**rem单位永远相相对于根元素（html）的字体大小

 html {
     font-size: 12px;
 }
 ​
 div {
     font-size: 2rem; /* 24px */
     width: 5rem;  /* 60px */
     background-color: skyblue;
 }

媒体查询

1. 媒体查询（Media Query）是CSS3新语法。

   1. 使用 @media 查询，可以针对不同的媒体类型定义不同的样式

   2. @media 可以针对不同的屏幕尺寸设置不同的样式

   3. 使用@media才能够实现页面响应式布局

2. 媒体查询语法规范：

3.  @media mediatype and|not|only (media feature) {
        CSS-Code;
    }

4. 媒体类型：all(所有设备)、screen(用于电脑屏幕，平板电脑，智能手机等。)

5. media feature：

   • width(浏览器的窗口尺寸，可加min/max)

   • device-width(设备的参数尺寸，可加min/max)

6. min-width和max-width

   • min-width：最小宽度，在媒体查询中，宽度大于或者等于最小宽度时，就触发其CSS样式

• max-width：最大宽度，在媒体查询中，宽度小于或者等于最大宽度时，就触发其CSS样式

媒体查询一般写四套设备方案，在编写媒体查询时注意顺序(从小到大)，后者符合条件的媒体查询会覆盖前者

rem + 媒体查询

1. 媒体查询 + rem实现元素动态大小变化

   • rem单位是相对于html元素的字体大小的，我们可以将元素所有的css单位都设置为rem单位

   • 通过媒体查询，可以根据不同的屏幕宽度设置不同的HTML元素的字体大小，以此达到页面元素大小的动态变化

2. 引入媒体查询的css文件资源

3. 针对于不同的屏幕尺寸 调用不同的css文件

 <link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">

rem适配方案（了解）

1. 核心：使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位

   当html字体大小变化。元素尺寸也会发生变化，从而达到等比缩放的适配

2. rem适配方案流程：

   1. 按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 font-size 大小；（媒体查询)

   2. CSS 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位的值

3. rem适配方案的技术选择

   

4. 核心：rem + 媒体查询 + less 技术

5. 动态设置 html 标签 font-size 大小

   ① 假设设备宽度是750px

   ② 假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）

   ③ 每一份作为html字体大小，这里就是50px

   ④ 那么在320px设备的时候，html元素的字体大小为320/15 就是 21.33px

   ⑤ 用我们页面元素的大小 除以不同的 html 字体大小会发现他们比例还是相同的

   ⑥ 但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果

6. 元素中的rem单位取值

   1. 公式： 页面元素的rem值 = 页面元素值（px） / html font-size 字体大小

响应式布局总结

实现思路：

1. 一般都是先实现PC端页面，然后再去做其他设备的兼容

2. 设置宽度时，最好不要写死(px)，而是用%单位参照父元素的大小

3. 设置最外层容器时，用vw, vh作单位

4. 不同设备需要换行显示时，使用flex-direction:columns;

5. 导航条一定条件下，显示隐藏

6. 内边距和外边距还有高度可以适当的用px单位

7. 媒体查询时，主要的改变有：换行显示、隐藏，其余都是小改动，比如font-size, margin等等