什么是自适应网站?
指的是网页通过不同尺寸不同终端设备访问可以自适应显示,根据屏幕大小、宽度自动调整布局,自适应也可以叫响应式。自适应、响应式是HTML5新技术。
为什么需要自适应网页设计?
时代在进步,不断涌现的各种新型设备(手机/平板电脑)、平台和浏览器都需要你的网站的网页能够兼容显示。自适应网页设计代表了一种必然的设计趋势。
注意:自适应网站浏览器硬性要求IE9及以上
为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport 元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
栅格系统
栅格参数实例
布局容器
- .container 类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div>
- .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
<div class="container-fluid">
...
</div>
网友评论