响应式布局
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
响应式布局等于流动网格布局,而自适应布局等于使用固定分割点来进行布局。
响应式原理
- CSS3中的Media Query(媒体查询)
- 通过查询screen的宽度来指定某个宽度区间的网页布局
- 超小屏幕(移动设备)
768px以下
- 小屏设备
768px-992px
- 中等屏幕
992px-1200px
- 宽屏设备
1200px
使用
语法
关于媒体查询@media
@media screen and (max-width: 768px) and (min-width: 320px){属性样式}
|
设计一个响应式容器: 1. 在超小屏设备的时候 768px以下 当前容器的宽度100% 背景蓝色 2. 在小屏设备的时候 768px-992px 当前容器的宽度750px 背景绿色 3. 在中屏设备的时候 992px-1200px 当前容器的宽度970px 背景红色 4. 在大屏设备的时候 1200px以上 当前容器的宽度1170px 背景黄色
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <title>Title</title> <style> body { margin: 0; padding: 0; }
.container { width: 1000px; margin: 0 auto; height: 1000px; background: pink; }
@media screen and (max-width: 768px) { .container { width: 100%; background: blue; } }
@media screen and (min-width: 768px) and (max-width: 992px) { .container { width: 750px; background: green; } }
@media screen and (min-width: 992px) and (max-width: 1200px) {
.container { width: 970px; background: red; } }
@media screen and (min-width: 1200px) {
.container { width: 1170px; background: yellow; } } </style> </head>
<body>
<div class="container"></div> </body>
</html>
|
这就简单做到了一个响应式的适配