关于移动端

视口

总共可分为3个视口：布局视口，视觉视口，理想视口

布局视口：
1. 一般移动设备的浏览器都默认设置一个布局视口，用于解决早起的PC端页面在手机上显示的问题
2. 这个视口的分辨率基本都设置为980px

视觉视口：
用户所看到的网站区域

理想视口：
使得网站在移动端有最理想的浏览和阅读宽度而设定的，是最理想的视口尺寸
要手动添加meta视口标签，主要目的：布局视口的宽度应该与理想视口的宽度一致
meta标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
一些属性值说明：（更多属性说明可到w3c，mdn等官网查询）

一些手机设备的物理像素比(dpr)

物理像素比 = 物理像素 / 逻辑像素 
物理像素：就是设备所显示的像素（手机截图在ps中量取出来的大小）
逻辑像素：页面在css页面中书写的像素

由于在手机设备中，会对物理像素放大倍数，就会导致图片模糊
所以就要用到倍图

移动端的css样式初始化文件

normailze.css（下载地址：https://necolas.github.io/normalize.css/）

单独制作移动端的页面

流式布局

流式布局是百分比布局
设置盒子宽度的百分比来根据屏幕宽度进行缩放，不受固定像素影响，内容向两侧填充
要设置盒子的max-width，min-width（保证其缩放在合理范围内）

flex布局（推荐）

flex能为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局
对父容器设置的属性：

对子项设置的属性：

适配布局（推荐）

在移动端中的内容按照不同屏幕大小自动等比例缩放的一种布局计算方式
能够随着屏幕大小而自适应去变化，元素的高度和宽度等比例缩放

rem单位：
em单位和rem单位的区别：
em是相对父元素的字体大小，rem是相对根元素（html元素）的字体大小
优点：可通过修改html里面的文字大小来改变页面中的元素大小，可以实现整体控制


媒体查询（CSS3新语法）：
使用@media查询，可针对不同的媒体类型定义不同的样式
               可针对不同的屏幕尺寸设置不同的样式
               重置浏览器大小时，页面会根据浏览器的宽高度重新渲染页面

语法：
@media mediatype(媒体类型) and/not/only (media feature 媒体特性){...} 
mediatype的取值：
all(所有设备)，print(打印设备)，screen(电脑屏幕，平板，手机等)
关键字：
and：可将多个媒体特性连接到一起
not 排除某个媒体类型
only：指定某个特定的媒体类型
媒体特性：
1) width：输出设备中页面可见区域的宽度
2) min-width：输出设备中页面最小可见区域的宽度
3) max-width：输出设备中页面最大可见区域的宽度
e.g.
@media screen and (max-width:500px){...}    //在屏幕上页面最大的宽度是500px，在页面宽度为500px内设置的样式才会生效（样式只在屏幕宽度小于等于500像素才生效）

@media screen and (min-width:500px) and (max-width:1000px){...}    //在屏幕上页面宽度为500px到1000px，设置的样式生效

媒体查询一般按照从大到小或者从小到大的顺序来去设置（最好是从小到大设置）

针对不同的媒体引入对应不同的CSS文件（直接在link判断设备的尺寸，然后引入不同的CSS文件）
<link rel="stylesheet" media="mediatype and/only/not (media feature)" href="xxx">


rem和媒体查询配合使用：
利用媒体查询和rem能实现页面的元素动态大小变化
e.g.

rem适配方案：
按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小
CSS中，设计稿元素的宽，高，相对位置等的取值，按照同等比例换算为rem单位的值

1. rem + 媒体查询 + less
元素大小的rem取值：
公式：页面元素的rem值=页面元素的像素值(px) / (屏幕宽度 / 划分的份数)
（屏幕宽度 / 划分的份数 就是html的font-size大小，其中划分的份数自定义（一般为10,15））

2. flexible.js + rem
元素大小的rem取值：页面元素的px值 / (屏幕宽度 / 10)
（划分的份数默认划分10等份，根元素的font-size会自动计算出来）

可利用vscode的px to rem & rpx (cssrem)插件，px自动转换rem

响应式页面兼容移动端

响应式布局

根据浏览器宽度，分辨率，横屏，竖屏等情况来自动改变元素展示的一种布局方式
一个页面能够兼容多个终端

使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的

响应式开发设备屏幕尺寸划分：

要有一个响应式布局的容器，显示的子元素按照这个容器的大小而显示相应的大小排列

平时的响应式尺寸划分：（设置的宽度比屏幕要小一点是为了中间区域居中，两侧空白，好看一点）

可通过使用bootstrap框架设计响应式布局