为了账号安全,请及时绑定邮箱和手机立即绑定

响应式Web之图片的缩放

标签:
Html5

其实对响应式网页有种片面的误解:页面元素不固定宽度,按百分比自动缩放,来实现不同尺寸视口的统一展示;响应式网页嘛,顾名思义,就是这种理解。其实响应式Web开发属于HTML5,并且是专门用来适配不同终端的,而且是根据终端类型来适配不同的功能模块和表现样式的,所以上面的理解是片面的;因为忽略了适配不同的功能模块,当然这样也就无形的增加了原本页面的复杂性,可能你为了适应3大终端,而必须得设计三套PSD,写三套样式表,还有额外的交互体验,但这是值得的,这样一来,你的应用在各种终端下都能完美展示,并且不失用户体验,在产品主线不变的情况下,能满足更多的用户需求,带来不一样的体验。

响应式Web初探——花满楼 里有响应式开发的基本做法,这里谈下其中的一大重点,图片的缩放。我们要做的是:PC、iPad、mobile三大终端保质响应图片。

网页头部加入<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />后我们要适配的宽度就是手机的屏幕尺寸了。参照http://screensiz.es/phone可以看出,要想图片在手机上保质显示,图片宽度不应小于380到400,这时图片的样式width:100%、max-width:100%是很好的样子;但这个尺寸只是用于手机,其他终端下,图片必然会放大变形;

其实不就是响应缩放一个图片嘛,作为一个前端,这根本就不是啥难事,来个简单暴力的方式吧:统一图片尺寸以PC上为准,其他终端按max-width:100%来缩放,或者以手机上为准,去掉width:100%;但这两者都有一定弊端:前者在手机端的消耗将大大增加,后者很难满足复杂的场景。

下面来看media query的做法:

咱先把图片作为背景显示,分别适配三大终端;

@media only screen (max-device-width:350){background:url(mobile.png) no-repeat;background-size:100% 100%;}

@media only screen (min-device-width:500) and (max-device-width:1024){background:url(pad.png) no-repeat;background-size:100% 100%;}

@media only screen (min-device-width:1024) and (max-device-width:1024){background:url(pc.png) no-repeat;background-size:100% 100%;}

是的,这样你将会为一张图片的显示准备三个版本的图片和样式,然而这也并不是什么难事;在这里,不用担心你在一个终端会把3种图都加载,这3个media相当于3条if语句,只有符合条件才会去执行其中的样式。

HTML5很酷,前端很酷,作为一个小前端(花名:花满楼),道阻且长,只言片语,愚论拙见,在此分享,与君共勉!

本文为慕课网作者原创,转载请标明【原文作者及本文链接地址】。侵权必究,谢谢合作!
点击查看更多内容
7人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消