响应式布局与自适应布局

前言

这几天工作的时候被提出需要响应式布局的需求，但是响应式布局和自适应布局有嗲傻傻分不清楚。所以响应式布局和自适应布局到底有什么不同呢？

响应式布局

响应式布局就是一个页面根据不同的分辨率大小调整排版方式，使得一个网站可以兼容多个终端，不至于一个终端做一个特定的版本。不同的终端包括PC端，ipad端，移动端。

自适应布局

自适应布局是在不同大小终端设备上的网页自动伸缩不会排版错乱。但是需要开发多套界面来适应不同的终端。

两者的区别

• 自适应布局需要开发多套页面，而响应式布局只需要开发一套页面
• 响应式布局需要考虑更多的情况和状态，需要十分小心。而自适应布局相对而言考虑的要少一点。

实现响应式布局

1. Meta标签定义

在头部添加一行viewport标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

意思是网页宽度默认等于屏幕宽度，缩放比为1.0

2.不需要写固定的像素，改用%形式或者auto

.box{width:30%;height:30%}
.box2{width:auto}

3.使用css中的@media

@media screen and (max-device-width: 1080px) {  .box{ width:33.3% }

意思是屏幕小于1080px时候.box的宽度变为33.3%

4.按照屏幕大小不同引入不同的css文件

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 1080px)" href="style/css/demo1.css" />
/*也可以这样写*/
@import url("demo1.css") screen and (max-device-width: 1080px);

5.使用流式，浮动栅格布局

看到这个是不是就想起了熟悉的bootstrap，哈哈。其实自己也可以做出来，使用百分比和媒体查询@media也可以自己实现。

后记
暂时先总结这么多啦。