移动web几种常用布局

注意：无论是什么布局，最外面都需要加个版心，这样不会导致整个布局超过可视区域，形成横向滚动条。

1.流式布局 (百分比布局)
宽度使用百分比，高度使用px

2.伸缩布局 (弹性布局) flex
2.1 作用：使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
2.2 应用场景：浮动 + 百分比搞不定的时候
2.3 语法：

3.rem布局 (基本用于手机端)
3.1 作用：同时适配宽高与高度
rem：是一个相对HTML字体大小的单位
3.2 使用流程：
a 导入rem.js 让 1rem = 当前屏幕 1/10
b 根据UI设计稿来将px 转成rem
　　　　　　b.1 自己手动算
　　　　　　b.2 cssrem插件 根据设计稿设计rem计算值 按照设计搞写px 会有自动提示转rem

rem.js适配文件

(function(){
	var calc = function(){
		var rem = document.documentElement.clientWidth/10;
		document.documentElement.style.fontSize = rem + 'px';
		rem = document.documentElement.clientWidth > 750?37.5:rem;
		// console.log(rem);
	}
	calc();
	window.addEventListener('resize',calc);
})();

cssrem插件适用教程：添加链接描述

4.响应式布局 适用于页面比较简单的网页，不适合页面复杂，比如电商类
一般用bootstrap框架来完成，这里列出来boostrap主要核心功能

1.响应式布局介绍 : 一个HTML页面适配多个不同的设备（手机，PC）
优点 ： 全适配 （一个HTML页面可以适配所有的设备屏幕，手机，平板，PC）
缺点 : 不便于维护。 （一个HTML页面中，要写两套css，pc端css和移动端cc，造成css代码冗余）
2.响应式布局原理 : 媒体查询 （根据不同的设备加载不同的css）
3.媒体查询语法 :
a. 基本语法 : @media screen and (设备尺寸){ css样式 }
* 例如： @media screen and (width:1200px){ }
简洁语法： @media(设备尺寸){ css样式 }
b. 区间查询
c. 常用的四种设备尺寸

下面列出一些bootstrap框架的核心功能

bootstrap官网：添加链接描述