什么是响应式布局？响应式布局有几种方法？

目录

什么是响应式布局？

响应式布局的4种方法

媒体查询

百分比

vw/vh

rem

---

什么是响应式布局？

响应式布局是同一页面在不同的屏幕上有不同的布局，即只需要一套代码使页面适应不同的屏幕

响应式布局的4种方法

媒体查询

使用@media可以根据不同的屏幕定义不同的样式，具体代码如下图：

         

百分比

 百分比是相对于包含块的计量单位，通过对属性设置百分比来适应不同的屏幕

           包含块：

            1. 有父元素相对于父元素

            2. 无父元素相对于视口

            3. 或者继承于父元素

vw/vh

vw/vh是视口单位，即根据浏览器的窗口大小进行适配

rem

 rem（font size of the root element）是指相对于根元素的字体大小的单位，rem只是一个相对单位

           题外： rem和em的对比

                1. rem和em都是相对单位

                2. rem相对于根元素

                3. em相对于父元素

           情景描述：

           1. 设置HTML的根元素的font-size为20px

           2. 设置红色的正方形宽高为2rem

           3. 设置绿色的正方形宽高为40px

           4. 从图中可以看出两个正方形一样宽高

           5. 所以1rem === 根元素字号 === 20px ,具体代码如下

 

项目中如何方便的使用的rem呢？

设想一个场景，如果一个元素的宽需要47px,根元素是20px,如果要适应不同的终端，需要转为rem，除以20px得到相应的rem值,很麻烦，那么就需要找一个可以简单计算的数值，下面就是一个方法呦

1. 设想屏幕宽度为750px，设计稿宽度也为750px

2.设置 font-size = 1rem = 屏幕宽度*100/设计稿宽度 = 100px (乘以100的原因，屏幕宽度/设计稿宽度得出的值是1，而浏览器可以接受的最小字号12px，所以乘以100既可以满足浏览器最小字号的要求，也比较好计算)

3. 屏幕宽度不会只是750px，假设屏幕宽度为width(getBoundingClientRect().width可以获取宽度)，在该宽度下的字号为fontSize

4. 

5. 通过上面这个方法可以计算出fontSize的值

 

刚刚接触CSDN，有不足还请指出哦~，大家一起讨论