前端入门系列--移动web开发之流式布局

首先说明一个注意点是适应当前国内移动端浏览器，只要处理webkit内核即可，不需要像pc端一样兼容多个内核

1、视口

1.1布局视口

整个所写的页面的视口

1.2视觉视口

用户当前看到的网站的区域

1.3理想视口

理想视口，对设备来讲，是最理想的视口尺寸，也是我们开发所需要的的，原理即是用meta标签将布局视口宽度设置为视觉视口宽度
一般来说meta代码如下所示：


即：

• 视口宽度和设备保持一致
• 视口的默认缩放比例1.0
• 不允许用户自行缩放
• 最大允许的缩放比例1.0
• 最小允许的缩放比例1.0

2、二倍图

2.1物理像素与物理像素比

物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6 是 750* 1334
但我们在进行移动端开发时代码中的1px并非等于手机的物理像素的1px
从而把一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比，如像素比为2则是我们在代码中写的1px=两个实际的物理像素（我们在代码中定义了一个2px的正方形盒子会变成4px的正方形盒子，最后偏大；只有pc端和早期的手机是1比1对应的，但这也造成了屏幕的分辨率低下）

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

但在这种手机中对于一张 50px * 50px 的图片,在手机或 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊，在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题，常见是二倍图，也有其他倍图。

2.2二倍图的概念

以下分别是从图片、背景图片、精灵图三个方面去讲：
如果物理像素比为2，则我们所用到的就是二倍图；
比如我们需要一张5050的图片，则我们引入一张100100的图片，再手动将其缩小成5050即可.
现实编程中通常用一张较大的清晰图片将其宽度设置百分比自动伸缩（将放图片的父盒子设置为想要的宽度，可以是百分数；然后将图片宽度也设置为百分数）
也可以
此外，除了图片以外，背景图也要使用该技术（图片为100100，最后背景缩放成5050），则用到背景图缩放background-size概念：

若
1、只写一个参数则默认是宽度，高度进行等比例缩放；
2、也可以写百分数，其是相对于父盒子的大小；
3、cover属性值则是宽高都必须铺满父盒子（则可能有内容会跑出盒子外）

4、contain是宽高有一边铺满就行

在我们需要准备多倍图时，用cutterman可方便选择


但对于精灵图虽然也是作为背景放入，但其不能直接使用background-size，因为background-size缩放是将整张精灵图进行缩放（整张图几百px缩放到10几px后会看不到了）而非仅是其应该：

1、如原来图是400px150px，则现在将其宽度改为200px，让其高度自适应变化；
2、此时再去测量需要小图标的大小以及坐标；
3、最后坐标如前面所学一样写在background上，并在background写上整个精灵图缩小像素比后的大小，如这里的200px

3、移动端制作方案选型

1、单独制作移动端页面
如淘宝、京东

其用到的布局主要如下：

• 流式布局（百分比布局）
• flex 弹性布局（强烈推荐）
• less+rem+媒体查询布局
• 混合布局

2、响应式兼容PC移动端
开发时需要考虑较多兼容性问题；如：三星电子

其用到的布局方式如下：

• 媒体查询
• bootstarp

所以单独制作使用较多

4、移动端技术解决方案

之前pc端一些初始化样式都是自己写，现在移动端有初始化文档normalize.css（即公共样式）;
http://necolas.github.io/normalize.css/

4.1CSS3对盒模型的改进

在移动端中大量用到css3的盒模型

其声明如下：

/*CSS3盒子模型*/
box-sizing: border-box;
/*传统盒子模型*/
box-sizing: content-box;

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

4.2移动端特殊样式

一下内容写在*{}中：

/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*点击高亮我们需要清除清除  设置为transparent 完成透明*/
-webkit-tap-highlight-color: transparent;
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }

5、流式布局

流式布局即百分比布局，将盒子宽度设置成百分比从而根据盒子的宽度自动进行伸缩；
但一般不能让其无限拉伸，所以要给个最大值和最小值，如下：

最后加个margin:0 auto让其居中对齐即可

6、其它

项目中通常要将背景图片以及图片分开来放置，如：

这里是images中放背景图片，upload中放图片（如一些产品图片）

6.1移动端一些步骤

1、生成html后先写视口标签meta
2、然后引入公共样式normalize.css
3、引入本页面自身的css
4、给body一些默认样式，如居中对齐等等，最大最小宽度，字体样式大小等等

6.2新的图片格式

6.3移动端中的固定定位

如电商网页中最上角的广告和搜索框都是使用固定定位进行实现的，但注意固定定位的盒子必须给宽度（一般写100%之类的），还必须给最大最小宽度（虽然在前面的body已经给过了），