欢迎各位兄弟 发布技术文章

这里的技术是共享的

响应式设计学习 再一次学 宁皓网

现在用户浏览网页的设备越来越复杂,大尺寸的电脑屏幕,平板,智能手机等等 … 以前我们只针对大尺寸屏幕做设计,已经不在适合现在的情况了。

我们需要让设计在不同尺寸的设备上做出不同的响应 … 让用户不管使用什么样的设备来访问我们的网站,都有一个很好的体验。

这就是响应式的设计 … 英文是 Responsive Web Design … 可以简称为 RWD …

内容

这个课程的开始,我们先了解一下什么是响应式的设计,学习几个真正的响应式设计的网站 ....

再了解几个基本的概念 ... 比如 viewport 可视窗口 ,什么是 viewport ... 为什么会有 viewport ,还有怎么样去手工的设置这个 viewport ...

然后我们会去学习响应式设计里最重要的 media query,媒体查询 .... 在页面上应用 media query 的方法 ...

了解几个 media query 媒体特性 ... 比如去判断设备的宽度,高度 ... 可视窗口的宽度,高度,还有设备的使用方向 .... 分辨率等等 .....

我们还要学习使用操作符来创建复杂的媒体查询 ....

然后我们会去创建响应式的页面布局 .... 去创建切换式的响应式导航菜单 ......

再学习几个响应式图像的方法 .... 我们会根据可视窗口的宽度,还有设备的像素密度来加载使用不同的图像 ....

最后,我们会去制作一个可以使用手指控制的幻灯片 ....

下面,我们就开始这个响应式设计的课程。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 

下面我们来看几个真正的响应式设计的例子 …

http://colly.com/

你可以使用你的电脑,平板,或者手机打开这个网站 … 看一下它们之间的区别 … 或者,我们可以直接来调整这个窗口的宽度 ….

