浅谈响应式布局如何实现

一，何为响应式布局？

响应式布局又称（流动网格布局）它的出现是为了实现在不同的屏幕分辨率下的终端上网页的不同展示方式，如pc端，移动端，横竖屏等），通过响应式布局的设计能使我们的页面在终端上有更好的浏览和阅读体验。

要注意…响应式布局和自适应布局是不同的。

二，如何实现响应式布局?

1，百分比布局

百分比布局又称 (非固定像素的布)，利用对属性设置百分比的等比例设置来适配不同的屏幕，但要注意的是百分比布局的css属性设置虽然是依赖于父元素相对应的属性进行的百分比换算，但也不全都是。

	<div class='box'>
		<div class='box1>
		<div/>
	<div/>	
	<style>
	.box{
		width:200px;
		height:100px;
		background:red;
		}
		.box1{
			width:50%;  //100px
			height:50%;	//50px
			position: absolute;
            top:50%;	//50px
            bottom:50%;	//50px
            left: 50%;	//100px
            right: 50%;	//100px
            margin-top:50%;	//100px
            padding-left:50%;	//100px
		}
	<style/>

我们可以看到子元素的属性百分比等比例换算的是的属性分别是

• 子属性【宽度】对应父属性【宽度】的百分之50
• 子属性【高度】对应父属性【高度】的百分之50
• 子属性定位后的【top.bottom】对应的是父属性的【高度】
• 子属性定位后的【left,right】对应的是父属性的【宽度】
• 子属性的padding和margind 对应的则都是父属性的【宽度】
• 顺便说一下如果是border-radius这个属性的它对应的是【自身】的【宽度】

百分比的布局的缺点就可以看到了，并不是所有的属性都是相对于父元素的，所以这样就会导致我们
计算难度的加大。

2，媒体查询
媒体查询我们可以理解为，针对不同的媒体类型定义不同的样式，编写多类css样式从而达到响应式布局

		//当宽度为960px时
@media screen and (max-width: 960px){
    body{
      background-color:#FF6699
    }
}
		//当宽度为768px时
@media screen and (max-width: 768px){
    body{
      background-color:#00FF66;
    }
}
		//当宽度为550px时
@media screen and (max-width: 550px){
    body{
      background-color:#6633FF;
    }
}
		//当宽度为320px时
@media screen and (max-width: 320px){
    body{
      background-color:#FFFF00;
    }
}

但媒体查询的缺点也很明显，如果浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐，并且对IE低版本浏览器的兼容也不是很有好。

3，Rem 布局
rem是一个相对长度单位，是相对于根元素的font-size属性来进行设置大小的，它比em好在了，不管嵌套多少层，它都是只相对于根元素的字体大小发生改变的。
比如 body的font-size=100px; 那么1rem=100px;
rem自身是无法做到响应式布局的，它需要借助其他的方法,比如:
媒体查询
利用媒体查询在不同设备宽度时给根元素的font-size赋不同的值
利用js去动态生成rem
可以理解为监听浏览器的resize事件，然后动态生成font-size的大小

    (function (designWidth) {
        function getRem() {
            let html = document.getElementsByTagName('html')[0]
            let deviceWidth = document.body.clientWidth || document.documentElement.clientWidth
            console.log(deviceWidth)
            let rem = deviceWidth / designWidth 
            console.log(rem)
            html.style.fontSize = rem + 'px'
        }
        getRem()
        window.addEventListener('resize', function () {
            getRem()
        })
    })(750)

但其缺点就是，在浏览器访问时会有一个换算的过程。
4，vw/vh 响应式布局
css中引入一个新的单位vw/vh 他们和百分比布局有点相像，vw\vh是对试图窗口的宽高，进行的等比例换算，vw相对于试图的宽度，vh相对于试图的高度。
比如对于iphone6/7 375*667的分辨率，那么px可以通过如下方式换算成vw：

1px = （1/375）*100 vw

（它是现在手机端用的比较多的一个方法）