IT技术互动交流平台

移动端页面使用单位的问题:关于px 百分比 em rem开发中逐渐转换的问题记录

作者:羚~羊~  发布日期:2016-12-22 20:36:05

开始写前端页面也有了快两年时间,从一开始的懵逼到现在的淡定,但是不能改变我还是一只小菜鸟的事实,平时遇到的一些问题都会记录在文件夹里,现在都整理一下大家一起分享自己平时也翻翻看看~

不知道大家平时写的时候是用的什么,但是我一般用的是这几个:px,百分比,em,rem

一、首先咱先了解下这几个都是啥,有啥区别:

px:就是像素,相对于屏幕分辨率而言的,简单来说就是平时我们写静态页面时用px作单位,但是在firefox/chrome会发现我们的布局发生了变化;

百分比:这比较适合块状的页面设计,但是他相对于不同屏幕而言的,比如经常在写移动端的时候也会用到

em:是相对长度单位,相对于父级元素的单位。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。就是当默认字体大小为14px,那么就有1em=14px;

rem:是相对于根元素,这样就意味着,我们只需要在根元素确定一个参考值。

二、平时用这些遇到的一些问题以及现在我最终使用的

平时写pc端页面时,没有疑问的,我选择的是px作为单位,遇到一些比较复杂的需要定位的也会夹杂使用百分比

主要来说说移动端页面:

1、刚开始接触移动端页面时,我用的是百分比和px,当时做出来就只对着一个手机进行调试,结果可想而知的,用不同浏览器测试时,有些布局就乱掉了,就算调整也不能完全还原设计图所设计的;

2、后面发现了使用em作为单位,它是相对长度单位但是是相对于父级元素的,相对于当前对象内文本的字体尺寸,当浏览器分辨率发生变化时,他会重新计算相对的长度的大小并展现出来

这个行内文本的字体大小是可以认为设置的,默认是14px,就有1em=14px,所以将页面里的px转化为em在显示是基本可以满足适应不同移动端浏览器的,下面我就开始了漫长的计算过程

因为不同移动端屏幕的分辨率是不一样的,而我们一般得到的设计稿是640px,那怎样才能在750px等更大写的屏幕上完美的显示出来呢:

这里我使用的是css3 媒体查询,先给页面设置一个字体大小为18px(也就是1em=18px)然后按不同的屏幕尺寸,分别计算不同屏幕下相对于18px的字体大小:

body {
  font-size: 18px;
}
@media only screen and (max-width: 300px) {
  body {
    font-size: 16.666666px;
  }
  .viewport {
    max-width: 300px;
  }
}
@media only screen and (max-width: 310px) and (min-width: 300px) {
  body {
    font-size: 16.666666px;
  }
  .viewport {
    max-width: 310px;
  }
}
@media only screen and (max-width: 320px) and (min-width: 310px) {
  body {
    font-size: 17.22222px;
  }
  .viewport {
    max-width: 320px;
  }
}
@media only screen and (max-width: 350px) and (min-width: 320px) {
  body {
    font-size: 17.77778px;
  }
  .viewport {
    max-width: 350px;
  }
}
@media only screen and (max-width: 360px) and (min-width: 350px) {
  body {
    font-size: 19.44444px;
  }
  .viewport {
    max-width: 360px;
  }
}
@media only screen and (max-width: 400px) and (min-width: 360px) {
  body {
    font-size: 20px;
  }
  .viewport {
    max-width: 400px;
  }
}
@media only screen and (max-width: 470px) and (min-width: 400px) {
  body {
    font-size: 22.22222px;
  }
  .viewport {
    max-width: 470px;
  }
}
@media only screen and (max-width: 480px) and (min-width: 470px) {
  body {
    font-size: 26.11112px;
  }
  .viewport {
    max-width: 480px;
  }
}
@media only screen and (max-width: 540px) and (min-width: 480px) {
  body {
    font-size: 26.66666px;
  }
  .viewport {
    max-width: 540px;
  }
}
@media only screen and (max-width: 560px) and (min-width: 540px) {
  body {
    font-size: 30px;
  }
  .viewport {
    max-width: 560px;
  }
}
@media only screen and (max-width: 570px) and (min-width: 560px) {
  body {
    font-size: 31.11112px;
  }
  .viewport {
    max-width: 570px;
  }
}
@media only screen and (max-width: 630px) and (min-width: 570px) {
  body {
    font-size: 31.66666px;
  }
  .viewport {
    max-width: 630px;
  }
}
@media only screen and (max-width: 640px) and (min-width: 630px) {
  body {
    font-size: 35px;
  }
  .viewport {
    max-width: 640px;
  }
}
@media only screen and (max-width: 710px) and (min-width: 640px) {
  body {
    font-size: 35.55556px;
  }
  .viewport {
    max-width: 710px;
  }
}
@media only screen and (max-width: 720px) and (min-width: 710px) {
  body {
    font-size: 39.44444px;
  }
  .viewport {
    max-width: 720px;
  }
}
@media only screen and (min-width: 720px) {
  body {
    font-size: 40px;
  }
  .viewport {
    width: 720px;
  }
}

然后就可以计算出不同屏幕分辨率下的相对尺寸是多少px,在按照设计稿计算出em值(假设设计稿为640px,那么(1em=35px)),这真的是相当的麻烦,还得拿个计算器放旁边。。。

em是相对于父级元素变化的单位,所以当你的父级元素的字体大小发生变化时他也会跟着变化,这里又得计算。。。总之就是麻烦。。。我还用了好久。。。3、后来继续研究开始使用rem,最起码它是直接的相对于根元素变化的,感觉这是em的一个升级。。。

同样的这也是需要计算和设计初始的字体大小的,但是有个很便捷的路径,使用sublime text3里面的一个cssrem插件配合使用flexible.js,可以自动进行换算,省时省力,还省代码。当时有的时候还得配合使用百分比和px。

以上都是个人的小经验,也许大神门还有高招,本人还在不断学习中。。。

Tag标签: 问题   百分比   单位  
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规