响应式布局设计

时间 2019-12-06

标签响应布局设计繁體版

原文原文链接

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

响应式设计的步骤

设置 Meta 标签
经过媒介查询来设置样式 Media Queries
设置多种试图宽度

1设置 Meta 标签：

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

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

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

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

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

@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) {}

一些注意的

宽度须要使用百分比

例如这样：post

请输入代码