移动web常用布局知识
在移动web中常用的布局有四种
- 流式布局（百分比布局）
- Flex布局（弹性布局）
- 响应式布局
- rem布局
一、流式布局（百分比布局）
所谓的流式布局就是我们常说的百分比布局，页面中盒子的宽度常常是通过百分比值来设置的。
流式布局的特征：
a、宽度自适应，高度写死，并不是百分百还原设计图
b、图标都是固定死大小的，包括字体等也是固定死的。并不是所有的东西都是自适应的。
c、一些大的图片，设置宽度为百分比自适应即可，随着屏幕大小进行变化
经典的流式布局
//1. 左侧固定，右侧自适应
//2. 右侧固定，左侧自适应
//3. 两侧固定，中间自适应（圣杯布局，双飞翼布局）
//4. 等分布局流式布局的缺点
虽然可以让各种屏幕都适配，但是显示效果不是非常的友好，因为只有几个尺寸的手机能够完美的显示出来视觉设计师和交互最想要的效果。但是目前使用流式布局的公司非常多，比如 亚马逊 、京东 、携程
假如设计给你一张640的设计图，你使用流式布局设计出来的页面在640的屏幕上可以完美的显示，但是如果在别的屏幕上显示的时候就会有拉伸的现象，这样就想的不那么完美。
案例1
在流式布局中我们需要配合浮动来实现以下效果，比如下图的效果
要实现这样的效果，如果我们使用流式布局来写，代码如下，可以看到，我调整了div的位置，以便右浮的div可以正常显示在右边，这样尽管实现了效果，但是可阅读性上相对来说差一点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
height: 100px;
background-color: pink;
}
/* 两边固定，中间自适应 */
.left{
width: 100px;
height: 100px;
background-color: lime;
float: left;
}
.right{
width: 100px;
height: 100px;
background-color: skyblue;
float: right;
}
.middle{
height: 100px;
background-color: hotpink;
overflow: hidden;
}
</style>
</head>
<body>
<div class="father">
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</div>
</body>
</html>二、Flex布局（弹性布局）
怎么实现Flex布局呢？
给一个盒子设置了display：flex ，那么这个盒子就有了Flex的特性
Flex特性
这个盒子就有了主轴 和侧轴 的概念。
主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
方向：默认主轴从左向右 ，默认侧轴从上到下
接下来我们来说一下，Flex布局中特有的一些css属性，已经使用
flex-direction
flex-diretion主要是用来调整主轴的方向的，默认是水平方向
可选值
row：主轴方向为水平向右
column：主轴方向为竖直向下
row-reverse:主轴方向为水平向左
column-reverse:主轴方向是竖直向上。justify-content(重点)
justify-content主要用来设置主轴方向的对齐方式
可选值：
flex-start: 弹性盒子元素将向起始位置对齐
flex-end: 弹性盒子元素将向结束位置对齐。
center: 弹性盒子元素将向行中间位置对齐
space-around: 弹性盒子元素会平均地分布在行里
space-between:第一个贴左边，最后一个贴右边，其他盒子均分，保证每个盒子之间的空隙是相等的align-items(重点)
align-items用于调整侧轴的对其方式
flex-start： 元素在侧轴的起始位置对其。
flex-end： 元素在侧轴的结束位置对其。
center： 元素在侧轴上居中对其。
stretch： 元素的高度会被拉伸到最大（不能给死高度）。flex-wrap
flex-wrap属性控制flex容器是单行或者多行,默认不换行
nowrap： 不换行（默认），会压缩子盒子的宽度。
wrap： 当宽度不够的时候，会换行。align-content
align-content用来设置多行的flex容器的排列方式
flex-start： 各行向侧轴的起始位置堆叠。
flex-end： 各行向弹性盒容器的结束位置堆叠。
center： 各行向弹性盒容器的中间位置堆叠。
space-between： 各行在侧轴中平均分布。
space-around： 第一行贴上边，最后一个行贴下边,其他行在弹性盒容器中平均分布。
stretch：拉伸，不设置高度的情况下。align-items与align-content的区别
align-items调整的是侧轴的对其方式，不换行一般用align-items
align-content:必须是多行才生效，如果单行，没有效果。换行了就用align-content。
flex属性
上述讲的属性都是给父盒子设置的，接下来的几个属性是给子盒子设置的。
flex属性用来设置子盒子如何分配主轴剩余空间
flex:1align-self
align-self也是用于设置在侧轴的位置，但是align-self给子元素设置，优先级比align-items的优先级高。
取值与align-items的取值一样。
Flex布局的一些属性介绍完了，接下来我们来实现与流式布局同样的案例
案例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
height: 100px;
background-color: pink;
display: flex;
}
/* 两边固定，中间自适应 */
.left{
width: 100px;
height: 100px;
background-color: lime;
}
.right{
width: 100px;
height: 100px;
background-color: skyblue;
}
.middle{
height: 100px;
background-color: hotpink;
flex: 1;
}
</style>
</head>
<body>
<div class="father">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</body>
</html>对比Flex的和流式布局的代码，可以发现，使用flex布局的代码简单了很多，我们不需要使用浮动，同样的我们也不需要调整页面标签的位置，当然Flex布局还是有一些局限的，我们正常开发中不会整个页面都是Flex来布局，某个模块可以使用Flex布局。
三、响应式布局
为什么要有响应式布局？
-
在移动互联日益成熟的时候，在PC端开发的网页已经无法满足移动设备的要求。
-
通常的做法是针对移动端单独做一套特定的版本。
-
如果终端越来越多，那么需要开发的版本就会越来越多（大屏设备的普及）
-
响应式布局 ：一个网站能够兼容多个终端（节约开发成本）
优点：
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点：
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
在响应式布局已经后面的rem布局中，媒体查询是起着非常重要的作用的。
媒体查询
媒体查询（Media Query）是CSS3提出来的一个新的属性，通过媒体查询可以查询到screen的宽度，从而指定某个宽度区间的网页布局。 下表中的（lg 、md、sm、xs）在后面的栅格系统中会涉及到，须记住。
| 分类 | 宽度范围 |
|---|---|
| 大屏设备 lg | >1200px |
| 中屏设备 md | 992px~1200px |
| 小屏设备 sm | 768px~992px |
| 超小屏设备 xs | < 768px |
媒体查询的语法
/*查询屏幕*/
@media screen and 条件 {
}
/*省略写法*/
@media 条件 and 条件 {
}
/*条件的写法*/
/*min-width:只要屏幕宽度超过这个值的设备样式就能生效*/
/*max-width:只要屏幕宽度小于这个值的设备样式就能生效*/
@media screen and (min-width: 992px) and (max-width: 1200px) {
.container {
width: 970px;
background-color: blue;
}
}在开发响应式布局中，我们常用到的一个框架就是bootstrap（http://www.bootcss.com）
特点：
-
组件简洁大方、代码规范精简、界面自定义性强。
-
Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。
-
Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。
优点：
-
有自己的生态圈，不断的更新迭代
-
提供了一套简洁、直观、强悍的组件
-
标准化的HTML+CSS编码规范
-
让开发更简单，提高了开发效率。
-
扩展性强，虽然界面组件样式已经定义好了，我们还可以自定义，修改默认样式。
简单说一下bootstrap的几个常用类
1、container
类用于固定宽度并支持响应式布局的容器 ，默认带了15px的padding值。 根据不同的屏幕大小，会有不同的版心，container的这个实现原理就是上面说的媒体查询，不同的屏幕大小，设置不同的版心宽度。直接像这么使用就行。
<div class="container">
...
</div>栅格系统
栅格系统，也叫网格系统
| 类名 | 例子 | 解释 |
|---|---|---|
| .col-xs-xx | .col-xs-6 | 在超小屏幕（及以上）生效 |
| .col-sm-xx | .col-sm-6 | 在小屏幕（及以上）生效 |
| .col-md-xx | .col-md-6 | 在中屏幕（及以上）生效 |
| .col-lg-xx | .col-lg-3 | 在大屏幕及生效，占1/4 |
| .col-lg-xx | .col-lg-4 | 在大屏幕及生效，占1/3 |
| .col-lg-xx | .col-lg-5 | 在大屏幕及生效，占1/2 |
列的偏移（下图摘取自bootstrap官网）
响应式工具
在响应式布局中，当界面缩小时我们会隐藏某些不重要的模块，在bootstrap中同样提供了这么几个类工具
hidden-xs 在超小屏时隐藏
hidden-sm在小屏时隐藏
hidden-md在中屏时隐藏
hidden-lg在大屏时隐藏
案例3
四、rem布局
前面已经说了三种在移动端常用的布局，但是上面三种布局存在一些缺点，导致我们移动web页面不是那么完美。
在说rem布局之前，我们先来说一下less
什么是less？
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性
less仅仅是写css的另一种方式，写出来的less文件浏览器也不识别，所以啊，我们写完了less文件，还需要通过less解析器解析成css，最终浏览器引入的还是css文件。
less是完全兼容css的，所以你可以在less中直接写css，但是就显得有点low了 ，哈哈哈~~
less中是允许嵌套、设置变量、运算等的，具体可以查看上面响应式布局案例中的less文件。
为什么我们会先说less呢？
因为在rem中我们会涉及到一下计算，而css中是不支持运算符的，因此如果我们纯粹的用css去写rem布局的东西，会需要大量计算，会很麻烦，而我们如果在less中写的话就不会有这样的问题了，因为less支持运算符。
rem是什么？
rem（font size of the root element）是指相对于根元素的字体大小的单位。它就是一个相对单位。
em（font size of the element）是指相对于当前元素的字体大小的单位。它也是一个相对单位。
它们之间其实很相似，只不过计算的规则一个是依赖根元素，一个是当前元素计算。
html{
font-size:16px;
}
body {
font-size:20px;
}
div.em {
/*em的计算方式参照的当前元素的font-size，如果不设置，默认继承自父盒子*/
width:2em;
height:2em;
background-color:red;
}
/*rem的计算方式参照的是html的font-size*/
div.rem {
width:2rem;
height:2rem;
background-color:blue;
}为什么要用rem？
rem的主要目的就是解决用于不同屏幕的适配问题。rem能够等比例的适配所有的屏幕。
因为rem的基准点是根元素html的字体大小，因此我们只需要设置不同屏幕的html的font-size大小不一样就可以达到不同屏幕的适配了。
不是说rem布局毫无缺点，rem布局在某些时候，比如设置的字体一般取值是9-72px ,当界面缩的很小时就会发现文字还是挺大的，会超出我们设置的边框。当然rem总的来说是很强大的，之后的开发中使用的也是很多的。
使用rem配合媒体查询可以适配多个终端
@media (min-width: 320px) {
html {
font-size: 16px;
}
}
@media (min-width: 360px) {
html {
font-size: 18px;
}
}
@media (min-width: 384px) {
html {
font-size: 19.2px;
}
}
@media (min-width: 414px) {
html {
font-size: 20.7px;
}
}一下这段代码就是结合了less的运算、变量、函数创建的一个媒体查询函数。
//适配主流浏览器
//320 360 375 384 400 414 424 480 540 720 750
//把屏幕分成15rem
.adapter(@screen:320px) {
@media (min-width: @screen) {
html {
font-size: round(@screen/15, 2);
}
}
}案例4