移动端常见的开发布局方式

一、流式布局

流式布局就是百分比布局，也称非固定像素布局。它通过将盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。流式布局方式是移动web开发中使用的比较常见的布局方式。设置以下属性是为了保护文本内容无限制扩张或者页面收缩导致内容丢失。
max-width 最大宽度（max-height最大高度)
min-width 最小宽度（min-height 最小高度)
注意：二倍图、多倍图的用法。

二倍精灵图做法

1、在firework里面把精灵图等比例缩放为原来的一半之后根据大小测量坐标；
2、然后使用background-size属性设置为精灵图原来宽度的一半。

二、flex布局

flexible Box简写，称为"弹性布局"或"flex布局"等，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局(display:flex)。当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。其中，采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员（flex 容器的直接子元素会自动成为弹性项目），称为 flex 项目（flex item），简称"项目"。
优点：操作方便，相比传统布局方式布局极为简单，移动端应用很广泛。
缺点：PC端浏览器支持情况较差；兼容性差，在IE11或更低版本中不支持或仅部分支持（IE：没错，正是在下！）。
所以如果是PC端页面布局，可以使用传统布局。如果是移动端或者不考虑兼容性问题的PC端页面布局，还是使用flex弹性布局较为方便。
布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

父项常见属性

flex-direction ：设置主轴的方向(定义容器要在哪个方向上堆叠 flex 项目)。

属性值	说明
row	默认值，水平堆叠 flex 项目（从左到右），即主轴是x轴
row-reverse	水平堆叠 flex 项目（但从右到左）
column	设置垂直堆叠 flex 项目（从上到下），即主轴是y轴
column-reverse	垂直堆叠 flex 项目（但从下到上）

flex-wrap：设置子元素是否换行。

属性值	说明
wrap	规定 flex 项目将在必要时进行换行
nowrap	（默认）规定将不对 flex 项目换行（如果装不下则会自动缩小子元素的宽度）
wrap-reverse	规定如有必要，弹性项目将以相反的顺序换行

flex-flow ：用于同时设置 flex-direction 和 flex-wrap 属性的简写属性。
justify-content ：设置主轴上的子元素排列方式(用于对齐 flex 项目)。

