HTML移动端适配

1.手机端属于说明

​ 物理像素：屏幕出厂就确定的

​ css像素：；逻辑像素，css里面的px单位

​ dpr设备像素比：物理像素/逻辑像素

​ 理想视口的设置：

<meta name="viewport" content="width=device-width， initial-scale=1.0">

2.响应式

​ 一套代码，能够适配多个平台，不论大小屏幕尺寸或者设备类型都能显示比较正常的效果

原理:利用媒体查询 @media

3.移动端适配

​ 1.使用百分比。

​ 2.使用rem+js的方式

​ 默认情况1rem = 16px;

​ 项目中：x设计稿/设置文字大小 =750/100

​ 应该给html设置的文字大小=量取的设计稿的宽度*100 / 750

​ 设计稿中的元素的尺寸=量取的尺寸/ 10[转换成rem的公式]

1.使用pxtorem插件完成单位的转换【注意记得修改插件中html的文字大小】

2.引入js文件-实现根据屏幕大小调整html文字大小的功能

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

3.使用vw和vh单位

​ 视口的宽度，默认100vw；

​ 视口的高度，默认100vh；

4.多列布局

​ column-width：*px；每列的宽度

​ column-count：*px 分割的列数

​ column-rule：*px 线型 颜色

​ column-gap：*px；列间隔