响应式布局有几种方法？响应式布局方法总结 _响应式布局

响应式布局方法总结定义
响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够。
优点
缺点
响应式与自适应区别响应式布局方法一：媒体查询
使用@media媒体查询可以针对不同的媒体类型定义不同的样式，特别是响应式页面，可以针对不同屏幕的大小，编写多套样式，从而达到自适应的效果。举例来说：
@media screen and (max-width: 960px){ body{ background-color:#FF6699 }}@media screen and (max-width: 768px){ body{ background-color:#00FF66; }}@media screen and (max-width: 550px){ body{ background-color:#6633FF; }}@media screen and (max-width: 320px){ body{ background-color:#FFFF00; }}
上述的代码通过媒体查询定义了几套样式，通过max-width设置样式生效时的最大分辨率，上述的代码分别对分辨率在0～320px，320px～550px，550px～768px以及768px～960px的屏幕设置了不同的背景颜色。
通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，比如我们为不同分辨率的屏幕，设置不同的背景图片。比如给小屏幕手机设置@2x图，为大屏幕手机设置@3x图，通过媒体查询就能很方便的实现。
但是媒体查询的缺点也很明显，如果在浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。
响应式布局方法二：百分比%
比如当浏览器的宽度或者高度发生变化时，通过百分比单位，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。
,width属性的百分比依托于父标签的宽高。但是，、、等属性的情况又不一样？
缺点
响应式布局方法三：vw/vh
css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。
与百分比布局很相似，但更好用。
响应式布局方法四：rem
rem单位是相对于字体大小的html元素，也称为根元素。默认情况下，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 }}
利用rem和媒体查询，在分辨率发生变换时，给它不同的font-size 。
优化版
//动态为根元素设置字体大小function init () { // 获取屏幕宽度 var width = document.documentElement.clientWidth // 设置根元素字体大小。此时为宽的10等分 document.documentElement.style.fontSize = width / 10 + 'px'}//首次加载应用，设置一次init()// 监听手机旋转的事件的时机，重新设置window.addEventListener('orientationchange', init)// 监听手机窗口变化，重新设置window.addEventListener('resize', init)
理解：上面代码实现了，无论设备可视窗口如何变化，始终设置rem为width的1/10.即实现了百分比布局。就没有第一版的媒体查询那样僵硬。
以上代码需在dom之前写入（可放在head里面第一个标签）
利用UI框架实现响应式布局
其实，现在的主流UI框架都会考虑到响应式布局这个问题，比如，iview等框架提供了栅格系统，搭配来实现响应式布局。所以在工作中直接拿来使用就完事了。
移动端响应式布局

这个写法是用户不能缩放的页面设计。因为，如果页面能缩放的话，就会影响用户的体验，在手机端，我们都可以找到点击的按钮或者自己感兴趣的菜单进行操作。其二：就是我们如果让页面缩放的话，就完全暴露了我们手机app的程序是html的架构了。所以，我们专为移动端的设计页面的时候，就不需要用户进行缩放了。