属性值	说明
center	将 flex项目在容器中心对齐
flex-start	将 flex 项目在容器的开头对齐（默认）
flex-end	将 flex 项目在容器的末端对齐
space-around	显示行之前、之间和之后带有空格的 flex 项目(通俗来讲就是平分剩余空间）
space-between	显示行之间有空格的 flex 项目（先两边对齐再平分剩余空间）

align-items ：设置侧轴上的子元素排列方式(单行，用于垂直对齐 flex 项目)。

属性值	说明
center	将 flex 项目在容器中间对齐
flex-start	将 flex 项目在容器顶部对齐
flex-end	将弹性项目在容器底部对齐
stretch	（默认）拉伸 flex 项目以填充容器(flex项目不要给相应侧轴的高/宽度）
baseline	使 flex 项目基线对齐

align-content：设置侧轴上的子元素的排列方式(多行（有换行的情况），在单行的情况下使用没有效果)。

属性值	说明
space-between	子项在侧轴先分布在两头，再平分剩余空间
space-around	子项在侧轴平分剩余空间
stretch	设置子项元素高度平分父元素高度（默认）
center	在侧轴中间显示
flex-start	在侧轴头部开始排列
flex-end	在侧轴尾部开始排列

子项常见属性

order 属性用整数值来定义排列顺序，数值小的排在前面。可以为负值。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性，用于指定弹性子元素如何分配空间。
语法：flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

属性值	说明
auto	计算值为 1 1 auto
initial	计算值为 0 1 auto
none	计算值为 0 0 auto
inherit	从父元素继承

不过比较常见的flex语法是：flex:[number]来表示占多少份数。
比如一个大盒子有三个子盒子：其中第一、三个为flex:1，第二个为flex:2，则该大盒子被分为四份，其中第一、三个盒子分别占一份，第二个占两份。
1、flex-grow 属性规定某个 flex 项目相对于其余 flex 项目将增长多少。该值必须是数字，默认值是 0。例如flex-grow:1 说明与其他盒子大小一致，为8则是其他的8倍。
2、flex-shrink 属性规定某个 flex 项目相对于其余 flex 项目将收缩多少。该值必须是数字，默认值是 0。
3、flex-basis 属性规定 flex 项目的初始长度。
align-self 属性用于设置弹性元素自身在侧轴方向上的对齐方式，该属性将覆盖容器的 align-items 属性所设置的默认对齐方式。

属性值	说明
auto	如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
flex-start	弹性盒子元素的侧轴起始位置的边界紧靠住该行的侧轴起始边界。
flex-end	弹性盒子元素的侧轴起始位置的边界紧靠住该行的侧轴结束边界。
center	弹性盒子元素在该行的侧轴上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline	如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch	如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

另外，设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。如果在第一个弹性子元素上设置了 margin-right: auto，那么它将把剩余的空间放置在元素的右侧（放在父元素盒子的最右侧）。使用弹性盒子，居中变的很简单，只需要设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中。

三、rem适配布局

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

rem(root em)介绍

px是固定的像素，一旦设置了就无法因为适应页面大小而改变。而em和rem相对于px更具有灵活性，t它们都是相对长度单位，由于长度可以变化所以更适用于响应式布局。在说rem之前先说em吧，它们有一点区别：em相对于父元素，而rem相对于根元素。
em：子元素字体大小单位如果使用em是相对于父元素字体大小，而元素的width/height/padding/margin属性用em的话则是相对于该元素的font-size大小。
rem：相对于根元素html。

html {font-size: 15px;
}
div {font-size: 40px;width: 10em;  /* 40*10=400px */height: 10em;  /* 40*10=400px */
}
/* div是p的父元素 */
p {font-size: 0.5em;  /* 0.5*40=20px */width: 10em;   /* 20*10=200px */height: 10em;  /* 20*10=200px */margin: 10rem; /* 15*10=150px */
}

rem优点：1、使页面布局文字大小随着屏幕大小的变化而变化；
2、流式布局和flex布局主要针对于宽度布局，rem非常方便地设置高度；
3、使屏幕发生变化的时候元素高度和宽度等比例缩放；
综上，rem可以通过修改html里面的文字大小来改变页面中元素的大小达到整体控制的效果。

媒体查询

使用媒体查询是一种流行的技术，可以向台式机、笔记本电脑、平板电脑和手机（例如 iPhone 和 Android 手机）提供定制的样式表。
媒体查询由一种媒体类型组成，并可包含一个或多个表达式，这些表达式（比如通过使用min-width或max-width属性）可以解析为 true 或 false。语法如下:

@media not|only mediatype and (expressions) {/* CSS-Code; */
}

如果指定的媒体类型与正在显示文档的设备类型匹配，并且媒体查询中的所有表达式均为 true，则查询结果为 true。当媒体查询为 true 时，将应用相应的样式表或样式规则，并遵循正常的层叠规则。除非使用 not 或 only 运算符，否则媒体类型是可选的，且隐含 all 类型。

CSS3媒体类型值	说明
all	用于所有媒体类型设备。
print	用于打印机。
screen	用于计算机屏幕、平板电脑、智能手机等等。
speech	用于大声“读出”页面的屏幕阅读器。

另外，还可以针对不同的媒体使用不同的样式表（通过link引入）：

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

Less

Less 是一门 CSS 预处理语言（还有Sass、Stylus），作为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。它在CSS的语法基础之上，引入了变量，Mixin (混入），运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像它的名称所说的那样，Less 可以让我们用更少的代码做更多的事情，使CSS 更易维护、方便制作主题和扩充。
入门可参考，简单容易上手： Less

rem适配方案原理

1、让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。
2、使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem作为尺寸单位，当html字体大小变化时元素尺寸也会发生变化，从而达到等比缩放的适配。
less+rem+媒体查询布局的元素大小取值方法：
该布局的公式:页面元素的rem值=页面元素值( px)/（屏幕宽度/划分的份数)。划分次数随意设置，只要把每份的宽度等价于1rem即可。屏幕宽度/划分的份数就是html中设置的font-size的大小（或者直接为：页面元素的rem值=页面元素值( px ) / html font-size字体大小）。

2、flexible.js+rem（简单，推荐）

flexible.js：手机淘宝团队出的简洁高效移动端适配库。
github地址: https://github.com/amfe/lib-flexible
我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理，它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。我们要做的，就是确定好我们当前设备的html文字大小就可以了。比如当前设计稿是750px，那么我们只需要把 html文字大小设置为75px（750px/10）就可以了。里面页面元素rem值=页面元素的px值/75，剩余的交给flexible.js。

四、响应式布局bootstrap

Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap5 目前是 Bootstrap 的最新版本，它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件，助你快速设计和自定义响应式、移动设备优先的站点。bootstrap是一个比较流行的响应式前端框架，利用bootstrap的栅格系统可以实现响应式的移动端布局。栅格系统：Bootstrap中定义了一套响应式的网格系统，其使用方式就是将一个容器划分成12列，然后通过col-xx-xx的类名控制每一列的占比，在使用的时候，我们给相应的div设置col-lg-2 col-md-3 col-sm-4 col-xs-6，以此完成布局。具体不再赘述，学习可看相关教程。

五、vw/vh布局

vwl/vh是一个相对单位（类似em和rem相对单位)，所以不同视口（屏幕）下，宽高可以一起变化完成适配。
vw是viewport width：视口宽度单位；vh是viewport height：视口高度单位。
它们是相对视口的尺寸计算：1vw = 1/100视口宽度，1vh = 1/100视口高度。（固定分为100份）
例如：当前视口宽度是520px，则1vw=5.2px。
vw/vh布局和百分比布局的区别：
百分比是相对于父元素来说的，而vw/vh是相对于当前视口来说的。