移动端web开发（一）--- 移动端开发基础和流式布局

一、移动端基础

​ 目前国内常见的移动端浏览器有： UC浏览器、百度浏览器、QQ浏览器等等，种类繁多五花八门，但他们也有一个共同点：都是根据 Weblit 内核修改延伸出来的内核，所以如果要考虑移动端兼容性问题，只需要处理 Webkit 内核 即可。不过移动端浏览器发展较晚，所以对HTML5 和 CSS3 支持很高，一般不会出现不兼容的问题。

​ 由于手机的屏幕尺寸碎片化十分严重，所以对我们制作的所有移动端页面都提出了新要求：能够适应众多大小不等的屏幕。

二、视口

1、概念

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

2、布局视口（layout viewport）

​ 布局视口指的是页面正常显示的区域，一般移动端浏览器都默认为布局视口，用来解决早期PC端页面在手机上显示的问题。IOS、Android 的手机都将这个布局视口的分辨率设置为 980px，所以PC端的网页都能在手机上呈现，只不过元素会比较小，一般可以通过手动进行缩放。

3、视觉视口 （visual viewport）

​ 视觉视口是指用户正在看到的网站的区域，我们可以通过对页面的缩放去改变视觉视口，但并不会影响布局视口。

4、理想视口（ideal viewport）

​ 理想视口是网页在移动端显示最理想的视口尺寸，需要通过设置 meta 标签来设置理想视口，即设备有多宽则视口就有多宽。我们发就是要用理想视口把布局视口的宽度修改为视觉视口的宽度。

5、 meta 标签

​ 最标准的 meta 标签应该设置为： 视口宽度与设备一致、视口的默认缩放比为 1.0 、最大允许的缩放比例1.0、最小允许的缩放比例1.0以及不允许用户自行缩放。

三、二倍图

​ 我们在进行移动端开发时，1px是不一定等于一个物理像素的，1个px所显示物理像素点的个数，称为物理像素比。为了避免因为物理像素比要放大图片而造成图片模糊的问题，我们通常用倍图来提高图片质量来解决，通常是二倍图。

四、移动端开发方案

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

​ PC端和移动端为两套网站，pc端是pc端的样式，移动端在写一套，专门针对移动端适配的一套网站

2、响应式布局兼容移动端

​ pc和移动端共用一套网站，只不过在不同屏幕大小下，样式会自动适配

3、移动端样式初始化

​ 移动端 CSS 初始化推荐使用 normalize.css ，下载地址 ： http://necolas.github.io/normalize.css

五、移动端常用布局

1、流式布局

​ 流式布局又称百分比布局，通过将盒子的宽度设置为百分比来根据屏幕的宽度进行伸缩，不受固定像素限制，是一种简单常见的布局方式。

2、flex弹性布局

3、less+rem+媒体查询布局

4、响应式布局