响应式&多列布局

1.响应式

1.概念

能够根据屏幕尺寸/设备类型/分辨率，自动调整布局，实现一个比较正常的效果。

一套代码适配多个终端。

2.原理

利用媒体查询

3.关键字

@media

2.移动端适配

1.设置移动端视口

1.物理像素，设备像素：屏幕自身决定的

2.CSS像素，逻辑像素：css中使用的像素

3.设备像素比dpr （长度上的比值）= 物理像素/逻辑像素

需要设置视口：

<meta name="viewport" content="width（宽度）=device-width, initial-scale（初始的缩放比例）=1.0">

2.移动端适配

1.使用百分比布局（等比例放大缩小）

2.使用rem单位+js实现

​ rem：基于html文字大小的倍数

​ 约定750px的设备，html 文字的大小为100px，即1rem=100px;

如果是其他尺寸的设备，就应该按照750px/100px的比例去设置html的文字大小。

设备尺寸/html的文字=750/100

应该设置的html文字大小=设备的像素/7.5

1rem=16px

实际实现：

1.量到多少就设置多少尺寸

2.使用插件，一键转换单位px为rem【注意修改html文字大小-750的设计稿中html的大小应该为100px】

3.引入js文件，动态根据窗口大小，调整html文字大小，以实现适配

<script src='js文件路径'></script>

在js文件中，最后一行的数字（designWidth,maxWidth）为设计稿宽度，设定的页面最大宽度

3.使用vw,vh

视口的宽度=100vw

视口的高度=100vh

vw是一种单位，视口的宽度就是100vw

​ 视口的高度就是100vh

应用：实现整屏界面

3.多列布局

1.设置列数、

column-count:*;

2.设置列宽

column-width:*px;

3.设置列间隔

column-gap:*px;

4.设置列边框

column-rule:*px 线形 颜色;