移动WEB开发之流式布局

一、移动端基础

1、浏览器

总结：兼容移动端主流浏览器，处理webkit内核浏览器即可。

2、移动端调试方法

Chrome devtools（谷歌浏览器）的模拟手机调试

搭建本地web服务器，手机和服务器一个区域网内，通过手机访问服务器

使用外网服务器，直接IP或域名访问

二、视口

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

1、布局视口 layout viewport

一般移动设备的浏览器都默认设置了一个布局视口

2、视觉视口 visual viewport

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

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

3、理想视口 ideal viewport

需要手动添写Meta视口标签通知浏览器操作

Meta视口标签目的：布局视口的宽度应该与理想视口的宽度一致

三、二倍图

1、物理像素和物理像素比

1、物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的

2、我们开发时1px不是一定等于1个物理像素的

3、PC端页面，1px等于一个物理像素，但移动端不尽相同

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

2、二倍图

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

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

3、背景缩放 background-size

background-size 属性规定背景图像的尺寸   单位： 长度、百分比、cover、contain

background-size： 背景图片宽度  背景图片高度；

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

2、里面也可以写百分比，相对于父盒子来说

3、cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域（要完全覆盖div盒子，可能有部分背景图片显示不全）

4、contain 把图像扩展至最大尺寸，以使其宽度高度完全适应内容区域（高宽度等比例拉伸 当宽度或高度铺满div盒子就不再进行拉伸 可能有部分空白区域）

4、多倍图切图 cutterman

选择IOS 就会出现 @1X  @2X  @3X

四、移动端开发选择

1、移动主流方案

1、单独制作移动端页面（主流）

通常情况下，网址域名前面添加m （mobile）可以打开移动端。通过判断设备，如果是移动设备打开，则跳转到 移动端页面

2、响应式页面兼容移动端（其次）

通过判断屏幕宽度来改变样式，以适应不同终端

缺点就是制作太麻烦

五、移动端技术解决方案

1、移动端浏览器 

移动端浏览器基本以webkit内核为主，因此我们就考虑webkit兼容性问题

浏览器的私有前缀我们只需考虑添加webkit

2、CSS初始化 normalize.css

3、CSS3盒子模型 box-sizing

移动端可以全部用CSS3盒子模型，PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性就选择css3盒子模型

4、特殊样式

六、移动端常见布局

移动端技术选型

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

        也称为非固定像素布局

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

        2、流式布局是移动web开发使用比较常见的布局方式

max-width 最大宽度（max-height 最大高度）

min-width  最小宽度（min-height 最小高度）

七、京东移动端首页制作