Technology

CSS的Responsive设计

Responsive设计（一）

什么是响应式设计呢？维基百科是这样对响应式作的描述：“Responsive设计简单的称为RWD，是精心提供各种设备都能浏览网页的一种设计方法，RWD能让你的网页在不同的设备中展现不同的设计风格。”从这一点描述来说，RWD不是流体布局，也不是网格布局，而是一种独特的网页设计方法。

响应式设计要考虑元素布局的秩序，而且还需要做到“有求必应”，那就需要满足以下三个条件：网站必须建立灵活的网格基础；引用到网站的图片必须是可伸缩的；不同的显示风格，需要在Media Queries上写不同的样式。

要想灵活的使用Responsive，仅满足这几个条件还是不够的，我们必须对Responsive有一个全面的了解，那么要了解Responsive，就得先了解他的一些术语：

  1. 流体网格

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

  1. 弹性图片

弹性图片指的是不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。而实现方法是比较简单，一句代码就能搞定的事情。

1
2
3
img {
  max-width: 100%;
}

不幸的是，这句代码在IE8浏览器存在一个严重的问题，让你的图片会失踪。当然弹性图片在响应式设计中如何更好的实现，到目前为止都还存在争议，也还在不断的改善之中。

为每一个断点提供不同的图片，这是一个比较头痛的事情，因为Media Queries并不能改变图片“src”的属性值，那有没有办分法可以解决呢？可以参考一下下面的解决方法。

使用background-image给元素使用背景图片，显示/隐藏父元素，给父元素使用不同的图片，然后通过Media Queries来控制这些图片显示或隐藏。

来看一个断点解决图片自适应的例子。

1
<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="" />

对应的CSS代码：

1
2
3
4
5
6
7
8
9
10
11
@media (min-device-width: 600px) {
  img[data-src-600px] {
    content: attr(data-src-600px, url);
  }
}

@media (min-device-width: 800px) {
  img[data-src-800px] {
    content: attr(data-src-800px, url);
  }
}

请注意：这仅仅是解决响应式图片自适应的一种思路，但这种方案仅仅适配的断点较少。并不太实用，此处仅为扩展同学们的思路。

  1. 媒体查询

媒体查询在CSS3中得到了强大的扩展。使用这个属性可以让你的设计根据用户终端设备适配对应的样式。这也是响应式设计中最为关键的。可以说Responsive设计离开了Medial Queries就失去了他生存的意义。简单的说媒体查询可以根据设备的尺寸，查询出适配的样式。Responsive设计最关注的就是：根据用户的使用设备的当前宽度，你的Web页面将加载一个备用的样式，实现特定的页面风格。

4. 屏幕分辨率

屏幕分辨率是指用户显示器的分辨率。在更深入的层面上，屏幕分辨率指的是用户使用的设备（如智能手机浏览器、移动电脑浏览器、平板电脑浏览器和桌面浏览器）在浏览您的网页时的显示屏幕分辨率。响应式设计利用媒体查询属性来适应不同浏览器分辨率下的CSS样式。因此，在响应式设计中，屏幕分辨率是非常重要的，只有了解网页在不同分辨率下应该显示的效果，才能调用相应的样式。

5. 主要断点

主要断点是Web开发中的一个新术语，但在响应式设计中占据重要地位。简单地说，主要断点是设备宽度的临界点。在媒体查询中，”min-width”和”max-width”这两个媒体特性对应的属性值就是响应式设计中的主要断点值。换句话说，通过使用主要断点和次要断点，可以创建媒体查询的条件。每个断点对应调用一个样式文件（或样式代码）。

Responsive布局技巧

通过上面的介绍，大家对响应式设计有了一定的了解，但在实际制作中还是有一些布局技巧的：

在Responsive布局中，可以毫无保留地丢弃：

  1. 尽量少用无关紧要的div。
  2. 不要使用内联元素（inline）。
  3. 尽量少用JS或Flash。
  4. 丢弃没用的绝对定位和浮动样式。
  5. 摒弃任何冗余结构和不使用100%设置。

有舍才有得，丢弃了一些对Responsive有影响的东东，那么有哪些东东能帮助Responsive确定更好的布局呢？

  1. 使用HTML5 Doctype和相关指南。
  2. 重置好你的样式（reset.css）。
  3. 一个简单的有语义的核心布局。
  4. 给重要的网页元素使用简单的技巧，比如导航菜单之类的元素。

自由缩放属性resize

为了增强用户体验，CSS3增加了很多新的属性，其中resize就是一个重要的属性，它允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小。到目前为止，可以使用overflow属性的任何容器元素。

CSS3 outline 外轮廓属性

外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现。

参数值有：color、style、width、offset。

Share