面试资料积累css-响应式布局

Responsive design
意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。
传统的开发方式是PC端开发一套，手机端开发一套，而使用响应式布局只要开发一套就够了，缺点就是css比较重。
实现方案有：媒体查询、百分比布局、rem布局、视口单位、图片响应式
方案一：

媒体查询：

css3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，
而面会根据浏览器的宽度和高度来重新渲染页面。
屏幕大小分割点的参考值 ：超小屏幕手机<768px, 小屏幕平板>=768px
， 中等屏幕桌面显示器（>=992px）, 大屏幕大桌面显示器（>=1200px）
移动优先还是pc优先？
不管是移动优先还是pc优先，都是依据当随着屏幕宽度增加或者减少的时候，后面的样式会覆盖前面的样式。
因此，移动端优先首先使用的是min-width,pc端优先使用的是max-width.

方案二:

百分比布局

通过百分比单位，可以使得浏览器中组件的宽度和高度随着浏览器的高度的变化 而变化 ，
从而实现响应式的效果。
如果使用百分比一定要清楚子元素的百分比到底是相对谁的百分比。其缺点也很明显，计算困难，
如果 我们要定义一个元素的宽度和高度，按照设计 稿，必须换算成百分比单位 。
其次 ，可以看出各个属性中如果使用百分比，相对父元素的属性并不是唯一的。
比如width和height相对于父元素的width,height，而margin.padding不管垂直还是水平方向
都相对比父元素的宽度，
border-radius则是相对于元素自身等《造成我们使用百分比单位容易布局变得复杂。

方案3：rem布局

rem是css3新增的单位，并且移动端的支持度很高，rem单位都是相对于根元素html的
font-size来决定大小的，
根元素的font-size相当于提供一个基准，当页面的size发生变化时，只需要改变font-size的值，
那么以rem为固定单位的元素的大小也会发生响应的变化 ，因此，如果通过rem来实现响应式的布局，
只需要根据视频容器的大小，动态的改变font-size即可。
其缺点是必须通过js来动态控制根元素的font-size大小，
也就是说css样式和js代码有一定的耦合性，且必须将改变font-size的代码放在css样式之前。
REM布局是目前多屏幕适配的最佳方式。
默认情况下我们html标签的font-size为16px,我们利用媒体查询，设置在不同设备下的字体大小。

方案4：视口单位

css3引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，
vh表示相对于视图窗口的高度，除了vw和vh外，还有vmin,vmax两个相关的单位。
vw是相对于视窗宽度，1vw等于视口宽度的1%，即视窗宽度是100vw.
vmin:vw和vh中较小的值。

方案5：图片响应式

大小自适应，这样能够保证图片在不同的屏幕分辨率下不出现压缩、拉伸情况;一个就是根据不同的屏幕分辨率
和设备像素比来尽可能的选择高分辨率的图片，也就是当在小屏幕上不需要高清图或大图时
，这样我们用小图代替，就可以减少网络带宽了。
1.使用max-width图片自适应，随着容器的大小进行缩放。
2`,<img srcset="photo_w350.jpg 1x, photow_640.jpg 2x" src="photo.jpg">`
如果屏幕的dpi=1 的话，则加载1倍图，而dpi=2则加载2倍图，手机和mac基本上dpi都达到2以上，
这样子对于普通屏幕来说不会浪费流量，而对于视网膜屏来说又有高清的体验。
如果浏览器不支持srcset，则默认加载src里面的图片
3.使用background-image与media进行图片区分
4.使用picture标签

总结：
响应式布局的实现可以通过媒体查询+px,媒体查询+百分比，媒体查询+rem+js，vm/vh, vm/vh+rem这几种方式来实现。但每一种实现方式都有缺点。
媒体查询需要选尺寸，切换过程中有断层效果。
百分比计算麻烦，布局更复杂
rem需要结合 js，耦合性太高。
css视口单位，能解决断层，和脚本依赖，但是兼容性差