65. CSS3 Responsive设计

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

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

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

1.流体网格

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

2.弹性图片

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

img {max-width:100%;}

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

为每一个断点提供不同的图片，这是一个比较头痛的事情，因为 Media Queries 并不能改变图片“src”的属性值，那有没有办分法可以解决呢？可以参考一下下面的解决方法。使用 background-image 给元素使用背景图片，显示/隐藏父元素，给父元素使用不同的图片，然后通过 Media Queries 来控制这些图片显示或隐藏。

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

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

对应的 CSS 代码：

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

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

3.媒体查询

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

4.屏幕分辨率

屏幕分辨简单点说就是用户显示器的分辨率，深一点说，屏幕分辨率指的是用户使用的设备浏览您的 Web 页面时的显示屏幕的分辨率，比如说智能手机浏览器、移动电脑浏览器、平板电脑浏览器和桌面浏览器的分辨率。Responsive 设计利用 Media Queries 属性针对浏览器使用的分辨率来适配对应的 CSS 样式。因此屏幕分辨率在 Responsive 设计中是一个很重要的东西，因为只有知道 Web 页面要在哪种分辨率下显示何种效果，才能调用对应的样式。

5.主要断点

主要断点，在 Web 开发中是一个新词，但对于 Responsive 设计中是一个很重要的一部分。简单的描述就是，设备宽度的临界点。在 Media Queries 中，其中媒体特性“min-width”和“max-width”对应的属性值就是响应式设计中的断点值。简单点说，就是使用主要断点和次要断点，创建媒体查询的条件。而每个断点会对应调用一个样式文件（或者样式代码），如下图所示：

上图的 style.css 样式文件运用在 Web 页面中，但这个样式文件包括了所有风格的样式代码，也就是说所有设备下显示的风格都通过这个样式文件下载下来。当然，在实际中还可以使用另一种方法，也就是在不同的断点加载不同的样式文件，如下图所示。

上图主要显示的是主要断点，主要断点加载的不同样式文件直接将影响 Web 的效果。除了主要断点之外，为了满足更多效果时，还可以在这个基础上添次要断点。不过主要断点和次要断点增加之后，需要维护的样式也相应的增加，成本也相对应的增加。因此在实际使用中，需要根据自身产品需求，决定断点。

综合下来，设置断点应把握三个要点：满足主要的断点；有可能的话添加一些别的断点；设置高于 1024 的桌面断点。

以上关于65. CSS3 Responsive设计的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。