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


【简介】早期的网站都是固定宽度设计的,目标是让所有用户都拥有相同的体验。这种股东宽度(通常为 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. 媒体查询

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

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

附: 欢迎大家关注我的新浪微博 - 一点编程,了解最新动态 。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值