首页 > 交互 > 关键词   >  Web设计最新资讯  > 正文

什么是响应式Web设计?怎样进行?

2011-11-21 13:37 · 稿源:beforweb.com

弹性图片

响应式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标记的用法,可以参考苹果官方的文档

  • 相关推荐
  • 大家在看
  • 天风证券响应国家号召,打造“共同富裕研究中心”

    近年来,天风证券一直致力于响应国家号召,积极助力实现共同富裕的伟大梦想。两个月前,天风证券就发布了一个关于如何促进实现共同富裕的行动计划,为如何达到共同富裕提出具体化的引导措施。最近,天风证券还和中国政策科学研究会联合共同成立了机构,这也是行业内第 1 个由券商和全国性的研究所联合设立的研究机构,目前这所”共富中心”已经在北京正式运行。“共富中心”成立后,天风证券还和中国政策科学研究会共同举办了年度?

  • 痘博士响应北京消防宣传月举办消防安全讲座

    12 月 17 日,为响应北京市第三十一届“119”消防宣传月活动,践行“落实消防责任,防范安全风险”主题,在北京市丰台区,政馨社区管委会倡议下,北京痘博士科技有限公司为 80 余名员工举办消防安全知识讲座。讲座特邀北京红十字会宣教员米鸿鹏主持讲授。米宣教员以理论阐述、现场实操演示和救护技能考试相结合的方式展开培训,内容涵盖电器火灾成因、火场逃生、海姆立克法急救、除颤仪(AED)使用、心肺复苏等救护知识和消防安全技?

  • 世茂集团响应“物业服务+生活服务”理念 满足业主多元需求

    世茂集团旗下物业管理公司世茂服务以“美好生活智造者”为品牌理念,定位中国领先的综合物业管理和社区生活服务提供商,不断拓宽服务边界,探索“物业服务+生活服务”模式,布局综合物业管理、多元增值服务、城市服务业务和数字科技业务,致力于成为中国领先的城市全场景生活服务商...最新数据显示,截止2021年11月,世茂服务合约管理面积达3.04亿平方米,在管面积2.34亿平方米,已提前完成全年面积指标...一直以来世茂服务积极相应国家倡导的“物业服务+生活服务”理念,围绕用户和资产,布局本地生活、社区教育、家居家装、居家养老等增值服务,更好满足业主和用户的需求...展望未来,世茂服务将坚定战略,稳步推进,继续以“美好生活智造者”为品牌理念,定位中国领先的综合物业管理和社区生活服务提供商,致力于成为中国领先的城市全场景生活服务商...

  • 快速响应,体验升级,奥田集成灶服务一直在路上!

    奥田集成灶如今已走进千家万户,凭借高颜值与出色的性能,堪称现代家庭的“厨房神器”。立足于品牌发展,奥田集成灶一直将产品与用户体验放于首位。2021年,奥田集成灶升级为「极速响应123、服务满意100%」这一全新服务理念,并开启了年末老用户焕新保养活动,为奥田集成灶用户提供了免费的清洗与保养,专业的服务赢得了用户的认可。让我们一起来回顾那些奥田集成灶优秀的服务案例吧~用心做好服务,一直坚持优秀服务案例——广西?

  • 响应苏州市委人才工作会议精神,斜杠广场落实“人到苏州才有为”号召

    苏州斜杠广场响应市委人才工作会议-全力打响“人到苏州才有为”的号召;将结合自己丰富的电商运营经验和城市存量资产运营经验;培训、孵化专业型行业人才并提供就业机会、成长空间......

  • 1688平台调整极速退现货类订单以及售后响应规则

    1688 发布通知称,为了给买家提供更高效的退款服务和交易体验,1688.com将对售后响应规则做调整说明。&lt;br/&gt; &lt;br/&gt; 规则对售后响应交易时间进行了调整,新规则将于 2022 年 01 月 13 号正式生效。

  • 电脑租赁平台免押金哪个好 智企租服务好售后响应速度快

    纵观上下五千年,人类社会经历了农业经济、工业经济的发展更迭。如今,新一轮信息技术的深化应用掀起了数字化转型的浪潮,数字经济时代大举来袭。在此背景下,企业主纷纷进行战略转型,重资产轻量化成为很多公司提升效率、降本增效的新趋势,所以现在越来越多的中小企业选择租赁IT设备而非直接购买。由此一来,选择一个靠谱的租赁平台就显得尤为重要,那么,电脑租赁平台哪个好呢?电脑租赁平台哪个好,选择智企租平台大品牌不同于

  • 什么是有竞争力的电动牙刷?一晤未来带来自适技术,定制化清洁

    辰宇信息咨询市场调研公司于 12 月初发布了《2021- 2027 全球与中国便携式牙刷消毒器市场调研及可行性研究报告》,报告研究“十三五”期间全球及中国市场便携式牙刷消毒器的供给和需求情况,以及“十四五”期间行业发展预测,并着重分析便携式牙刷消毒器行业竞争格局,在对便携式牙刷消毒器行业产品分类、应用和行业发展有利因素的详细分析中,报告指出:“科技的开发和应用是关键一环”。便携式牙刷消毒器,广义上包含了冲牙器、?

  • Opera宣布将集成Polygon以太坊扩展平台 以支持Web3去中心化

    Opera 刚刚在官方新闻稿中宣布,新版浏览器将集成 Polygon 。作为一个以太坊扩展平台,其旨在方便用户在浏览器中访问位于 Polygon 网络上的数千款去中心化应用(dApps)。此前一段时间,该公司一直致力于让用户更轻松地实现 Web3 交互,本次公告则意味着向着这个方向再次迈出了重要一步。如果一切顺利,我们有望于 2021 年初正式见到 Opera 的 Polygon 集成。(来自:Opera Press)Opera 移动执行副总裁 J?rgen Arnesen 评论道:与

  • Soyee小叶:什么是PLA滤嘴技术?

    “7·26”重要讲话明确指出,我国发展已站在新的历史起点上,因此要进入新发展阶段、贯彻新发展理念、构建新发展格局。作为国家经济发展过程中的一环,雾化市场也已经走到了发展的重要拐点,行业新规的推出,意味着市场面临迅速扩张,大量新消费群体的涌入会带来新机遇和高标准,同时对行业提出了更高要求,行业的未来需要新的方向才能谋求长足发展。纵观全球,不难发现雾化市场长久以来一直面临着口味扩张竞争,技术革新却寥寥。?

这篇文章对你有价值吗?

  • 热门标签

热文

  • 3 天
  • 7天