移动端的宽高随着分辨率的变化对应变化

4 篇文章 0 订阅
1 篇文章 0 订阅

移动端的宽高随着分辨率的变化对应变化,比如说要在移动端画圆,但是怎么样让他的宽高比例一致呢,如果用rem来对圆的半径,那么无非就是定死半径了,用百分百是不能适配各移动端的。
如果在一个div里平均显示两个圆并且这两个圆半径相同,无非就是宽高相同而且随着屏幕的大小的变化进行半径变化,一般来说可以是这样
一个大div中2个小div,这两个小div宽是大div的50%,高度呢就无法设置了,因为高度用百分比的话相对的父级的,但是父级默认是被子级撑开的,所以百分百是不行的,写多少百分比高度都是为0,但是默认的padding,margin使用百分比的话是相对父级的宽,所以我们可以设置padding-top或者padding-bottom是跟父级的宽度一样实现这个效果(撑开div大小)
这样做的话效果是实现了如果想往圆写字或者添加元素的话又会出现新的问题,本来很好的圆形变椭圆了。是因为padding会占用宽高,
要想不变他们的形状,可以使用position:absolute来搞,设置好相对top跟left就可以完美实现了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值