移动端网页布局基础

现在开发的最多的就是移动端的项目。
PC端的相对来说太少了。

自适应

什么是自适应？

自适应的意思就是在不同屏幕尺寸大小的手机上，看见我们开发出来的网页是一样的。（这和响应式不是一个东西，不要弄混淆）

在说怎么实现之前先来了解一些移动端的概念：
px、英寸、ppi、dpi、dpr

Px

Pixel，像素。分为真实像素，和逻辑像素（CSS像素）。

英寸

1英寸 = 2.54 厘米（1 in = 2.54 cm）

比如坚果Pro2S，屏幕6.01英寸，意思就是手机屏幕对角线的长度为6.01英寸（6.01 * 2.54 = 15.2654 cm ）。

PPI

Pixels Per Inch，简称PPI，屏幕像素密度。指的是1英寸上的像素点数量。PPI越高，显示画面越精细。

DPI

Dots Per Inch，简称DPI。指的是1英寸上点的数量，没错就是点。如鼠标的DPI...设备的DPI意思就是设备会把多么远的两个点当作一个点来处理。

DPR

Device Pixel Ratio，设备像素比。指的是默认缩放为100%的情况下，设备真实像素和CSS像素的比值。

以iphone8为例，iphone8的CSS像素为375px * 677px，其设备像素为750px * 1354px，所以DPR等于7501354 / 375677 的结果4，再开平方，最后DPR = 2

怎么实现自适应

1. 视口 viewport

viewport 意为视口。我们需要把浏览器的视口宽度设置为设备的屏幕宽度，一些智能的编辑器，会默认帮我们生成它。

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

这是一个存在于html头部中的meta标签，content=“视口宽度=设备屏幕宽度，默认缩放比例=1”

2. 单位

移动端开发使用的单位不再是固定的px，而是rem（em并不是很实用）、百分比、vw。

百分比：就是父元素宽高的百分之几，移动端开发的时候我们通常将html、body宽高设置为100%。

rem：根据根元素（也就是html标签）的font-size数值来计算，默认浏览器font-size 是16px，移动端开发的时候我们会使用媒体查询或者JavaScript动态的计算和改变html标签的font-size值。

vw：将屏幕宽度分为100份，1vw = 一份。

3. 常见的页面结构

移动端常见的就是头部标题、底部菜单栏固定，中间内容上下滚动。

可以直接给需要固定的地方设置固定定位。

也可以给body设置弹性盒(html、body宽高100%)

display: flex；
flex-direction: column;
justify-content: space-between;

然后给中间用来装内容的section区域设置flex:1（中间的内容都是装在一个大的section容器里面的，我们看见的页面上下滚动其实是在section容器里面滚动）

flex: 1;
overflow-y: auto;

overflow-y 设置当section中的内容高度超过了它时怎么办？auto意思是超过就自动出现滚动条，上下滚动。auto换成scroll也可以。