什么是响应式Web设计？怎样进行？（2）
发布时间：2011-11-21 17:00:40
弹性图片
响应式Web设计的思路中，一个重要的因素是怎样处理图片方面的问题。有很多同比缩放图片的技术，其中有不少是简单易行的。其中，由Richard Rutter最先尝试的一种做法比较流行，即使用CSS的max-width属性。这个方法在Ethan Marcotte的液态图片一文中也有提到。
img { max-width: 100％;}
只要没有其他涉及到图片宽度的样式代码覆盖掉这一行规则，页面上所有的图片就会以其原始宽度进行加载，除非其容器可视部分的宽度小于图片的原始宽度。上面的代码确保图片最大的宽度不会超过浏览器窗口或是其容器可视部分的宽度，所以当窗口或容器的可视部分开始变窄时，图片的最大宽度值也会相应的减小，图片本身永远不会容器边缘隐藏和覆盖。实际上，就像Jason Grigsby在他的CSS Media Query for Mobile is Fool\'s Gold一文中提到的，"液态图片背后的思路，就是无论何时，都确保在其原始宽度范围内，以最大的宽度同比完整的显示图片。我们不必在样式表中为图片设置宽度和高度，只需要让样式表在窗口尺寸发生变化时辅助浏览器对图片进行缩放。" 一种简而美的方法。
图片本身的分辨率及加载时间是另外一个需要考虑的问题。虽然通过上面的方法，可以很轻松的缩放图片，确保在移动设备的窗口中可以被完整浏览，但如果原始图片本身过大，便会显著降低图片文件的下载速度，对存储空间也会造成没有必要的消耗。
响应式图片
由Filament Group提出的"响应式图片"技术思想，有助于解决上面提到的问题：不仅要同比的缩放图片，还要在小设备上降低图片自身的分辨率。可以看下demo页面先。
这个技术的实现需要使用几个相关文件，我们可以在Github上获取。包括一个JavaScript文件(rwd-images.js)，一个.htaccess文件，以及一些范例资源文件。具体使用方法可以参考Responsive Images的说明文档。大致的原理是，rwd-images.js会检测当前设备的屏幕分辨率，如果是大屏幕设备，则向页面head部分中添加BASE标记，并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径"/rwd-router"。当这些请求到达服务器端，.htacces文件会决定这些请求所需要的是原始图片还是小尺寸的"响应式图片"，并进行相应的反馈输出。对于小屏幕的移动设备，原始尺寸的大图片永远不会被用到。
这项技术支持多数的现代浏览器，包括IE8+、Safari、Chrome和Opera，以及这些浏览器的移动设备版本；在FireFox及一些旧浏览器中，则会优雅降级：我们仍可得到小图片的输出，但同时，原始大图也会被下载。
禁用iPhone中的图片自动缩放
在iPhone及iPod Touch中，页面会被自动的同比例缩小至最适合屏幕大小的尺寸，x轴不会产生滚动条，用户可以上下拖拽浏览全部页面，或在需要的时候放大页面的局部。这里会产生一个问题，即使我们运用响应式Web设计的思想，专门为iPhone的小屏输出小图片，它同样会随着整个页面一起被同比例缩小，如下图左侧所示。
我们可以使用苹果专有的一些meta标记来解决类似的问题。在页面的<head>部分添加以下代码(详情可以参考Think Vitamin的相关文章)：
<meta name="viewport" content="width=device-width; initial-scale=1.0">
将initial-scale的值设定为"1"，即可覆写默认的缩放方式，保持原始的尺寸及比例。更多关于viewport meta标记的用法，可以参考苹果官方的文档。
0
投稿猜你喜欢
- 数据存储·在javascript中，数据存储的位置会对代码整体性能产生重大的影响。·数据存储共有4种方式：字面量、变量、数组、对象成员。·要
- 我看blog里，还有很多地方都引用过我写的这个类，转了不少，但自己一直也没发表过，这次正式发表一下。在蓝色理想中有人不懂怎么用，我在baid
- 很神奇的一个晚上，居然在以前老同事的群里跟同事讨论起CSS的东西来了，不过很意外的还是有收获。在IE中常常会碰到如果将容器定位后，出现容器内
- 原理 QueryCache(下面简称QC)是根据SQL语句来cache的。一个SQL查询如果以select开头，那么MySQL服务器将尝试对
- 本文实例为大家分享了Python求多幅图像栅格值的平均值，供大家参考，具体内容如下本程序所采用的方法并不是最优方法，ARCGIS已经提供了相
- 本文实例为大家分享了js实现五子棋游戏的具体代码，供大家参考，具体内容如下html:<body> <h2>五子棋游戏
- 不知道算不算DW4的大BUG. DW4实际的运行如下： 读注册表中HKEY_CURRENT_USER/
- 1、由于国外网站太慢，所以这里使用的是阿里的镜像https://mirrors.aliyun.com/pypi/simple/2、去官网查看
- MatplotlibMatplotlib 是Python中类似 MATLAB 的绘图工具，熟悉 MATLAB 也可以很快的上手 Matplo
- 游戏规则：一付扑克牌，去掉大小王，每个玩家发3张牌，最后比大小，看谁赢。有以下几种牌：豹子：三张一样的牌，如3张6.顺金：又称同花顺，即3张
- 1.函数添加import sys sys.pathsys.path.append("c:\\")2.修改pythonpa
脚本之家下载：JetBrains DataGrip 2020.1 免费中文正式版(附汉化包+安装教程) 最新DataGrip202- 看了很多介绍javascript面向对象技术的文章,很晕.为什么?不是因为写得不好,而是因为太深奥.javascript中的对象还没解释清楚
- PDOStatement::setAttributePDOStatement::setAttribute — 设置一个语句属性(PHP 5
- 1、开头：#!/usr/bin/python和# -*- coding: utf-8 -*-的作用 – 指定#!/usr/bin/pytho
- Pandas 中的resample函数用于各种频率的转换工作。resample的参数如下：参数描述freq转换频率axis=0重采样的轴cl
- pygame如何捕捉鼠标的活动初始化参数import pygame, sysfrom pygame.locals import *def p
- 举个例子吧Django最佳实践与部署：Nginx + Gunicorn + Supervisor（Ubuntu和CentOS）http://
- 本文实例讲述了原生JS实现Ajax通过POST方式与PHP进行交互的方法。分享给大家供大家参考，具体如下：一、代码conn.php<?
- 发版前接到一个临时新需求 ，需要在web端地址选择时用地图，并获取经纬度。 临阵发版之际加需求，真的是很头疼，于是赶紧找度娘，找api。 我
