响应式布局的原理和实现方法

什么是响应式布局

可以自动识别屏幕宽度，并做出相应调整的网页设计，布局和展示的内容可能会有所改变

当提到响应式布局时，自然会想到自适应布局，那两者到底有什么区别呢

什么是自适应布局

同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整网页内容大小

两者的区别

• 响应式：只需要开发一套代码，响应式设计通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容
• 自适应：需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。

如何实现响应式布局

1、媒体查询

css3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的高度和宽度重新渲染页面

如何选择屏幕大小的分隔点

• 不同的移动设备和电脑屏幕分辨率都不一样
• 移动端优先 or PC端优先
• 移动端优先使用min-width，PC端优先使用max-width

2、百分比布局
通过百分比单位，可以使得浏览器中组件的宽高随浏览器的高度的变化而变化，从而实现响应式的效果，Bootstrap里面的栅格系统就是利用百分比来定义元素的宽高，css3支持最大和最小高，可以将百分比和max(min)一起结合使用定义元素在不同设备下的宽高

• 子元素的height或者width使用百分比，是相对于子元素的直接父元素，width相对于父元素的width，height相对于父元素的height；
• 子元素的top、bottom、left和right如果设置百分比，则是相对于直接非static定位（默认定位）的父元素的宽高;
• 子元素的padding如果设置百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width，与height无关；
• margin也是相对于直接父元素的宽width与height无关；
• boder-radius如果设置百分比，则是相对于自身的宽度，translate、background-size等也是相对于自身的。

使用百分比来实现响应式布局的缺点：

• 计算困难，如果要定义一个元素的宽高，按照设计稿，必须换算成百分比单位
• 相对父元素的属性并不是唯一的，各个属性设置百分比其参考对象是不定的，width和height是相对于父元素的宽高的，margin，padding是相对于父元素的宽，而border-radius,translate等又是相对于子元素自身的。

3、rem响应式布局

• 一般不要给元素设置具体的高度，但是对于一些小图标可以设定具体的宽度值
• 高度值可以设置为固定值，设计稿有多大，就设置为多大
• 所有设置的固定值都用rem做单位（首先在html总设置一个基准值：px和rem的对应比例，然后在效果图上获取px的值，布局的时候转换为rem值）
• js获取真实屏幕的宽度，让其除以设计稿的高度，算出比例，把之前的基准值按照比例重新设定，这样项目就可以在移动端自适应了

rem布局的缺点：
在响应式布局中，必须通过js来动态控制根元素font-size的大小，也就是说css样式和js代码有一定的耦合性，且必须将改变font-size的代码放在css样式之前，可放在head里面第一个script标签（默认情况下html元素的font-size为16px，即1rem=16px）

/* 第一版 */
@media screen and (max-width:414px){
	html{
		font-size:18px
	}
}
@media screen and (max-width:375px){
	html{
		font-size:16px
	}
}
@media screen and (max-width:320px){
	html{
		font-size:12px
	}
}

// 优化版
//动态为根元素设置字体大小
function init(){
	//获取屏幕宽度
	var width = document.documentElement.clientWidth
	//设置根元素字体大小，此时为宽的10等分
	document.documentELement.style.fontSize = width/10 + 'px'
}
// 首次加载应用，设置一次
init()
//监听手机旋转的事件的时机，重新设置
window.addEventListener('orienttationchange',init)
//监听手机窗口变化，重新设置
window.addEventListener('resize',init)

4、视口单位
css3中引入一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口的高度，除了vw和vh外，还有vmax和vmin两个相关的单位

单位	含义
vw	相对于视窗的宽度，1vw等于视口宽度的1%，即视窗宽度是100vw
vh	相对于视窗的高度，1vh等于视口高度的1%，即视窗高度是100vh
vmax	vw和vh中的较大值
vmin	vw和vh中的较小值

用视口单位度量，视口为宽度为100vw，高度为100vh。例如，在桌面端浏览器视口尺寸为650px，那么1vw=650*1%=6.5px

vw/vh和百分比的区别

单位	含义
%	大部分相对于祖先元素，也有相对于自身的情况
vw/vh	相对于窗口的尺寸

5、图片式响应
包括两个方面，一个是大小自适应，这样能够保证图片在不同的屏幕分辨率下出现压缩、拉伸的情况；另一种就是根据不同屏幕的分辨率和设备像素比来尽可能选择高分辨率的图片，也就是当在小屏幕上不需要高清图或者大图，这样就可以用小图来代替，减少网络带宽

• 使用max-width（图片自适应）
  图片能随容器的大小进行缩放

img{
	display:inline-block;
	max-width:100%;
	height:auto;
}

将图片转换为inline-block形式，可以让其拥有块级元素的特点又可以设置宽高。max-width保证了图片能够随容器进行等宽扩充（即保证所有图片最大显示为其自身的100%，此时如果包含图片的元素比图片固有宽度小，图片会缩放占满最大可用空间），而height设置为auto，可以保证图片进行等比缩放而不至于失真。

为什么不使用width:100%呢？？？
因为这样会导致它显示得跟它的容器一样宽，在容器比图片宽得多的情况下，图片会被无谓的拉伸。