移动WEB开发（流式布局、flex布局、rem适配布局）

准备知识

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

我们移动端布局最想要的是理想视口。

理想视口：对设备来说，是最理想的视口尺寸。需要手动添写meta视口标签通知浏览器操作。

meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们的布局的视口就多宽。

meta视口标签

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

 

物理像素

物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。就是分辨率

PC端页面，1个px等于1个物理像素的，但是移动端不尽相同。

一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比。

例如：iphone8的物理像素是750   1px 开发像素 = 2个物理像素

PC端和早前的手机屏幕：1CSS像素 = 1物理像素

Retina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。

二倍图

对于一张50px*50px的图片，在手机Retina屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊。

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

通常使用二倍图，也有三倍图、四倍图的情况。

做法：我们需要一个50*50像素（CSS像素）的图片，我们采取的是放一个100*100的图片 然后手动把这个图片缩小为50*50（CSS像素）

我们准备的图片比我们实际需要的大小大2倍，这种方式就是二倍图。

背景缩放（background-size）

background-size:图片的宽度  图片的高度；

单位：长度px | 百分比 | cover |contain ;

只写一个参数 肯定是宽度 高度省略会等比例缩放

里面的单位可以写% 相对父盒子来说

cover:把背景完全覆盖盒子 可能有部分背景图片显示不全

contain:把图像扩展至最大尺寸 高度和宽度等比例拉伸 当宽度或高度铺满整个盒子就不再进行拉伸了，可能有部分空白区域。

移动端开发选择

移动端主流方案

单独制作移动端页面（主流）：通常情况下，网址域名前面加m(mobile)可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。

响应式兼容PC移动端：通过判断屏幕宽度来改变样式，以适应不同终端。制作麻烦，需要花很大精力去调兼容性问题。

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

非固定像素布局

通过给盒子的宽度设置百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

给父盒子一个最大/最小值，保护内容 防止因为缩小屏幕盒子里的内容挤掉

max-width 最大宽度

min-width  最小宽度

<