响应式布局设计

详细讲解响应式布局
Bootstrap 响应式设计
Bootstrap 网格系统
Bootstrap 响应式实用工具

响应式设计的步骤

  1. 设置 Meta 标签
  2. 通过媒介查询来设置样式 Media Queries
  3. 设置多种试图宽度

1设置 Meta 标签:

大多数移动浏览器将HTML页面放大为宽的视图(viewport)以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器,使用设备的宽度作为视图宽度并禁止初始的缩放。在标签里加入这个meta标签。

2通过媒介查询来设置样式 Media Queries

Media Queries 是响应式设计的核心。

它根据条件告诉浏览器如何为指定视图宽度渲染页面。假如一个终端的分辨率小于 980px,那么可以这样写:

@media screen and (max-width: 980px) {
  #head { … }
  #content { … }
  #footer { … }
}

这里的样式就会覆盖上面已经定义好的样式。

3设置多种试图宽度

假如我们要设定兼容 iPad 和 iphone 的视图,那么可以这样设置:

/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}

一些注意的

  1. 宽度需要使用百分比

例如这样:

请输入代码

你可能感兴趣的:(响应式布局,css)