老师为什么这里的高度是178? 而不是340?

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,图片的宽高比是750:340 ,如果宽度变小,而高度不变,这个比例肯定和原比例不一样。这里图片宽度是变化的,高度如果依旧是340px肯定会变形。比例也不是随意设置的,要看宽度如何变化。自己再认真思考一下哦,这里只不过是拿iPhone6去进行计算的,最终并没有直接设置固定宽度178px,而是转换为了rem。

http://img1.sycdn.imooc.com//climg/5eb3765c096f624905690164.jpg

建议同学自己测试一下,rem是一个相对单位,在不同设备下,跟字体肯定会跟随变化的。也就是它在iPhone6下,4.746667rem计算出的值是178px。在其他设备下,会因为跟字体的不同,计算出的高度也不同。也就是根据设备宽度的变化,高度也一直跟随变化的。


http://img1.sycdn.imooc.com//climg/5eb377c909ca6bc717310410.jpg

祝学习愉快 ~

好帮手慕夭夭 2020-05-06 18:02:39

同学你好,340px太高了,178px正合适哦。如下:

http://img1.sycdn.imooc.com//climg/5eb28af0099d8fd505080265.jpg

http://img1.sycdn.imooc.com//climg/5eb28b1e092cfdd605560422.jpg

图片的实际宽高是750*340px,但是这里页面的宽度是375px,所以高度上也要按照比例去缩小一倍左右。当然了,这里老师多设置了几像素,影响不大。

祝学习愉快 ~

  • 提问者 慕粉3924036 #1
    您的意思明白,主要是我不明白这个原理?为什么是图片高度的1/2;而不是它本身的大小,或者其他的比例?您说的因为页面宽度是375px?但是不同的设备页面宽度是不固定的?比如ipad pro 要用486px转换rem是这样吗?
    2020-05-06 19:18:49
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师