响应式开发从原理到实战案例(十四):响应式改版完整案例-图片处理

本文介绍了两种使图片在不同屏幕尺寸下自适应的方法:使用百分比和em单位。使用em单位时,图片尺寸与父元素的字体大小成比例,从而实现响应式布局。文章对比了这两种方法,并探讨了它们的优缺点。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

首先来看,图片在屏幕放大和缩小是能够很好的适应的效果图



缩小后



图片的解决方案

第一种:使用百分比

缺点:放大后,图片会失真

第二种:使用em

原理分析

em是一种数量单位,与父元素的font-size形成一种比例关系,这种关系可以由开发者来控制

例如

 父元素font-size100px

 子元素 width:2em

 屏幕宽度 800px

 公式比例:

_     font-size=100px*屏幕宽度/800;// 父元素字体大小的计算和屏幕有关,屏幕大则大,屏幕小则小

_     子元素宽度这是自动计算的=父元素font-size*2;//父元素大则大父元素小则小

 

js代码的实现

rem和em的区别

rem相对的是html的font-size,em相对的是父元素的font-size,
所以rem是全局控制,em是局部控制。在做webapp的时候rem是非常有用的

~~~~~~~~~~~~~~~~~下一节《响应式改版完整案例-完结》~~~~~~~~~~~~~~~~~


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

智学无忧-老曹

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值