前端实现响应式布局的几种方法
前言
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着大屏幕移动设备的普及，用“大势所趋”来形容也不为过。
最近写的项目都有考虑响应式，接下来我来分享一下我用过的响应式处理方案，有错请多多指教！
目录
前言1.媒体查询（1）用法一（2）用法二（3）用法三
2.flex 弹性布局（1）交叉轴与主轴（2）容器属性（3）项目属性
3.rem布局（1）用法(2) 动态适配
4.自适应布局（1）不同的设备使用不同的页面（2）局部伸缩
5.百分比布局6.grid布局
1.媒体查询
概念：为不同尺寸的屏幕设置不同的 CSS 样式
当屏幕符合时，会使用里面的样式，如果外部设置过，则会替换里面相同的样式，不同的样式会继承
@media 常用参数
属性名作用width、height浏览器可视宽度、高度device-width设备屏幕的宽度device-height设备屏幕的高度
（1）用法一
/* 屏幕小于 300 px */
@media screen and (max-width: 300px) {
div {
background-color:red;
}
}
/* 屏幕大于 300 px */
@media screen and (min-width: 300px) {
div {
background-color:yellow;
}
}
/* 屏幕小于 300px 大于 200px */
@media screen and (min-width: 200px) and (max-width: 300px){
div {
background-color:blue;
}
}
（2）用法二
条件执行内联样式
（3）用法三
条件引入外部样式表
// 当浏览器宽度大于 200px 时引入 test2.css
2.flex 弹性布局
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
注意：Webkit内核的浏览器，必须加上-webkit前缀。（Chrome、Safari、etc）
（1）交叉轴与主轴
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）
根据项目排列方式判定主轴与交叉轴，例如项目水平排列，则x轴为主轴，y轴为交叉轴。
单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
（2）容器属性
详细讲解可以看这里：菜鸟教程Flex
属性名作用可选值flex-direction决定主轴的方向（即项目的排列方向）row / row-reverse / column / column-reverseflex-wrap决定是否开启换行，如何换行nowrap / wrap / wrap-reverseflex-flowflex-direction 和 flex-wrap 的简写形式，默认值为 row nowrap justify-content定义了项目在主轴上的对齐方式flex-start / flex-end / center / space-between / space-aroundalign-items定义项目在交叉轴上如何对齐flex-start / flex-end / center / baseline / stretchalign-content定义多根轴线的对齐方式（相对于把整个容器看成整体）。只有一根轴线时，不起作用flex-start / flex-end / center / space-between / space-around / stretch
（3）项目属性
属性名作用可选值order定义项目的排列顺序。数值越小，排列越靠前，默认为0flex-grow定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大flex-shrink定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小flex-basis定义了在分配多余空间之前，项目占据的主轴空间 ，默认值为auto / autoflexflex-grow, flex-shrink 和 flex-basis的简写，默认值为 0 1 auto ， 后两个属性可选。none / [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]align-self允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性auto / flex-start / flex-end / center / baseline / stretch
flex的特殊写法
属性展开作用flex:auto;flex:1 1 auto有剩余空间自动放大，不够空间则自动缩小，相对于自适应大小flex:none;flex:0 0 auto不放大不缩小，按width展示项目宽度flex:0%;flex:1 1 0%自适应大小flex:100px;flex:1 1 100px自适应大小flex:1;flex:1 1 0%自适应大小
3.rem布局
概念：指相对于根元素的字体大小的单位
区别：em（指相对于父级的字体大小的单位）
（1）用法
html{
font-size:10px;
}
div {
font-size:1rem;
}
(2) 动态适配
可以加监听动态修改
// 其实就是根据设备宽度修改根元素 font-size 大小
// 假设设计稿是iphone6 16px
let baseDevice = 375 // iphone6 设备宽度
let baseFontSize = 16 // 设计稿 16px
let htmlWidth=document.documentElement.clientWidth || document.body.clientWidth;
let htmlDom=document.documentElement
htmlDom.style.fontSize=(htmlWidth/baseDevice)*16+'px';
4.自适应布局
（1）不同的设备使用不同的页面
(function(){
if(window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
console.log('移动端')
window.location.href = "phone.html"
}else{
console.log('PC端')
window.location.href = "pc.html"
}
})()
（2）局部伸缩
例子：两端宽度不变，中间宽度随浏览器宽度改变
5.百分比布局
使用百分比作为单位进行布局，可以很好的自适应全部设备，百分比参考的是父级元素的宽度，无父元素则相对于浏览器窗口的宽度。（缺点是计算困难）
子元素父元素width基于父级的widthheight基于父级的heightmargin（top,right,bottom,left）基于父级的widthpadding（top,right,bottom,left）基于父级的widthleft,top,right,bottom基于父元素的width，height，width，heightfont-size基于继承得到的font-sizeline-height基于当前字体的font-sizetransform(left, top)基于自身的left， top
6.grid布局
与flex类似，但是功能更强大，暂无实例，可以取康康好的文章
阮一锋的grid讲解