Skip to content

小小前端

明月本无心,行人自回首。

Menu
  • 前端开发
  • 编程技术
  • SQL语句
  • Linux
  • 生活/旅行
  • JSEditor
  • MiniBarCMS
  • About
  • 隐私政策
Menu

移动端使用rem字体,注意事项

Posted on 2017年3月31日2017年3月31日 by king2088

rem的使用在移动端非常广泛的,但是很多小童鞋,包括我自己在内,有时候使用的方法都是错误的,下面我们一起来讨论下,rem到底该如何使用才能兼容手机端所有手机。

在使用rem之前,我们必须给html设置一个相对的font-size,然后让rem相对于这个字体的大小进行设置。这样才能在手机端正常浏览和使用,只要我们设置了html的font-size,那么我们对于div元素的宽高,我们都可以直接使用rem作为单位使用了。

为了让页面上的所有元素能够兼容所有了浏览器,保证rem的宽高一样。那么我们得给html设置一个font-size的值为625%(切记,移动端一定要设置成625%,PC端可以设置为62.5%)。相关代码如下:

html{
font-size: 625%;
}

然后在html元素上我们应该这样使用rem
body{
font-size: 0.16rem;/*字体为16px*/
}
header{
width:6.4rem;/*设置header宽度为640px*/
height:0.45rem;/*设置高度为45px*/
}
h1{
font-size:0.2rem;/*设置字体为20px*/
}

问题所在,如果我们在手机端使用的html默认字体为62.5%,那么就会出现以下的问题,webkit内核浏览器解析rem会出现相关问题,如下图所示,火狐能够正常解析处理这个问题,但是chrome确无能为力啊。

rem
rem

上面图片显示的代码如下,你要是想尝试下,可以将此代码复制后,自行进行测试下不同浏览器下的不同显示效果吧。







Title


小小前端



发表评论 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

分类

近期文章

  • cordova-plugin-camera在某些android机型中拍照或选择文件时闪退出错的解决办法 2019年10月24日
  • JavaScript nodeJS base64加密解密url参数 2019年10月15日
  • 利用expressJS编写reset api 2019年4月13日
  • angular4 + http拦截器 2019年3月21日
  • ionic navCtrl.pop如何传递参数给上一个页面 2018年11月16日
  • ionic3搭建开发/测试环境 2018年10月25日
  • ionic2、3双击硬件back按键退出应用 2018年10月24日
  • VMware安装Mac OS High Sierra 10.12及高版本无法全屏 2018年8月24日

近期评论

  • 手表资讯发表在《ReactJS环境搭建》
  • king2088发表在《ionic中使用热更新插件cordova-hot-code-push》
  • 重阳节的诗句发表在《常用的sql语句》
  • 新郎致辞发表在《PHP代码实现WordPress相关文章的几种方法》
  • 霸道总裁发表在《vsftpd 提示 unrecognized service 解决办法》

归档

标签

Ajax Android Angular APP Cordova CSS css3 express html5 ionic Java javascript jQuery Linux loading mac Mac OS mongodb MySQL node nodejs PHP react SQL SSH VirtualBox vue vue-cli win10 WordPress WP REST API 主题 兼容性 前端 备份 插件 数据库 数组 服务器 正则表达式 浏览器 热更新 目录 组件 错误
2022年 5月
一 二 三 四 五 六 日
 1
2345678
9101112131415
16171819202122
23242526272829
3031  
« 10月    
© 2022 小小前端 | Powered by Superbs Personal Blog theme