移动版自适应解决方法

  • A+
所属分类:Html

方法一

第一步:设置初始rem

css file:

说明:

100vw是设备的宽度,除以7.5可以让1rem的大小在iPhone6下等于100px。

 

第二步:全局px替换为rem

替换html中的px为rem,注意rem=px/100,即font-size: 12px,需要写成font-size: .12rem,其他宽度、高度、间距等同理。由于rem是相对于根节点元素大小的单位,遂当设备宽度改变时,采用rem布局的大小均会跟随相同比例变化,从而实现整体缩放。

方法二

使用js实现,参考网易移动版

 

下面总结下网易的这种做法:

    • 先拿设计稿竖着的横向分辨率除以100得到body元素的宽度

    移动版自适应解决方法

    • 播放器高度为210px,写样式的时候css应该这么写:height: 2.1rem。之所以取一个100作为参照,就是为了这里计算rem的方便!
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: