关于响应式设计

欢迎移步 一句话概括响应式网页设计 如果要用一句话概括响应式网页设计，我觉得它是针对任意设备对网页内容进行完美布局的一种显示机制。 响应式网页设计这个术语还有一堆表示相同意思的其他叫法，如流式设计、弹性布局、塑料布局、流体设计、自适应布局、跨设备设计以及弹性设计。 进入了响应式网页设计的教堂，就不要再迷恋像素（px）这个度量单位，因为大多数情况下我们不会用像素，而会使用相对度量单位（em 或百分比）。 阻止移动端缩放页面 iOS 和Android 浏览器都基于WebKit核心。这两种浏览器以及很多其他浏览器（如Opera Mobile），都支持用viewport meta元素覆盖默认的画布缩放设置。 只需要在HTML 的标签中插入一个标签。标签中可以设置具体的宽度（如像素值）或者缩放比例如2.0（设备实际尺寸的两倍）。下面是一个将页面放大到设备实际尺寸两倍显示的meta 标签的示例： 我们来分析一下上面所示的标签，以理解它的工作原理。 name="viewport"属性不言而喻。content="initial-scale=2.0的意思是将页面放大两倍（同理，0.5 表示缩小一半，3.0 表示放大3 倍），同时width=device-width 告诉浏览器页面的宽度应该等于设备宽度。 标签还可以控制页面可缩放的范围。下面的代码允许用户将页面最多放大至设备 宽度的3 倍，最小压缩至设备宽度的一半。 你还可以禁止用户缩放，不过缩放是一个重要的辅助功能，所以在实践中很少禁用。 user-scalable=no即是禁止缩放。 现在，我们将缩放比例设置为1.0，这表示浏览器将按照其视口的实际大小来渲染页面。 将宽度设置为设备宽度，意味着支持该特性的浏览器都将会按照设备宽度的实际大小来渲染页面。下面是我们最终将要使用的标签： 媒体查询 视口和屏幕尺寸 视口和屏幕尺寸不是同一个概念。视口是指浏览器窗口内的内容区域，不包含工具栏、标签栏等。也就是网页实际显示的区域。屏幕尺寸指的是设备的物理显示区域。 使用下面的样式，然后改变窗口大小观察网页 body { background-color: grey; } @media screen and (max-width: 960px) { body { background-color: cadetblue; } } @media screen and (max-width: 768px) { body { background-color: blanchedalmond; } } @media screen and (max-width: 550px) { body { background-color: aliceblue; } } @media screen and (max-width: 320px) { body { background-color: antiquewhite; } } 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 为方便查阅，下面列出了常用媒体查询检测的特性。 width：视口宽度。 height：视口高度。 device-width：渲染表面的宽度（对我们来说，就是设备屏幕的宽度）。 device-height：渲染表面的高度（对我们来说，就是设备屏幕的高度）。 orientation：检查设备处于横向还是纵向。 aspect-ratio：基于视口宽度和高度的宽高比。一个16∶9 比例的显示屏可以这样 定义aspect-ratio: 16/9。 device-aspect-ratio：和aspect-ratio 类似，基于设备渲染平面宽度和高度的 宽高比。 在上述所有特性中，都可使用min 和max 前缀来创建一个查询范围。 用媒体查询改造我们的设计 毫无疑问，你肯定知道CSS 代表层叠样式表。所谓层叠，就是指样式表中后面的样式会覆盖前面相同的样式（除非前面的样式具有更高的针对性）。因此我们可以在样式表的开头设置基本样式，以便适应所有设计，然后使用媒体查询来进一步重写相应的部分。例如，先针对大视口设计（用户大多数情况下使用鼠标），然后再针对较小的视口，使用媒体查询重写这部分样式。 加载媒体查询的最佳方法 现代浏览器虽然可以智能地忽略与自身不匹配的样式文件，但它却不一定不下载这些文件。因此，将不同媒体查询的样式保存到独立的文件中没有太大好处（个人喜好或为便于组织代码除外）。 因为使用多个独立的文件会增加用于页面渲染的HTTP 请求数量，从而导致页面加载变慢。因此，建议在已有的样式表中追加媒体查询样式。使用如下语法即可在已有样式表中加入媒体查询： @media screen and (max-width: 768px) {/*样式*/} 媒体查询的缺陷 目前的情形是，针对各种视口的排列组合编写对应的CSS 样式，无法兼容未来可能出现的设备；而一个完美的设计，往往能在一定程度上适应未来的发展。在这点上我们目前的解决方案尚不完备。目前的效果更像是一个自适应设计，而不是我们想要的真正的响应式设计。我们的设计应该在突变之前保持灵动。要做到这点，需要将呆板的固定布局修改成灵活的流动布局。 拥抱流式布局 为什么响应式设计需要百分比布局 在认识到媒体查询威力无比的同时，我们也要看到它的局限性。那些仅使用媒体查询来适应不同视口的固定宽度设计，只会从一组CSS 媒体查询规则突变到另一组，两者之间没有任何平滑渐变。我们想要的是一个灵活的设计，能在所有视口中都完美显示，而不仅仅只针对媒体查询设定的一些固定视口。 所以我们需要将固定像素布局转换成灵活的百分比布局。这样才能让页面元素根据视口大小在一个又一个媒体查询之间灵活伸缩修正样式。 用em 替换px em 的实际大小是相对于其上下文的字体大小而言的。 如果我们给标签设置文字大小为100%，给其他文字都使用相对单位em，那这些文字都会受 body上的初始声明的影响。这样做的好处就是，如果在完成了所有文字排版后，客户又提出将页面文字统一放大一点，我们就可以只修改body 的文字大小，其他所有文字也会相应变大。 值得注意的是，现代浏览器的默认文字大小都是16 像素（显式声明的除外）。因此一开始给body 标签应用下列任何一条规则所产生的效果都一样： font-size: 100%; font-size: 16px; font-size: 1em; em 究竟是什么？ em是书面形式的大写字母“M”的简称，发音和M相同。以前，“M”常被用来测定某种字体的大小，因为它是英文字母中最大（最宽）的字母。 如今，em 作为一个测量单位，指的是特定字母的宽度和高度相对于特定字体磅值的比例。 max-width 属性 实现图片随着流动布局相应缩放非常简单，只需在CSS中作如下声明： img { max-width: 100%; } 这样就可以使图片自动缩放到与其容器100%匹配。更进一步，可以将同样的样式应用到其他多媒体标签上。如： img,object,video,embed { max-width: 100%; } 现在图片可以随着视口的伸缩而缩放了。但是如果将视口拉大，直到图片拉伸至超出其原始尺寸，那问题就麻烦了。 假设图片的实际宽度是300像素，我们可以通过追加另一个特定样式来为图片设置阈值： width: 100%; max-width: 300px; 这样就可以保证图片按照通用的图片样式自由缩放，但又绝不会超出max-width属性设置的最大上限。 把背景图片放在其他地方 过去，我通常将所有图片都放在一个名如images或img 的文件夹中，不论是用做CSS 背景的图片，还是通过标签插入的图片。但是在使用自适应图片方案时，建议将那些用于CSS 的背景图片（或者那些你不想被缩放的图片）放在另一个目录。 自适应图片方案默认为此创建的目录是assets。如果你不想缩放某张图片，把它丢进这个文件夹即可。 流动网格布局和媒体查询的默契配合 使用百分比布局创建流动的弹性界面，同时使用媒体查询来限制元素的变动范围。将这两者组合到一起构成了响应式设计的核心，基于此可以创造出真正完美的设计。 @media screen and (min-width: 1001px) and (max-width: 1080px) { #navigation ul li a { font-size: 1.4em; } } @media screen and (min-width: 805px) and (max-width: 1000px) { #navigation ul li a { font-size: 1.25em; } } @media screen and (min-width: 769px) and (max-width: 804px) { #navigation ul li a { font-size: 1.1em; } } 我们根据视口宽度来改变文字大小。这是媒体查询和流动布局和谐共存的又一证据：媒体查询约束流动布局的变动范围，而流动布局则简化了从一组媒体查询样式过渡到另一组的改变过程。 私有前缀及其用法 示例： .round{ -khtml-border-radius: 10px; /* Konqueror */ -rim-border-radius: 10px; /* RIM */ -ms-border-radius: 10px; /* Microsoft */ -o-border-radius: 10px; /* Opera */ -moz-border-radius: 10px; /* Mozilla (如Firefox) */ -webkit-border-radius: 10px; /* Webkit (如Safari 和Chrome) */ border-radius: 10px; /* W3C */ } 样式表中后出现的属性优先级高于之前出现的同名属性。正是由于这种层叠，我们就可以先列出私有前缀属性，最后使用无前缀的属性来修正，以确保当该特性被完全实现时，浏览器会运行正确的效果。 渐进增强与优雅降级 你可能听过“渐进增强”和“优雅降级”这两个词，下面是对他们的理解。 优雅降级指的是为现代浏览器制作网站，然后保证为某些老版本浏览器提供基本可用的体验。新特性在老版本浏览器中会降级，且一般会有一个分界点，声明不支持那些老掉牙的浏览器。有些时候用户也仅会被警告他们所使用的浏览器有问题，建议其更换（如“建议下载最新版浏览器！”）。 渐进增强与优雅降级恰好相反。渐进增强以恪守Web 标准的标签为基础，意味着它在所有浏览器中均可用。然后通过CSS 样式和必要的JavaScript 来为更先进的浏览器提供渐进式的增强体验。 目前，渐进增强被普遍认为是开发网站的最佳实践。然而很多情况下可以说都是用优雅降级的方式来做的。 了解条件注释 这是一种非常简便的方法，可用来为相应版本的IE 加载CSS或JS 文件（甚至是内容）。其他浏览器会将这些代码看做注释而直接忽略。 像下面这样： 在本例中，我们的条件注释是说：“如果你的浏览器版本低于或等于（lte）IE8，就执行其中的代码。” 相较于功能检测来说，条件注释并不太受欢迎，因为要使用IE 特有的条件注释来污染我们的标签代码。

本文章由javascript技术分享原创和收集