当前位置 博文首页 > 大曾blog：DaZeng：响应式布局和自适应布局——深入浅出
自适应是让同一个页面布局适应不同的屏幕。
响应式是不同的屏幕用不同的布局。
响应式布局：使用媒体查询，就是写多个@media 命令来控制设备的大小，让页面在不同的宽度范围下，显示为不同的布局效果 。如果使用 min-width属性，则应该从小的断点开始写，到大的断点结束。
media属性
一般来说，先写一个默认大屏幕的样式；再写其它断点下的样式；可能断点判断异常，还需要在部分区间去写一个断点。
<link rel="stylesheet" media="screen and (min-width :1200px)" href="demo2.css">
<style>
@media (min-width: 576px) {
body {
background-color: #f00;
color: white;
}
}
/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
body {
background-color: rgb(0, 255, 42);
color: rgb(12, 2, 2);
}
}
/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
body {
background-color: rgb(149, 165, 3);
color: rgb(12, 2, 2);
}
}
/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
body {
background-color: rgb(7, 7, 7);
color: rgb(245, 16, 16);
}
}
</style>
1.什么是响应式布局
响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。换句话说就是一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本。
2.什么是自适应式布局：
自适应布局就是指能使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术，它需要开发多套界面来适应不同的终端。
总结：一句话就是自适应是让同一个页面布局适应不同的屏幕，响应式是不同的屏幕用不同的布局。
响应式布局和自适应布局的不同
cs