移动端页面布局基础

1.移动端现状

现在移动端设备屏幕尺寸非常多，碎片化严重，不利于我们布局。但是浏览器的内核基本上是webkit，所以只需要解决webkit兼容性问题即可。

2.视口

视口（viewport)就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口，视觉视口和理想视口。

2.1 布局视口 layout viewport

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早起PC端页面在手机上显示的问题。

IOS,Android基本上都将这个视口的分辨率设置为980px，所以pc上的页面大多都能在手机呈现,只是元素看上去很小，一般默认可以通过手动缩放页面

2.2 视觉视口 visual viewport

字面页面，它是用户正在看到的网站区域，注意：是网站区域

我们可以通过缩放去操作视觉视口，但是不会影响布局视口，布局视口任然保持原来的宽度

2.3 理想视口 pidel viewport

为了是网站在移动端最有理想的浏览和阅读宽度而设定

理想视口，对设备来说，是最理想的视口尺寸

需要手动添加meta标签通知浏览器操作

meta视口标签的目的：布局视口的宽度应该和理想视口的宽度一至，简单理解就是设备有多宽，我们的布局视口就有多宽；

3.最佳的meta设置

视口宽度与设备宽度保持一致

视口的默认缩放比为1.0

不允许用户自主缩放

最大允许的缩放比例为1.0

最小允许的缩放比例为1.0

4.二倍图

css像素又称为虚拟像素、设备独立像素或逻辑像素，也可以理解为直觉像素。css像素是web编程的概念，指的是css代码中使用的逻辑像素，比如iphone的逻辑像素为375 * 667px

物理像素比（屏幕像素比）:1px能够侠士的物理像素点的个数

在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题，通常使用二倍图。

通常使用二倍图，是因为市面绝大多数手机还是受着iPhone6/7/8的影响，但是现在也存在一些手机有3倍图或者4倍图的情况，在实际开发中一公司标准为主。

5.移动端单独布局

5-1.流式布局（百分比布局）

1、布局特点：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。

2、设计方法：使用%百分比定义宽度，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。

5-2 flex弹性布局

主要是给父元素一个display：flex；再配合一些flex-direction、justify-content等属性进行布局。
子元素可以给一些缩放比例的效果。

5-3 less+rem+媒体查询布局

• 使用 @media查询，可以针对不同的媒体类型定义不同的样式
• @media 可以针对不同的屏幕尺寸设置不同的样式
• 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
• 目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询
• Less是一门 CSS 预处理语言，它扩展了CSS的动态特性。

①假设设计稿是750px

②假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）

③每一份作为html字体大小，这里就是50px

④那么在320px设备的时候，字体大小为320/15就是 21.33px

⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的

⑥比如我们以750为标准设计稿

⑦一个100100像素的页面元素在 750屏幕下， 就是 100/ 50 转换为rem 是 2rem2rem 比例是1比1

⑧320屏幕下， html字体大小为21.33 则 2rem= 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是 1比1

⑨但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果

总结：

①最后的公式：页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）

②屏幕宽度/划分的份数就是 htmlfont-size 的大小

③或者：页面元素的rem值 = 页面元素值（px） / html font-size 字体大小

rem (root em)是一个相对单位，在媒体查询中所有的大小都由rem给定。

5-4混合布局

三个布局方式一起用，哪里适合哪个就用哪个。