什么是响应式Web设计？怎样进行？（3）
发布时间：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
投稿猜你喜欢
- Protocol 和服务器一样，也是通过该类来实现。先看一个简短的例程：from twisted.internet.protoc
- 我们经常会遇这样一个需求：判断字符串中是否包含某个关键词，也就是特定的子字符串。比如从一堆书籍名称中找出含有“pytho
- 规律：半角空格的 charCode 为 32, 全角空格为 12288. 其他半角字符 ( 33 – 126 ) 与全角 ( 65281 –
- 介绍Session:在计算机中，尤其是在网络应用中，称为“会话控制”。Session 对象存储特定用户会话所需的属性及配置信息。这样，当用户
- 以下是一些Python实用技巧和工具，希望能对大家有所帮助。交换变量x = 6y = 5x, y = y, xprint x>>
- 一、从外部文档中粘贴时，如果只要文字而不想要其格式，可以使用“Edit→paste as text”命令，不要直接用Ctrl+V。二、当有浏
Python计算的位数在电脑上做了一个实验，看看python能计算到多少位，一下是结果。x = math.sqrt((3))print (&- 如果中间红色区域是针则可以用下面的代码检测，其阈值和斑点检测的参数根据图像像素值做相应修改检测的主要思路是先通过找到外面的大圆，再通过圆心定
- python queue队列类型及函数1.队列的种类Python queue模块的FIFO队列先进先出。 class queue.Queue
- 本文实例为大家分享了python自动发送邮件的具体代码，供大家参考，具体内容如下#coding=utf8 ''&
- 从今年3月份开始mysql官网开始发布相关的5.6系列的各个版本，对于mysql5.6系列的版本对一起的版本进行了全局性的细节性加强；个人感
- 一、项目介绍 在此项目中，目的是预测爱荷华州A
- 关于杨辉三角是什么东西，右转 * ：杨辉三角稍微看一下直观一点的图：１１１１２１１３３１１４６４１１５1010５１１６152015６１１７
- 下载：pip install apschedulerpip install django-apscheduler将 django-apsch
- 处理数据集的过程中用到了mask 但是源数据集中只给了mask顶点的坐标值，那么在python中怎么实现生成只有0、1表示的mask区域呢？
- 在SQL Server Management Studio 用WINDOWS连接的情况下改实列的“属性&rdqu
- 引言“ 这是MySQL系列笔记的第十一篇，文章内容均为本人通过实践及查阅资料相关整理所得，可用作新手入门指南，
- 一 MySQL的内部组件结构大体来说，MySQL 可以分为 Server 层和存储引擎层两部分。1.1 service层主要包括连接器、查询
- 本文仅作为基本操作流程的记录，不进行细节描述一、环境安装1、安装Pycharm在官网上下载最新版本Pycharm安装即可2、安装pyQT5p
- 本文实例为大家分享了python openCV自制绘画板的具体代码，供大家参考，具体内容如下import numpy as npimport
