- 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
一般公司采用的是响应式布局，但是大公司则采用移动端和PC端分离的方法，如百度。
Paste_Image.png
Paste_Image.png
动画工具
http://www.f2e.name/case/css3/tools.html
响应式适配
Paste_Image.png
Paste_Image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" charset="UTF-8">
<title>CSS响应式</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
margin: auto;
}
.left {
float: left;
width: 20%;
height: 500px;
/*动画*/
-webkit-transition: 1s ease;
background-color: #52CE8F;
}
.middle {
-webkit-transition: 1s ease;
float: left;
width: 55%;
height: 800px;
/*上右下左*/
margin: 0 5px 0 5px;
background-color: #A190E4;
}
.right {
-webkit-transition: 1s ease;
float: left;
width: 20%;
height: 500px;
background-color: #9CD038;
}
@media only screen and (min-width:1024px) {
.container {
width: 1000px;
margin: auto;
}
}
@media only screen and (min-width: 400px) and (max-width: 1024px) {
.right {
width: 0;
}
.middle {
width: 65%;
}
.left {
width: 30%;
}
}
@media only screen and (max-width: 400px) {
.left,
.right,
.middle {
width: 98%;
height: 180px;
}
.middle {
margin: 5px 0 5px 0;
}
#animation {
-webkit-animation: rotateIn 1s .2s ease both;
-moz-animation: rotateIn 1s .2s ease both;
}
@-webkit-keyframes rotateIn {
0% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(-200deg);
opacity: 0
}
100% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(0);
opacity: 1
}
}
@-moz-keyframes rotateIn {
0% {
-moz-transform-origin: center center;
-moz-transform: rotate(-200deg);
opacity: 0
}
100% {
-moz-transform-origin: center center;
-moz-transform: rotate(0);
opacity: 1
}
}
}
.clear:after {
content: "";
width: 0;
height: 0;
display: block;
/*清除浮动 以便于显示背景颜色*/
clear: both;
}
</style>
</head>
<body>
<!-- 脱离文档流 -->
<div class="container clear">
<div class="left" id="animation">我是左侧</div>
<div class="middle" id="animation">我是中间</div>
<div class="right" id="animation">我是右侧</div>
<!-- 清除浮动 以便于显示背景色 -->
</div>
<div>11111</div>
</body>
</html>
xiangyingshi.gif
网友评论