响应式布局和自适应布局&区别

1.什么是响应式布局和自适应布局

响应式布局

响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。换句话说就是一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本。

响应式开发的原理

动态根据当前屏幕的宽度，自动改变页面中盒子的宽度、盒子的显示或隐藏。

响应式开发的优缺点

优点：

1. 对于不同设备只需要开发一套网页即可，公司开发成本较低
2. 一套网页可以适配多个终端

缺点：

1. 一个页面需要兼容多个终端，考虑的情况多种，开发效率较慢
2. 代码会更多，网页的加载速度较慢

响应式开发的设备屏幕分类

分类名称	响应式开发
超小屏设备	0 ~ 768px
小屏设备	768px ~ 992px
中屏设备	992px ~ 1200px
大屏设备	>1200px

媒体查询

媒体查询（Media Query)：是CSS3新增的方法，可以通过动态查询屏幕的宽度，根据不同的屏幕宽度设置样式是否生效。

语法：

注意点：

1. 页面布局最好采用液态布局（流式布局）
2. 尽量少使用绝对的宽度，多用百分比
3. 字体不要使用px写死，最好使用相对大小的em，或者rem

条件：
min-width：样式生效的屏幕最小宽度

/* 只有当屏幕宽度大于等于600px时，样式才会生效 */
@media screen and (min-width:600px) {
    div {
        width: 100px;
        height: 100px;
        background-color: #aff;
    }
}

max-width ：样式生效的屏幕最大宽度

/* 只有当屏幕宽度小于等于800px时，样式才会生效 */
@media screen and (max-width:800px) {
    div {
        width: 100px;
        height: 100px;
        background-color: #ffa;
    }
}

width：样式生效的宽度

/* 样式只在700px宽度的时候才会生效 */
@media screen and (width:700px) {
    div {
        width: 200px;
        height: 200px;
        background-color: #afa;
    }
}

and ：一个媒体查询中可以同时写多个条件，中间通过and连接即可

/* 样式在 600~800中间生效 */
@media screen and (min-width:600px) and (max-width:800px) {
    div {
        width: 200px;
        height: 200px;
        background-color: #faf;
    }
}

手机适配：

"viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
name="viewport"：视口显示，一般移动端才会去设置视口显示
width=device-width：设置网页的宽度为自动调整，跟当前屏幕实际宽度大小一样
initial-scale=1.0：设置网页默认的比例为1:1
user-scalable=no：设置用户是否可以缩放

如何测试一个网页是否为响应式网页？

1. 浏览器提供的模拟器测试，最常用的测试手段
2. 真机调试，效果最好但也最麻烦
3. 第三方模拟器测试软件，最常用的，测试效果有待验证

自适应布局

自适应布局就是指能忘了使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术，它需要开发多套界面来适应不同的终端。

如上图，左右定宽，中间自适应布局。
实现方式：

"con">
	
"left">left
	
"right">right
	
"main">main

1. float
   左右两个div分别左右浮动，不再占用文档流，块元素div.main自动占据整行，然后给main添加左右margin分别为左右两块元素的宽

.con{
    width: 500px;
	height: 100px;
}
div{
	height: 100px;
}
.left{
	float: left;
	width: 100px;
	background: #aff;
}
.right{
	float: right;
	width: 100px;
	background: #faa;
}
.main{
	background: #faf;
	margin: 0 100px;
}

2. position
   左右两个div分别绝对定位到父元素左右，中间div.mian设置margin分别为左右两元素的宽

.con{
    width: 500px;
	height: 100px;
	position: relative;
}
div{
	height: 100px;
}
.left{
	position: absolute;
	left: 0;
	width: 100px;
	background: #aff;
}
.right{
	position: absolute;
	right: 0;
	width: 100px;
	background: #faa;
}
.main{
	background: #faf;
	margin: 0 100px;
	}

3. 负的margin
   三元素分别浮动，中间元素width：100%，
   然后在利用负的margin给left和right定位，
   最后给div.main的子元素设置左右margin分别为左右俩元素的宽度

"con">
	
"main">
		
"son">main
	
	
"left">left
	
"right">right
	

.con{
    width: 500px;
	height: 100px;
}
div{
	height: 100px;
}
.left{
	float: left;
	width: 100px;
	background: dodgerblue;
	margin-left: -100%;
}
.right{
	float: left;
	width: 100px;
	background: peru;
	margin-left: -100px;
}
.main{
	width: 100%;
	float: left;
	background: yellowgreen;
}
.son{
	margin:0 100px;
}

2.响应式布局和自适应布局区别

1. 自适应布局通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不同的页面；响应式布局通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。
2. 自适应布局需要开发多套界面，而响应式布局只需要开发一套界面就可以了。
3. 自适应对页面做的屏幕适配是在一定范围：比如pc端一般要大于1024像素，手机端要小于768像素。而响应式布局是一套页面全部适应。
4. 自适应布局如果屏幕太小会发生内容过于拥挤。而响应式布局正是为了解决这个问题而衍生出的概念，它可以自动识别屏幕宽度并做出相应调整的网页设计。

总之，响应式布局还是要比自适应布局要好一点，但是自适应布局更加贴切实际，因为你只需要考虑几种状态就可以了而不是像响应式布局需要考虑非常多状态。所以说无论哪种设计都有它们各自的特点，我们要根据项目的需求来选择适合的布局方式。