移动端web开发常见布局

单独制作

流式布局（百分比布局）

概念：将盒子的宽度设置为百分比，根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充

注意：需要设置宽度/高度最大值和最小值 保证伸缩不会掉下来

flex弹性布局

概念：通过给父盒子添加flex属性，达到控制子盒子位置和排列方式的目的；

特点：

1. 子元素将不再区分行内元素和块元素，均可定义宽高；
2. 改变可视窗口大小时，元素达到自适应的效果；
3. 任何元素都可以指定flex布局；
4. 此时浮动属性失效，不再需要清除浮动；

less+rem+媒体查询

• less

概念：是css的预处理语言 扩展了css的动态特性；

- rem适配布局

概念：rem是一个相对单位，是对HTML元素的字体大小相比较（与父元素没有关系）

特点：可以直接修改HTML里面的文字大小，达到控制整体的效果

- 媒体查询

概念：就是根据不同的屏幕或设备，自适应布局。一套代码，多个设备应用，合理布局；

特点：

        1.针对不同的媒体类型定义不同的样式；
        2.针对不同的尺寸设计不同的样式
        3.重置浏览器的过程中，网页也会根据浏览器的宽度和高度重新渲染页面；

响应式布局 兼容移动端

原理：使用媒体查询针对不同宽度设备进行布局和样式的设置，从而适配不同的设备；

优点：

1. 提供标准化的 html+css 编码规范
2. 提供一套简洁、直观、强悍的组件
3. 有自己的生态，不断的更新迭代
4. 提高开发的效率

使用四部曲：

1. 创建文件夹结构
2. 创建HTML骨架结构
3. 引入相关样式文件
4. 书写内容

栅格系统/网格系统：

概念：随着可视窗口的大小变化，将内容自动划分为等宽的12份；

关于份数：
                份数相加等于12 则占满整个container

                份数相加小于12 则container有剩余空白

                份数相加大于12 则超出container的部分另起一行

                每一列默认有左右15像素的padding

                可以设置visible 和 hidden 设置显示或者隐藏

          可以同时为- -列指定多个设备的类名,以便划分不同份数例如class= “col-md-4 col-sm-6”