Responsive Web Design 概述

什么是Responsive Web Deign

Responsive Web Deign缩写为RWD,叫做响应式设计,是精心提供各种设备都能浏览网页的一种设计方法,RWD能让网页在不同的设备中展现不同的设计风格。

Responsive设计特点

  1. 必须建立灵活哦的网格基础
  2. 引用的网站的图片必须是可伸缩的
  3. 不同的显示风格,需要在Media Query上设置不同的样式

缺少任何一个功能,就不能成为合格的RWD设计

流体网格

流体网格是一个简单的网格系统,这种网格设计参考了流体设计中的网格系统,将每个网格格子使用百分比单位来控制网格大小 ,随时可以根据屏幕尺寸大小做出相对应的比例缩放

弹性图片

弹性图片指的是不给图片设置固定尺寸,而是根据流体网格进行缩放。用于适应各种网格的尺寸。可以使用max-width:100%实现

主要断点

主要断电时Responsive设计中很重要的一部分,简单的来说就是设备宽度的临界点。在Media Query中,普通的来说min-widthmax-width对应的属性值,就是使用断点来创建媒体查询的条件,每一个断点会对应调用一个样式文件或样式代码

设置断点应该把握以下三点要求

  1. 满足主要的断点
  2. 有可能的话添加一些别的断点
  3. 设置高于1024px的桌面断点
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 992px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 680px) {
}
@media screen and (max-width: 480px) {
}

Responsive布局技巧

  • 尽量少用无关紧要的div
  • 不要使用内联元素
  • 尽量少用JS
  • 丢弃没用的冗长结构和不使用100%设置
  • 使用HTML5 DOCTYPE及其相关
  • reset.css
  • 做一个有语义的核心布局
  • 给重要的网页元素使用简单的技巧,比如导航菜单之类元素

meta标签

当Responsive设计页面在智能设备中进行测试的时候,所有的媒体查询都不会生效,页面仍展示位普通的样式,即一个全局缩小够的页面。

这是因为许多智能手机都使用一个比实际屏幕大很多的虚拟可视区域主要目的就是让页面在智能手机端阅读时不会因为实际可视区域而变形。为了让智能手机能根据媒体查询对应样式,让页面在智能手机中正常显示,添加了一个特殊的meta标签,这个标签的主要作用就是让智能手机浏览网页时能进行优化并且可以自定义界面可视区域的尺寸和缩放级别

<meta name="viewport" content="">

content属性中主要包括一下几个属性值,这些属性值用来处理可视区域

  1. width:可视区域的宽度,其值可以是一个具体数字或关键词device-width
  2. height:可视区域的高度,其值可以是具体数字或关键词device-height
  3. initial-scale:页面首次被显示时可视区域的缩放级别,取值为1.0时使页面按实际尺寸显示,无任何缩放
  4. minimun-scale:可视区域的最小缩放级别,表示用户可以将页面缩小的程度,取值为1.0时将用户缩小至实际尺寸以下
  5. maximum-scale:可视区域的最大缩放级别,表示用户可以将页面放大的程序,取值为1.01时将禁止用户放大至实际尺寸以上
  6. user-scalable:指定用户是否可以对页面进行缩放,设置为yes将允许缩放,no为禁止缩放

<meta name="viewport" content="width=device-width,initial-scale=1.0">