美文网首页
nuxt开发手记(1)-rem字体偏上问题

nuxt开发手记(1)-rem字体偏上问题

作者: coffee_me | 来源:发表于2017-07-11 15:25 被阅读0次

0707
M站开发完成第二个模块,发现一个问题,中文字体在android手机上字体呈现偏上,按钮不美观,单行内容顶部被裁掉少许。

不替换字体大小做过如下尝试均无效
1、替换不同font-family
2、设置line-height
3、删除全局的box-sizing:border-box
4、设置display:flex 等参数
5、设置padding撑开元素,删除height设置

经过反复测试得出:torem(28px)字体偏上问题最为明显,最后测试出有以下2中方式可以处理:
1、换成torem(24px)或者torem(34px)后感觉偏上缓解非常多。
2、换成px单位后字体呈现完全正常

最终选择将torem(28px)字体根据内容重要程度替换成torem(30px)~torem(34px)避免使用28px,
单行内容设置height:1.15

  • 相关项目简介
    地址:m.gulugulu.cn
    rem框架:flexible

相关文章

  • nuxt开发手记(1)-rem字体偏上问题

    0707M站开发完成第二个模块,发现一个问题,中文字体在android手机上字体呈现偏上,按钮不美观,单行内容顶部...

  • nuxt开发手记(3) - nuxt 中 scrollTop问题

    0705还是nuxt框架的相关问题,我现在处于的版本是v1.0.0-alpha.4,在列表页加载很多数据后用户点击...

  • 动态REM

    什么是rem? rem是相对于根元素html字体大小来计算的,即( 1rem = html字体大小 ) rem和e...

  • nuxt开发手记(4)-深入响应问题

    M站的开发还剩下最后2天,基本只剩下优化工作,但是今天在优化点赞功能的时候出现了个小问题:路由:http://mo...

  • HTML学习之图片字体适配

    移动h5 图片字体等适配WebApp开发之--"rem"单位Rem实现自适应初体验手机端页面自适应解决方案—rem布局

  • 前端

    1.字体样式 字体大小:font-size:16px/1rem;(px是像素单位,rem/em 相对单位,跟浏览器...

  • html2canvas遇到的坑

    1.字体如果又特殊字符,会导致字体重复(采用rem(1),提高文字间的间距,可以避免重复问题) 2.不能渲染svg...

  • html----rem结合vw布局

    1.rem rem是相对于根元素的字体大小的单位 rem能等比例适配所有的屏幕,根据html的字体的大小来控制re...

  • html动态设置根字体大小(页面字体使用rem单位可根据屏幕大小

    html动态设置根字体大小(页面字体使用rem单位可根据屏幕大小自适应) 1.新建rem.js文件 (functi...

  • 移动端开发自适应

    1、rem与em rem转化为像素大小取决于页根元素的字体大小,即 html 元素的字体大小。 根元素字体大小乘以...

网友评论

      本文标题:nuxt开发手记(1)-rem字体偏上问题

      本文链接:https://www.haomeiwen.com/subject/gwkmhxtx.html