移动端布局

一、移动端调试方法
1、Chrome DevTools（谷歌浏览器）的模拟手机调试。
2、搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器。
3、使用外网服务器，直接IP或域名访问。

二、移动端技术选型
1、单独制作移动端页面（主流）
(1)、流式布局（百分之布局）
1>、流式布局，就是百分比布局，也称非固定像素布局。
2>、通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
3>、流式布局方式是移动web开发使用的比较常见的布局方式。
4>、max-width 最大宽度（max-height 最大高度）。
5>、min-width 最小宽度（min-height 最小高度）。
(2)、flex弹性布局（强烈布局）
1>、flex是fiexble Boxed 缩写，意为“弹性布局”，用来为盒子模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
&1、当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。
&2、伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
2>、采用Flex布局的元素，称为Flex容器（fiex container），简称“容器”。他的所有子元素自动成为容器成员，称为Flex项目（Flex item），简称项目。
&1、体验中div就是flex父容器。
&2、体验装span就是子容器flex项目。
&3、字容器可以横向排列也可以纵向排列。
&4、flex布局布局原理，就是通过父盒子添加flex属性，来控制子盒子的位置和排列方式。
3>、常见的父项属性
&1、flex-direction：设置主轴的方向。
&2、justify-content：设置主轴上的子元素排列方式。
&3、flex-wrap：设置子元素是否换行。
&4、align-content：设置侧轴上的子元素的排列方式（多行）。
&5、align-items：设置侧轴上的子元素的排列方式（单行）。
&6、flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap。
4>、常见的子项属性
&1、flex：子项目占的份数。
&2、align-self：控制子项目自己在侧轴的排列方式。
&3、order：定义子项的排列顺序（前后排列）。
(3)、less+rem+媒体查询布局
1>、Less（Leaner Style Sheets的缩写）是一门CSS扩展语言，也称CSS预处理器。
做为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。
他在CSS的语法基础上，引入变量，Mixin(混入)，运算以及函数等功能，大大简化了CSS的缩写，并且降低了CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。
Less中文网址： http://lesscss.cn/
常见的CSS预处理器：Sass、Less、Stylus
2>、rem实际开发适配方案
&1、按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小。(媒体查询)
&2、CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值。
3>、rem适配方案技术使用（市场主流）
&1、rem+媒体查询+less 技术
&2、rem+flexible.js 技术
(4)、混合布局
2、响应式页面兼容移动端（其次）
(1)、媒体查询
响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式设置，从而适配不同设备的目的。

媒体查询.png

(2)、Bootstarp
1>、Bootstrap来自Twitter（推特），是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使的web开发更加快捷。
中文官网：http://www.bootcss.com/
官网：http://www.getbootstrap.com/
推荐官网：http://bootstrap.css88.com/
2>、Bootstrap使用四部曲：1、创建文件夹结果；2、创建html骨架结构；3、引入相关样式文件；4、书写内容。