实现响应式页面

什么是响应式布局？

• 响应式布局：指的是同一页面在不同的屏幕尺寸下面会有不同的布局，传统的开发模式是PC端开发一套，移动端开发一套，而使用响应式布局只要开发一套就可以。
• 响应式设计：在开发上面只需要开发一套界面，然后根据检测视口分辨率，采用不同的客户端代码，展现不同的布局和内容
• 自适应设计：开发多套界面，然后根据检测视口分辨率，从而请求服务端返回不同的页面

响应式布局的实现方案

媒体查询

• CSS3媒体查询可以让我们针对不同的媒体类型定义不同的CSS样式，当我们重置浏览器窗口的过程中，页面也就会随着浏览器窗口大小的变化而变换

如何选择屏幕大小分割点：

• 我们可以选择600px、900px、1200px、1800px作为分割点，来适配到常见的14个机型
• 也可以选择480px、800px、1400px、==1400+==来作为分割点，来分别适配小屏幕、中屏幕、大屏幕、巨屏幕

移动优先或者PC优先
无论是移动端样式优先还是PC端样式优先，原理都是后面的样式会覆盖前面的样式，所以移动端优先则首先使用的是min-width，PC端优先首先使用的是max-width

百分比布局

• 通过百分比单位，结合max(min)一起使用，我们可以让元素随着浏览器窗口的变化而变化，我们可以实现响应式的效果

CSS中子元素的百分比到底是相对于谁的百分比：

• 子元素的宽高相对于直接父元素的宽高
• 子元素的top和bottom相对于最近已定位父元素的高度
• 子元素的left和right相对于最近已定位父元素的宽度
• 子元素的padding相对于直接父元素的宽度
• 子元素的margin相对于直接父元素的宽度
• 子元素的border-radius、translate等都是相对于自身的

使用百分比单位的缺点：

1. 计算困难，设计稿的宽高，必须换算成百分比单位
2. 使用复杂，因为元素各个属性使用百分比，相对于父元素的属性并不是唯一的

Rem单位

• Rem单位是CSS3新增的单位
• rem单位都是相对于根元素html的font-size来决定大小的
• 所以当浏览器窗口变化时，我们只需要改变根元素中的font-size的值，那么使用了rem单位的元素的大小都会发生相应的变化。

rem响应式的布局思想：

• 一般情况下不用给元素设置具体的高度，除了一些小图标
• 高度值可以设置设计稿的给的大小
• 所有设置的固定值都用rem作为单位
• 可以使用js获取真实屏幕的宽度，然后除以设计稿的宽度，算出比例，然后根据比例重新设置根元素中的基准值

视口单位

• vw表示相对于视口窗口的宽度
• vh表示相对于视口窗口的高度
• vmin表示vw和vh中的较小值
• vmax表示vw和vh的较大值

使用视口单位来实现响应式有两种做法：

1. 仅使用vw作为CSS单位
   • 将设计稿的尺寸转为单位，我们可以使用sass函数编译
   • 其实就是设计稿的尺寸除以屏幕宽度，算出比例，然后利用比例 * 元素设计稿的尺寸，计算出元素应该有的大小

$vm_base:375
@fucntion vw($px) {
	@return ( $px / 375 ) * 100vw;
} 

然后在样式编写中，都使用vw作为单位：

	.nav{
			padding:vm(15);
		  	width: vm(40); 
	      	height: vm(40); 
		}

• 1物理像素线问题(在普通屏幕下1px，在高清屏幕下0.5px的情况)，采用transform属性scale实现

 @media only screen and (-webkit-min-device-pixel-ratio: 2) {
            -webkit-transform: scaleY(0.5);
            -webkit-transform-origin: 50% 0%;
        }

2. vw结合rem
   虽然vw适配后的页面效果很好，但是没有最大最小宽度的限制，此时我们可以结合rem来实现布局

• 给根元素大小设置vw单位，这样就可以实现动态改变其大小
• 限制元素字体大小的最大最小值，配合body加上最大宽度和最小宽度

	// 根元素大小使用 vw 单位
	$vm_design: 750;
	html {
	    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw; 
	    // 同时，通过Media Queries 限制根元素最大最小值
	    @media screen and (max-width: 320px) {
	        font-size: 64px;
	    }
	    @media screen and (min-width: 540px) {
	        font-size: 108px;
	    }
	}
	// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
	body {
	    max-width: 540px;
	    min-width: 320px;
	}

总结

响应式布局的实现：

• 媒体查询 + px
• 媒体查询 + 百分比
• 媒体查询 + rem + js
• vw/h + rem

每种方案都有各自的缺点：

1. 媒体查询的缺点是在断点切换的瞬间，布局会带来断层式的切换变化
2. 百分比计算繁琐
3. rem需要js脚本监听分辨率变化
4. 视口单位有兼容性问题