【响应式Web设计】读书笔记 - 响应式Web设计基础（一） - 1

最新推荐文章于 2023-06-12 11:05:52 发布

一点编程

最新推荐文章于 2023-06-12 11:05:52 发布

阅读量1k

点赞数

分类专栏：响应式Web设计文章标签：响应式web设计

本文链接：https://blog.csdn.net/JasonAPoint/article/details/68951285

版权

响应式Web设计专栏收录该内容

12 篇文章 0 订阅

订阅专栏

【简介】早期的网站都是固定宽度设计的，目标是让所有用户都拥有相同的体验。这种股东宽度（通常为 960 像素左右）对笔记本电脑来说不算太宽，拥有更大显示器的用户则会在这两侧看到很大的白边。同时，随着移动设备的普及，以及 27 英寸乃至 30 英寸的大屏幕显示器如今也成为了司空见惯的东西，这样一来，上网设备屏幕之间的差距也达到了前所未有之大。

面对不断扩展的浏览器和设备的解决方案就是局域 HTML5 和 CSS3 的响应式 Web 设计。响应式 Web 设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。

1. 响应式 Web 设计

「响应式 Web 设计」这个名字是 Ethan Marcotte 在2010 年提出的，实质上是一个运用了三种已有技术（弹性网格布局、弹性图片/媒体、媒体查询）实现了一个解决方案，就叫「响应式 Web 设计」。

所谓响应式 Web 设计，就是网页内容会随着访问它的视口及设备的不同而呈现的样式。

最初，响应式设计是从「桌面」、固定宽度设计开始的。然后，到了小屏幕上，内容会重排。或者根据情况隐藏部分内容。可是，随着时间推移，人们发现，还是采用相反的设计思路更好，即先为小屏幕设计内容、样式，然后再向大屏幕扩展。

2. 兼容性问题

这部分内容含有我自己从业这么久以来的一些经验和个人感悟，同时，受到个人知识面的局限性，所述内容可能不尽属实，仅供参考。

书中作者介绍，在写作这一版的 2015 年年中，IE6、IE7、IE8 基本消失了，就连 IE9 的市场份额也降到了 2.45%（IE10 只占 1.94%，IE11 上升到了11.68%）。这或许是作者所在地区的情况。而国内情况，截至 2017 年 3 月， IE8 依然有超过 10% 的市场份额（数据来自百度统计）。

这里写图片描述

关于这份统计数据百度统计有两点说明：

[1] 本报告数据，来源于百度统计所覆盖的超过150万的站点，而不是baidu.com的流量数据。
[2] 奇虎360浏览器份额在2010年10月至2011年3月，和2012年9月以来，两次大幅下降，是因为360浏览器去掉了原本的浏览器特征（User-Agent），而表现为IE等浏览器特征所致。

所以针对国内的情况，除了做一些受众面广的应用之外，可以逐渐不考虑 IE8 以下版本的兼容性，把精力放在现代浏览器和显示屏上。

3. 第一个响应式例子

3-1. HTML

<!DOCTYPE html>
<html>
<head>
<title>HTML默认情况</title>
<meta charset="utf-8">
</head>
<body>
<ul>
    <li>「响应式 Web 设计」这个名字是 Ethan Marcotte 在2010 年提出的，实质上是一个运用了三种已有技术（弹性网格布局、弹性图片/媒体、媒体查询）实现了一个解决方案，就叫「响应式 Web 设计」。</li>
    <li>所谓响应式 Web 设计，就是网页内容会随着访问它的视口及设备的不同而呈现的样式。</li>
    <li>最初，响应式设计是从「桌面」、固定宽度设计开始的。然后，到了小屏幕上，内容会重排。或者根据情况隐藏部分内容。可是，随着时间推移，人们发现，还是采用相反的设计思路更好，即先为小屏幕设计内容、样式，然后再向大屏幕扩展。</li>
</ul>
</body>
</html>

这是浏览器「最大化」情况下的布局：

这里写图片描述

而且 默认情况下，网页文本布局是弹性的。 即缩放浏览器窗口，文本会根据屏幕的缩放自动重排（我们将浏览器进行缩放后得到下图的排版）：

这里写图片描述

默认情况下，移动端会按整张网页渲染，然后再把页面缩小呈现在视口当中：

这里写图片描述

注：我这里用的是 iphone6s 的 Safari 浏览器，其他不同厂商手机不同浏览器会有所差异。

看到这里，不得不提一个概念——视口（viewport）。

视口，指的是网页显示的区域。 而我们所说的屏幕，包括网页显示部分，顶部导航栏、地址栏，顶部导航栏等，都算在内。所以，视口通常不等于屏幕大小，屏幕不仅包括网页显示部分，还包括浏览器的上面部分。

简单的说，视口指网页显示部分，屏幕指整个液晶屏幕。

为了解决移动端会缩放页面，导致移动端文字有时候太小而无法辨认的问题，我们需要引入一个「viewport」，告诉浏览器怎么渲染网页。 在<head> 标签中添加代码：

<meta name="viewport" width="width=device-width">

其作用是按照设备的宽度（device-width）来渲染网页内容。 这样，页面就不会按照 PC 页面大小来渲染，再进行整体缩放了。

这里写图片描述

我们可以看到，通过view-port适配后的页面，与之前没有适配过的页面的排版上是有些差别的，排版按照默认字体重排了，而不是整体缩放后的排列。

3-2. 图片

在移动端显示一张图片，我们的手机屏幕宽度为365像素，如果直接把图片设置为365像素，那么在屏幕旋转之后，屏幕宽度由320像素，摆成了667像素，这时候，先前365像素的图片就不适用了。而这一问题的一个简单解决方案就是使用max-width属性。

img{
    width:100%;
}

通过这个属性来保证所有图片最大显示为其自身的100%（即最大只可以显示为自身那么大）。

这里我们不使用width属性，因为如果给width属性设置一个值，那么图片就会按照该值显示，不考虑自身固有宽度。子啊容器比图片宽得多的情况下，图片会被无畏地拉伸。

3-3. 媒体查询

媒体查询可以让我们在某些条件下（比如宽度和高度为多少的情况下）为网页应用样式。

不针对流行的设备宽度设置断点。所谓「断点」，就是某个宽度临界点，跨过这个点布局就会发生显著变化。一开始使用媒体查询的时候，经常会针对当时流行的设备设置断点，但是，随着时间的推移，屏幕尺寸可能会或多或少的发生一些变化，这就导致了原来的「断点」变得不合适，这种把设计跟特定的屏幕大小绑定的做法不可取。所以响应式设计，注重显示与设备无关，而不是只在某些屏幕中才最合适，所以，「断点」根据需求设置在合适的地方。