期权记-ETF期权开户导航 期权记是专业的50ETF300ETF期权开户投资交易导航

移动端页面常用单位

我们在做页面的时候到底该使用多大的尺寸呢,如果我们按照640px的页面去做了一版页面,那是不是还需要做一版750px的页面呢,很显然是不用的,我们只需要使用移动端页面布局的单位,结合viewport来进行页面重构就可以了,那么我们先来了解一下移动端页面布局中常用的有哪些单位

  在我们的移动端页面布局中,比较常用的单位有em,rem,%,vw和vh,等,这些单位都有一个共同点,他们都是一个相对单位,是可以根据页面的viewport的变化,进行实时改变。

  我们简单介绍一下:em的值,根据父元素的font-size进行计算;rem是根据跟元素的font-size进行计算;% 根据父元素的尺寸进行计算;vw和vh分别根据viewport的宽度和高度进行计算,100vw或vh,等于viewport的宽度或高度。

  这里我们以rem为例:

  假定有一个设计稿的宽度为750px,如果我们则将整个图分成100份来看。那么,我们现在就让根部元素的font-size为75px,设置为:

  html{

  font-size: 75px;

  }

  那么,我们现在就可以比对设计稿,比如设计稿中,有一个div元素,宽度,高度都为75px,那么我们可以写成:

  div{

  height: 1rem;

  width: 1rem;

  }

可能看到这里,一些人还是不明白怎么用rem做到适配不同的分辨率,那么我们继续,现在,我们换了一个宽度为640px的手机

那么这个时候,我们的rem单位就起到作用了。

  因为我们的rem全是根据html的font-size来改变的,所以说,这个时候,我们只需要把html下的font-size改成64px。我们之前的div,因为是根据html下的font-size动态变化的,那么。此时也就变成了宽度和高度都为64px的东西了。这样,就可以做到适配不同的屏幕分辨率了。(其实就是个等比缩放)

  那么总结一下,我们的解决方案,其实就是 设计稿的宽度像素/html的font-size = 1rem的值。

  当然我们需要动态的对html的font-size进行改变,就需要通过JS来进行操作。

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

作者:期权小韭菜 分类:网页教程 浏览:
请先 登录 再评论,若不是会员请先 注册