媒介查询和响应式设计

2024-01-23 09:43:16

一、媒介类型（各种浏览器终端）

这里的媒介指我们浏览内容所使用的各种电子设备。在CSS2标准中就可以根据不同的媒介类型来设置不同的输出样式，@media规则使开发者有能力在相同的样式表中，针对不同的媒介来使用不同的样式规则。
示例：

<style>
    @media screen {
        p.test {
            font-family: verdana, sans-serif;
            font-size: 14px;
        }
    }
    @media print {
        p.test {
            font-family: times, serif;
            font-size: 10px;
        }
    }
    @media screen, print {
        p.test {
            font-weight: bold;
        }
    }
</style>

在相关的媒介类型应用中，使用比较多的是screen和print类型，用于区分打印和屏幕显示。

Media Type的类型汇总

设备	指代
all	匹配所有设备
braille	匹配触觉反馈设备
embossed	凸点字符印刷设备
handheld	手持设备（尤其是小屏幕，有限带宽，PSP、NDS这种规格一般可以叫做handheld）
print	打印机设备
projection	投影仪设备
screen	彩色计算机显示器设备
speech	语音合成器设备
tty	栅格设备（终端或电传打字机）
tv	电视设备

注意：现在的Android、iPhone都不是handheld设备，它们都是screen设备。所以不要试图用handheld来识别iPhone、iPad或Android等设备。

@media只能做一个大概的区分，而现在在桌面和移动设备拥有不同的分辨率，即使是同样类型的设备，也可能需要做出不同的适配。为了顺应这种需要，CSS3引入了Media Query（媒体查询）。

注意：虽然@media在CSS2时代就已经引入，但是只有Opera支持handheld属性。

二、响应式网页设计

响应式网页设计就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。页面有能力去自动响应用户的设备环境。

响应式设计的4个原则：

重要内容优先
体验的一致性
友好的链接：引导要清晰强烈，适合手指操作，区块不宜过小
考虑移动操作习惯：左手握，右手点

1、小屏幕只显示高优先级内容

在响应式网页设计中，切换到小屏幕移动设备时，有时候需要对页面内容进行删减，按照优先级显示内容，只显示高优先级内容是原则之一。在屏幕较小的移动设备上应该优先考虑主要内容并移掉那些小的栏目。在顶部显示高优先级内容，即把最重要的内容放置在顶部。导航是否一定要出现在页头或者重新布局在页尾，都要依网站具体规范去考虑。

2、提供清晰和友好的手指操作链接

尤其在手机设备上，可点击操作的区块不宜过小，引导要清洗强烈，不忽略任何一款设备。

3、体验的一致性

要让用户在不同的设备上仍保持对同一页面相同的视觉和感觉，这也遵循交互设计体验一致性的原则。

4、考虑操作移动设备的习惯

大部分用户习惯于右手点击操作，左手负责握住设备。右侧的导航列表既方便右手的点击，又可以避免被握着设备的左手不小心触碰到。

三、媒介查询的基本语法

可以将Media Query看成是添加了CSS属性判断的Media Type，基本语法为：

@media screen and (max-width: 600px) {
	.class {
		background: #ccc;
	}
}

这段代码定义了小于600像素的窗口所应用的样式。前半部分@media screen和Media Type的语法是一样的，一般来说选择screen或only screen，因为所有现代的智能手机、平板电脑、PC在类型上都是screen。后半部分使用and作为条件添加符号，可以使用多个and添加多个条件。
示例：

@media screen and (min-width: 600px) and (max-width: 900px) {
	.class {
		background: #ccc;
	}
}

适配设备的判断条件

媒体特性	说明/值	可用媒体类型	接受min/max
width	窗体宽度	视觉屏幕/触摸设备	是
heigth	窗体高度	视觉屏幕/触摸设备	是
device-width	屏幕宽度	视觉屏幕/触摸设备	是
device-height	屏幕高度	视觉屏幕/触摸设备	是
orientation	设备手持方向（portrait横向/landscape竖向）	位图介质类型	否
aspect-ratio	浏览器、纸张长宽比	位图介质类型	是
device-aspect-ratio	设备屏幕长宽比	位图介质类型	是
color	颜色模式（例如旧的显示器为256色）整数	视觉媒体	是
color-index	颜色模式列表整数	视觉媒体	是
monochrome	整数	视觉媒体	是
resolution	解析度	位图介质类型	是
scan	progressive逐行扫描/interlace隔行扫描	电视类	否
grid	整数，返回0或1	栅格设备	否

四、设备

1、常见设备的宽度和高度

老式的4:3屏幕的PC最小的分辨率是1024x768（800x600的机器基本已经被淘汰）。
普通的14英寸笔记本分辨率1366x768。
iPad mini和iPad2分辨率是1024x768。
iPad3以上分辨率是2048x1536（视网膜屏，开发中看作是1024x768）。
7英寸安卓平板的分辨率：从800x480到最新Nexus7的1920x1200。
iPhone4/4s分辨率为640x720（视网膜屏，开发中看作是320x480）。
其他安卓3.5英寸智能机分辨率多为320x480。
目前流行的5英寸+大屏手机分辨率：从400x640到1920x1080。

注意：视网膜设备引入了双倍像素密度，不过浏览器的用户代理仍然报告原来的设备宽度，以免破坏网页。安卓的超高分屏幕也采用了类似的处理方式。

因为浏览器会根据设备的DPI（每英寸像素数），将高分屏实际分辨率换算成普通中分屏的分辨率（和CSS中定义的像素等价），所以就可以根据像素大致将设备的尺寸归为3个边界。即320像素及以下的分辨率可以归为小屏幕手机，大屏手机的宽度则介于320px~768px之间。而768px和1024px之间则是平板电脑的主要分辨率，1024及以上则主要是PC设备的分辨率。

2、检测设备翻转

大部分手机和平板都是支持转屏的，转屏中需要做两个工作：

为横竖屏准备不同的样式。
使用JavaScript在屏幕切换时做出判断。

下面的例子分别为竖屏和横屏引入了两个不同的CSS：

<link rel="stylesheet" media="screen and (orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="screen and (orientation: landscape)" href="landscape.css">

监听设备翻转的JavaScript代码：

window.addEventListener("orientationchange", function(obj) {
	......//这里编写出发屏幕转换时的函数
});

这里不依赖任何第三方JavaScript库时的常规做法，在实际开发中，我们往往使用第三方库提供的方法，一般语义会更简洁并有更多的兼容性优化，不过这就需要读者根据自己选择的库或者框架去阅读它们的文档。

码农公寓