现在页面上的内容会分成四栏 … (#缩小)

当窗口宽度到一定程度的时候 … 页面的布局会发生变化 … 由原来的四栏 … 变成了两栏 …

继续缩小窗口的宽度 ….

在更小的窗口上 … 布局又会有变化 … 会变成一栏 …. (恢复)

http://foodsense.is

再看一下这个网站 … foodsense.is …

在大尺寸的 屏幕上,左上角会显示网站的标志,它的下面有一个导航菜单 … 右边是一个幻灯片 …

主体的内容分成了四栏 …

缩小一下窗口的宽度 …. 到达一定宽度的时候 … 整个布局的宽度会缩小 …

标志和导航菜单会跑到页面的最上面 …. 下面是幻灯片和主体内容 …

继续缩小 ….

现在 … 导航菜单上的小图标会隐藏起来 … 布局宽度也会缩小 … 主体内容变成了两栏 … (继续缩小)

在更小的窗口上 … 页面又会有一些变化 …

导航菜单会在页面的最上方 …. 主体内容会变成一栏 ….

最后再来看一下索尼公司的网站

http://sony.com/

这回我们从小窗口开始 ….

页面顶部的左边是标志,右边有两个小图标 … 点击 menu .. 可以打开导航菜单 … 点击搜索会打开搜索框 …

下面是一个大的产品的介绍 .. 然后是一个小的产品介绍 …

中间这里,会有一个选择列表 …. 可以切换显示内容 …

放大页面窗口的宽度 ….

现在, 页面布局宽度会增大 ,会直接显示出导航菜单和搜索框 …

下面的选择列表,会变成选项卡的形式 …

继续放大宽度 ….

布局会变得更宽 … 左边展示一个主要产品,在同一排,会展示一个次要的产品 …

下面的主体内容的布局,也会有一些变化 ….

总结

看完这几个例子,你大概会对响应式设计有一个了解 ….

想去找到灵感的话,你可以看一下这个网站 … 上面收集了一些不错的响应式设计的网站

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

viewport 就是可视窗口,有时候也可以理解成可视的区域。在桌面电脑上,viewport 就是显示内容的这个区域 ....

你可以调整窗口的大小,来改变 viewport 的尺寸 .... 如果 viewport 尺寸小于页面内容的尺寸 ...

浏览器会显示一个滚动条 .... 用户可以,上下滚动 ... 或者左右滚动 ... 来浏览页面上的内容 ...

移动

不过 viewport 在移动设备上会复杂一些 .... 我们需要考虑两个东西 ... 一个是 viewport 的尺寸 ... 还有就是缩放的级别,或者叫缩放的倍数 ...

下面我们可以使用 iOS 设备的模拟器打开同样的页面 ...

这个 iPhone 设备的宽度是 320px ,而现在显示的这个页面的宽度是 960px …

这也就是为什么会有 viewport 这个概念 .... 移动设备通常会设置一个默认的 viewport 的尺寸 .... 还有一个默认的缩放级别 ...

默认

这个 iPhone 默认的 viewport 的宽度是 980px ,配合一个默认的缩放倍数 .... 所以,这个 960px 宽的页面,会比较适当的显示在屏幕上 ....

这个默认的 viewport 设置就是为了让那些没有针对移动设备优化设计的网站,看起来也不错。

不过如果我们的设计针对移动设备做了优化 ... 比如应用了响应式设计的页面布局 ....

那这个默认的 viewport 设置就不合适了 ....

我们需要手工的去设置一下这个 viewport ....
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

这个视频我们去手工的配置一下 viewport ... 这是一个简单的页面,上面只有一张图片,还有一点文字 ... 图片的宽度是 300px ...

页面的整体的宽度就是这个 .container 类上设置的 980px ...

我们使用 iOS 模拟器打开了这个页面 ... 页面的内容会使用默认的 viewport 设置 .... 适当地显示在屏幕上 ...

手工配置

下面我们可以手工去配置一下 viewport ...

在页面的 <head> 标签上 .... 添加一个 <meta> 标签 .... 在里面加上一个 name 属性 ... 属性的值设置为 viewport ...

然后可以再添加一个 content 属性 .... 这个属性的值,可以是 viewport 的相关的设置 ....

initial-scale

我们先来看一下 initial-scale ... 它可以控制 viewport 的初始的缩放级别 .... 等号后面,输入想要使用的缩放级别 ... 这里我们设置成 1.0 ...

回到模拟器上看一下 ....

现在,你会发现页面的显示有一些变化了 ... 内容不会再缩小显示 .... 因为我们把初始的缩放级别设置成了 1 倍 ...

设备会自动去计算 viewport 的宽度 ... 在设备垂直方向的时候 ... viewport 的宽度会是设备的宽度 ... 也就是 320px ....

而在水平方向的时候 ... viewport 的宽度会变成设备的高度 .... 是 480px ....

width

下面我们再去试一下可视窗口的宽度 ... 可以使用 width 去设置 ...

默认这个 width 的值是 980像素 .... 对于那些在这个范围以内页面,这个可视窗口的宽度还是比较合适的 ... 不过如果你的页面很窄,这个默认的宽度就不合适了 ...

比如我们可以页面的宽度设置成 320 像素 ... 修改一下这个 container 类上面定义的 width 的值 ....

回到模拟器 ... 刷新一下 ... 你会看到,页面会出现很大的空白 ...

下面我们可以去重新定义一下可视窗口的宽度 ... 使用 width .... 等号 .... 后面加上要设置的宽度值 .... 320

回到模拟器 ... 刷新 ...

现在页面的显示就比较合适了 .... 这里要注意的是 .... 虽然我们只设置了这个可视窗口的宽度 .... 但是我们的设备会去自动计算一些其它的值 ...

比如初始状态的缩放级别 .... 现在,应该会被自动设置为 1 倍 ... 这个缩放的倍数在其它的设备上可能会有变化 ....

所以,一般来说,我们不直接设置一个固定的宽度 ... 而是根据设备的宽度去动态的设置 .... 可以把 width 设置为 device-width ...

修改一下 ...

同时,我们还会把初始的缩放级别,也就是那个缩放的倍数设置成 1 ...

多个属性之间,可以使用逗号分隔开 ...

initial-scale=1.0

其它

另外,viewport 还有一些属性 ... 比如,你不想让用户可以缩放你的页面,我们可以把 user-scalable 设置成 no ....

你也可以使用 maximum-scale 还有 minimum-scale ,去设置允许的最大缩放的倍数,还有最小缩放的倍数 ...

不过一般,我们只需要使用这个 width ... 把它设置成动态的宽度 device-width .... 还有 initial-scale ... 页面初始的缩放级别... 把它设置成 1.0 。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

resolution 表示设备的像素密度,或者叫屏幕密度,我们先来了解一下什么是像素密度,它表示在一个物理尺寸上面所能显示的像素的数量,一般我们会用 dpi 这个单位来表示像素密度 …

dpi 是 dots per inch 的简写形式 … 也就是每英寸的点数,或者叫每英寸的像素数 …

不同的设备的屏幕密度是不一样的,比如 iPhone 3G 的屏幕密度是 162 dpi … 屏幕的分辨率在垂直方向的时候,宽是320px ,高是 480px。

到了 iPhone 4 的时候 ,屏幕密度就变成了 326 dpi ,差不多是 iPhone 3G 屏幕密度的一倍,因为密度变大了,所以它能显示的像素数也会变大,

iPhone 4 的屏幕分辨率在垂直方向的时候,宽是 640px,高是 960px 。比 iPhone 3G 扩大了一倍。

因为 iPhone 3G 和 iPhone 4 的屏幕都是 3.5 寸,所以更大的屏幕密度,可以使用更多的像素来显示元素的细节 …. 比如文字,在高密度的设备上,会显示的更清晰。

苹果为这种高密度的屏幕起了个名字,叫 retina ,视网膜屏幕 ….

CSS 像素

另外,我们需要明白什么是 CSS 像素,CSS 像素是一个相对的值,比如你要显示一个方框,大小是 10px x 10px ,这个方框如果在 iPhone 3G 上显示,它的 CSS 像素应该就是你设置的 10px x 10px。

如果在 iPhone 4 上面显示这个方框, CSS 像素就会变成 20px x 20px … 因为 iPhone 4 像素密度比较高,如果使用同样的 10px x 10px 来显示,在 iPhone 4 上,这个方框看起来会比 iPhone 3 上面缩小一倍 …

所以,为了保持元素显示的一致性,高密度的设备会自动去放大元素 … 比如在 iPhone 4 上,这个放大的倍数就是 2 ,这样 10px x 10px 的方框,在 iPhone 4 上的 CSS 像素就会是 20px x 20px 。

要注意是,这个放大的倍数,不同的设备是不一样的,在苹果的视网膜屏幕上,放大的倍数都是 2 。

其它品牌设备,有些会使用 1.5 ,2,或者 3,作为 CSS 像素的放大倍数。

在这个地址里,http://goo.gl/FWJ8

列出了一些相关的信息 …. 你可以找到不同品牌,不同设备的屏幕分辨率,尺寸 … 还有 CSS 像素的放大倍数 …

另外,你也可以参考这个地址 http://goo.gl/snL8f

同样,里面列出来不同品牌,不同设备的跟屏幕相关的信息 …. 尺寸 … 分辨率,还有屏幕的密度…
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

在网页上使用 Media Query 有两种方法 … 一种是,我们可以在链接样式表用到的 <link> 标签上,添加一个 meida 属性 …. 在这个属性里,可以去设置媒体查询 …

比如像这行代码

<link rel="stylesheet" media="(max-width: 480px)" href="mobile.css">

跟嵌入普通的样式表的方法差不多,只不过这里我们添加了一个 media 属性 … 属性的值就是我们设置的媒体查询 …

这里我们用了一个简单的媒体查询 … 这个括号里面的东西就是媒体查询的表达式。在这面,可以设置要查询的媒体特性和它的值 ...

这里我们查询的是 width ,也就是宽度这个媒体的特性 … 在宽度的前面加上了一个 max .. 表示最大的宽度 …

480px 是设置的值 … 合起来的意思就是 … 如果设备的 viewport ,可视窗口,或者说浏览窗口的最大宽度是 480 px 的时候 … 也就是宽度是480px,或者小于 480px …

满足了这个条件 … 页面才会使用 mobile.css 这个样式表里定义的样式 …

在样式表里使用媒体查询

另一种应用媒体查询的方法,是直接在样式表里使用类似的形式,来实施媒体查询 …

在样式表里,可以先用一个 @media … 它的后面是一个括号,在括号里可以设置媒体查询,比如这个 max-width:480px 就是设置的媒体查询 … 然后在后面的大括号里,我们可以去设计当满足了这个条件的时候,应用到网页上的 CSS 样式 …

总结

这里我们看到的是两个简单的媒体查询的例子,在实际的应用中,我们可能需要复杂一些的媒体查询,可以在媒体查询里加上媒体的类型 …

使用操作符来连接多个媒体查询的表达式等等。在后面的视频里我们再去学习它们。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 

在正式了解 media query 之前,我们可以先了解一下根据媒体的类型加载不同样式表的方法。我们可以专门针对 screen ,tv, print,projection 这些媒体类型来添加样式。

screen 是屏幕设备,比如电脑,智能手机,平板,都是这个类型的媒体。 tv, 是电视媒体,print 是打印机,projection 是投影仪。

另外还有一些媒体类型,你可以参考一下这个地址 :https://developer.mozilla.org/en-US/docs/CSS/@media

常用的媒体类型就是 screen 屏幕设备,还有 print 打印机 … 另外如果我们在嵌入样式表的时候,不指定应用的媒体类型,那么默认这个媒体类型是 all ,也就是样式表会应用在所有的媒体类型上 …

下面我们通过一个简单的演示,来理解一下针对媒体类型的样式表 …

打开资料包 xx-xx

这是一个很简单的网页 … 我们要在 css 这个目录下面 … 新建两个样式表 …. 一个命名为 style.css … 一会我们让这个样式表应用在所有的媒体类型上…

再创建一个 print.css … 这个样式我们把它用在 print 打印机这个媒体类型上 …

在网页上,用 <link> 来嵌入这两个样式表 …

<link href="css/style.css" rel="stylesheet">

在这行代码里,我们并没有使用 media 属性去指定它的媒体类型 … 所以这个 style.css 默认会用在所有的媒体类型上 …

再嵌入另一个样式表 … 复制一下 … 修改下样式表的名称 … 然后在这里,我们添加一个 media 属性 … 属性的值设置为 print …

<link href="css/print.css" media="print" rel="stylesheet">

这样当用户在打印这个网页的时候,浏览器会载入这个样式表里的样式 ..

添加样式

下面我们分别在这两个样式表里添加点简单的样式 … 打开 style.css … 使用 body 标签作为样式的选择器 … 添加一个背景颜色 .. 设置为 黑色 ..

再为文字设置一个默认的颜色 … 用 color … 设置为 白色

body{
background:#000;
color:#fff
}

因为 style.css 会用在所有的媒体类型上… 你会看到,网页的背景会变成黑色 … 文字的颜色会是 白色 …

下面我们可以使用打印预览,看一下打印这个网页的效果 … 文件 … 打印 …

浏览器会为打印添加默认的样式 … 你会看到,文字变成了灰色 … 而且并没有背景颜色 … 因为在打印的选项里,没有勾选 背景颜色和图片 …

我们可以勾选一下看看 … 现在,打印预览里的样式跟网页上的样式是一样的 … 黑色背景 … 白色文字 …

这种样式并不适合打印 … 所以我们可以再去设置一下专门为打印准备的样式 … (#取消)

打印

打开 print.css … 因为这个样式表是在 style.css 样式表的下面嵌入的 … 所以在这里定义的样式,可以去覆盖 style.css 样式表里的样式 …

这里我们重新设计一下 body 标签的样式 … 我们把背景颜色设置为白色 … background:#fff … 然后再把文字的颜色设置为黑色 … color:#000 …

保存 …

回到网页 … 刷新 ….

在网页上的样式并没有什么变化 … 打开 文件 … 打印 …

现在, 你会发现,打印预览这里,会使用我们在 print.css 样式表里设置的样式 … 背景是白色 … 文字是黑色 …
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

在设置媒体查询的时候,我们可以设置一些表达式来判断一下媒体的特性 … 比如分辨率,高度,宽度,屏幕的宽和高的比例,可视窗口的尺寸,使用的方向是水平方向,还是垂直方向等等。

比如我们想要判断设备的使用的方向是否是垂直方向 … 这个表达式可以这样来写 …

(orientation: portrait) …

整个表达式要放在一个括号里 … 然后 orientation 是要查询的媒体特性 … 也就是设备的使用方向 … 后面加上一个冒号 … 冒号的右边是要查询的值 …

portrait 表示垂直方向 …

这样,如果设备的方向是垂直的,这个表达式会返回一个真的值 …

最大与最小

另外,很多媒体特性都可以在它们的前面添加一个 max 或者 min … max 是英文单词 maximum 的缩写 … 意思是 最大 …

这个 max 就相当于是 小于或等于 ….

min 表示 最小 … 是 minimum 的缩写 … min 就相当于是 大于或等于 ….

比如你想判断设备的最大宽度是否是 480px … 也就是设备的宽度小于或者等于 480px …. 我们可以使用 max … 再加上媒体的特性 …

这个表达式可以这样写 max-device-width:480px

device-width 是要查询的媒体特性 … 表示设备的宽度 … 前面加上了一个 max .. 表示设备的最大宽度 …

冒号的后面是要判断的媒体特性的值 …

合起来的意思就是,如果设备的宽度是480px ,或者小于 480px ,这个表达式就会返回一个真的值 …

注意这里我们用的媒体特性是 device-width … 并不是可视窗口,或者浏览窗口的宽度 … 而是设备的整体的宽度 …
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
aspect-ratio 这个媒体特性可以用来判断可视窗口的宽度和高度的比例 … 下面通过几个演示来理解一下 …

打开资料包 xx-xx 里面的 xxx.html … 这是一种简单的网页 … 有两行文字 … 并且应用了一些基本的样式 … 黑色的背景 … 白色的文字 …

先回到这个网页项目 …. 找到网页链接使用的 sytle.css 这个样式表 …

媒体查询

这里我们使用直接在样式表里定义媒体查询的方法 …

输入 @meida () {} … 小括号里可以设置媒体查询的表达式 … 大括号里可以设置样式 …

在小括号里输入 aspect-ratio: 3/2 …

aspect-ratio 是可视窗口的宽度与高度比例这个媒体特性 … 它的值是两个整数,中间用一个斜线分隔开 …

前面的整数是宽度比 … 后面这个整数是高度比 ..

这个媒体查询的意思就是,如果设备的可视窗口的比例是 3:2 的时候 … 就会应用在后面大括号里设置的样式 …

这个媒体特性也支持 max 和 min 前缀 … 所以你可以去设置小于等于或者大于等于的 宽度与高度的比例 …

我们可以设置一下 body 标签的样式 … 把背景的颜色设置成一种蓝色 …

body{
background:#0381bb;
}

保存一下 … 下面我们可以去测试一下 … 这里我们用 iOS 的模拟器打开网页 … 现在我们用的这个设备,在垂直方向的时候,宽度与高度的比例是 2:3 ..

不过这个比例是设备的宽高比,并不是可视窗口的比例 … 现在的可视窗口是黑色背景这一块 …

我们可以把它调整成水平方向 … 背景颜色仍然没有改变 … 因为现在可视窗口的比例还不是 3/2 …

因为现在屏幕上除了显示页面内容,屏幕上还会显示浏览器的工具栏,地址栏 … 搜索 这些东西 …

所以去除这些元素以外,宽度和高度的比例就不是 3:2 了 …

我们可以点击这个全屏幕的按钮 … 你会发现 .. 页面的背景就会变成蓝色 ….

因为,现在是全屏幕的状态,所以可视窗口的比例跟水平方向的屏幕的宽高比是一样的 .. 宽是 480px … 高是 320 px 。换算成比例的话就是 3:2 …

所以页面也就会使用我们为这个比例设置的样式 …

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
device-aspect-ratio 跟前面我们介绍的 aspect-ratio 不太一样 … 它可以去判断设备的宽度和高度的比例 ..

device 就是设备的意思 … aspect ratio 是宽高比 …

下面我们还是通过演示来理解一下这个媒体特性 …

我们可以使用之前网页项目 … 打开 style.css 样式表 … 设置媒体查询的方法是一样的 …

这里我们把括号里的 aspect-ratio … 修改成 device-aspect-ratio … 这个媒体特性同样支持在前面添加 max 和 min 的前缀。

后面的值的类型是一样的 … 两个整数,分别表示宽度比和高度比 … 中间用一个斜线分隔开 …

保存一下 … 打开浏览器 …

我们可以把可视窗口的宽度与高度的比例修改成 3:2 .. 这里我们用的是 chrome 浏览器的 web developer 插件 …

修改窗口尺寸 … 宽度设置为 960 像素 … 高度设置成 712 像素 …. 注意这里我们设置的是窗口的尺寸,而不是可视窗口的尺寸 …

窗口的尺寸会包含浏览器的标签栏 … 地址栏 … 这些东西

高度我们设置成为 712 像素 … 去掉浏览器标签栏和工具栏的 72 像素的高度 … 可视窗口的高度会是 640 像素 …

960 / 640 … 换算一下 … 可视窗口的宽高比应该是 3:2 ….

当我们设置成了这个尺寸以后 … 背景并没有变成蓝色… 因为我们使用的是 device-aspect-ratio 这个媒体特性 …

它会查询设备的屏幕的整体的宽高比 … 而不是可视窗口的宽高比 …

我的电脑的屏幕分辨率是 1440 x 900 … 宽高比应该是 16:9 … 所以不会应用媒体查询里设置的当设备的 屏幕宽高比是 3:2 时候的 样式 …

下面我们再用 iOS 模拟器打开网页 … 调整成水平方向 .. 全屏幕 … 这里仍然没有应用蓝色背景样式 …

因为当前我们使用的这个设备的宽与高的比例是 2:3 …. 这个比例不会受到设备使用方向的影响 …

回到样式表 … 我们把比例的值修改成 2:3 … 保存 …

回到 iOS 模拟器 … 刷新 ..

现在页面会使用我们设置的当设备的宽高比是 2:3 的时候的样式了 …

调整成垂直方向 … 同样会使用这个蓝色背景 …
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
我们可以使用 orientation 这个媒体特性来判断设备的使用方向,比如智能手机或者平板电脑的使用方向 …

它的值可以是 landscape .. 水平方向 … 或者 portrait … 垂直方向 …

下面我们来演示一下 … 先去设置一下当设备是水平方向时的媒体查询 …

@media (orientation: landscape) {
body{
background:#27ae60;
}
}

这里我们可以设置一下 body 标签的样式 … 使用 background .. 把背景颜色设置成一种绿色 ….

这个媒体查询的意思就是当设备的使用方向是水平方向的时候 … 也就是设备的使用方向是水平方向的话,这个表达式会返回真的值 … 这样就会在页面上应用大括号里设计的样式 …

然后复制一下这块代码 … 修改一下媒体查询的表达式… 同样使用 orientation 这个特性 … 值,我们修改成 portrait … 垂直方向 …

再修改一下样式 … 把 <body> 标签的背景颜色修改成 黄色 …

@media (orientation: portrait) {
body{
background:#f2cb2b;
}
}

保存 …

下面我们可以使用 iOS 设备的模拟器去测试一下 …

现在设备的使用方向是垂直方向 …. 所以在应用在 orientation 是 portrait 这个媒体查询里设计的样式 … 背景会是一种黄色 …

调整一下设备的使用方向 ….

现在设备的使用方向变成了水平方向 … 这样页面会去应用 orientation 是 landscape 时候的样式 …

背景会变成绿色 …
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
height 是可视窗口的高度 .. device-height 是设备的整体高度 … 下面我们去试一下这两个媒体特性 …

打开页面使用的样式表 … 设置媒体查询 … @media (){}

在小括号里输入表达式 .. 使用 height:480px … 这个媒体查询的意思是,如果可视窗口的高度是 480px 的时候 …

这个 height 媒体特性支持 max 和 min 前缀 … 这里我们添加一个 max 前缀 …

这样这个媒体查询的表达式,在可视窗口的高度小于等于 480px 的时候,会返回真的值 … 也就会去应用在大括号里设计的样式 …

我们还是去为 <body> 标签设置一个背景颜色 … 这里我们使用一种橙色 …

body{
background:#f3581a;
}

保存 … 我们可以在浏览器上试一下 …

打开网页 … 调整一下可视窗口的高度 …

注意当我们的可视窗口高度调整到 480px 的时候,就会触发刚才设置的媒体查询里的样式 … 背景会变成橙色 …

继续缩小可视窗口的高度 … 背景依然会使用橙色 …

因为我们设置的媒体查询的表达式里,使用了 max 前缀 .. 它的意思是小于等于 …

再改大可视窗口的高度 …

高度超过 480px 的时候 .. 页面会恢复成默认的样式 …

device-height

我们再试一下 device-height …

回到样式表 … 把 max-height … 修改成 max-device-height … 这样这个媒体查询的意思就是,当设备的高度小于等于 480px 的时候 …

保存 … 回到浏览器 ….

调整可视窗口的高度 … 你会发现不管我们怎么缩小可视窗口的高度 … 页面都不会应用 max-device-height 媒体查询里设置的样式 …

因为这个特性判断的是设备的高度 … 而不是可视窗口的高度 …. 我的电脑屏幕的高度是 900px.. 大于在媒体查询里设置的 480px … 所以表达式会返回一个假的值 …

这样也就不会触发在媒体查询里面设计的样式了 …

下面我们可以用 iOS 模拟器试试 …

你会看到,页面的背景颜色是橙色 … 因为这个设备的整体高度是 480px … 所以 max-device-height:480px 这个表达式会返回一个真的假 …

也就会触发设计的样式 …

这里不管设备的使用方向是什么 … 都会应用这个橙色的背景 ….
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
width 是可视窗口宽度 … device-width 是设备宽度 … 在响应式的网页设计里面 … width ,是经常用到的媒体特性 ….

一般我们会用它去设置网页的 breakpoint … 也就是断点 … 去触发不同宽度范围内的样式 ….

下面我们还是先来了解下这个媒体特性的使用 …

设置媒体查询

打开网页的样式表 … @media(){} …

width 这个媒体特性支持使用 max 和 min 前缀 … 这个媒体查询的表达式,我们可以这样 … max-width: 767px …

意思就是,可视窗口宽度小于等于 767px ,表达式会返回真的假 … 这样就会触发在后面大括号里设计的 CSS 样式 …

在大括号里,加点 CSS 样式 … 这里我们把背景颜色设置成了一种紫色...

@media (max-width:767px){
body{
background:#c36cea;
}
}

保存 … 打开浏览器 ….

调整一下可视窗口的宽度 …. 当我们把可视窗口宽度缩小到 767px 的时候 … 会触发刚才在媒体查询里设置的样式 … 背景会变紫色 …

继续缩小宽度 …. 会使用同样的紫色背景 …

因为我们在 width 这个媒体特性的前面,加上了一个 max 前缀 … 所以小于等于 767px 的可视窗口宽度,都会应用在媒体查询里设计的样式 …

打开 iOS 模拟器 .. 垂直方向的 iPhone ,可视窗口宽度是 320px …. 小于 767px … 所以也会使用紫色的背景 …

设置成水平方向 … 宽度会变成 480px .. 同样小于 767px … 背景仍然会是紫色 ….

device-width

下面我们再去试一下 device-width 这个媒体特性 … 它可以判断设备的整体宽度 … 回到样式表 …

把 max-width … 修改成 max-device-width …

这样这个表达式,在设备的宽度小于等于 767px 的时候,会返回真的值 …

保存 …

先回到浏览器 … 刷新 …

因为我的电脑屏幕的宽度大于 767px .. 所以,刚才设置的媒体查询的表达式会返回假的值 … 也就不会应用紫色的背景 …

你会发现,不管我们怎么样去调整可视窗口的宽度 … 样式都不会发生改变 … 因为 device-width 是判断设备宽度的媒体特性,而不是可视窗口的宽度 ….

再打开 iOS 模拟器 … 这个 iPhone 设备 的宽度是 320px ,小于 767px … 所以会应用紫色的背景 ….

我们再把设备,设置成 iPad 试一下 …

因为这个 iPad 的宽度是 768px … 大于了我们设置的 767px … 这样表达式会返回假值 … 也就不会应用紫色的背景 …
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
resolution 表示设备的像素密度,或者叫屏幕密度 下面我们可以使用 resolution 这个媒体特性去设置一些媒体查询 …

@media screen and (max-resolution: 150dpi){
body{
background:#c0392b;
}
}

这条媒体查询的意思就是,如果输出的设备媒体类型是 screen … 并且设备的像素密度小于等于 150dpi 的时候… 那么就会应用在大括号里的样式 … 也就是背景会变成一种红色 … 保存 …

我们可以打开 firefox 浏览器去试一下 …

因为我的电脑屏幕像素密度是 110 dpi ,小于媒体查询里设置的 150dpi ,并且输出的设置的类型是 Screen … 所以会触发媒体查询的样式 …

再打开 chrome 浏览器试一下 … 同样的输出设备,在 chrome 浏览器上并不能触发应用 resolution 媒体查询的样式 …

这是因为 webkit 核心的浏览器对 resolution 媒体查询支持的不是太好,像 chrome 浏览器,或者 safari 浏览器都是用的 webkit 核心…

所以它们都不认识 resolution 这个媒体特性 …

我们可以使用 device-pixel-ratio 来代替标准的 resolution …

这个 device-pixel-ratio 是设备的像素比例 … 其实就是我们在上一个视频里提到的,像素的放大的倍数 … 在苹果的设备上,一般的屏幕的 device-pixel-ratio 都是 1 ,视网膜屏幕的 device-pixel-ratio 是 2 …

我们可以这样来修改一下这条媒体查询

-webkit-device-pixel-ratio: 1

这里,我们使用了一个 webkit 前缀 … 意思就是,这条媒体查询是专门针对 webkit 核心的浏览器设计的 … 其它的浏览器,比如 IE ,Firefox … 它们都不会应用带 webkit 前缀的媒体查询 ….

webkit 前缀的后面再加上 device-pixel-ratio … 这里我们把值设置成了 1 …

保存 … 打开 chrome 浏览器 … 刷新 … 你会发现 .. 会触发应用媒体查询里的样式 .. 背景会变成红色 … 因为当前我用的电脑屏幕的这个 device-pixel-ratio 是 1 …

iOS …

我们再切换到 iOS 设备上看一下 … 这个模拟器现在用的设备是普通屏幕的 iPhone … 所以它的 device-pixel-ratio 也是 1 … 这样也就会应用在媒体查询里设置的样式 …

我们把设备再换成 retina 屏幕 iPhone …

现在,页面上就不会应用媒体查询里的样式了 … 因为当前设备的 device-pixel-ratio 是 2 …

标准

我们使用 device-pixel-ratio 为 webkit 核心的浏览器,去设置,屏幕密度的媒体查询 … 对于其它核心的浏览器,我们可以继续使用标准的 resolution 这个媒体特性 ….

为了让它跟 device-pixel-ratio 有一样的效果 … 我们可以使用 dppx 这个单位 … dppx 是 dots per px 的缩写 … 表示每个像素上的点数 … 它的值也就是像素的放大倍数 …

在这条媒体查询的后面用逗号连接媒体查询列表 … 然后设置标准的 resolution 媒体查询 …

@media screen and (-webkit-device-pixel-ratio: 1), screen and (resolution:1dppx){
body{
background:#c0392b;
}
}

总结

在使用 resolution 设置媒体查询的时候,我们最好还是使用 dppx 这个单位, 这样更容易一些 …
 

 

 

 

 

 

 

唯物品评历史

关注"唯物品评历史",跟着泪痕春雨先生,读懂历史,看彻人生

打开隐藏二维码