移动端开发流行单位rem的几点看法

 前言

 
rem单位在移动端前端开发很流行,今年我参加上海8月8号的CSS Conf 大会,好几个老师都提过了!其实我们公司很早也就用rem单位了,关于css的单位,大家请看http://www.haorooms.com/post/css_unit_calc
 
rem的看法
 
rem单位确实好处蛮多的,它是相对于根节点,让我们整个网站单位可以统一。还可以让我们的字体更好的自适应网站的大小。但是,你用过了就知道,它会出现一个问题:
 
用Chrome浏览器打开你做的网站的时候,有时候会出现字体很大的情况。但是刷新一下页面就好了。
 
之所以会出现这种情况,原因是因为我们为了计算方便,将原本默认1rem=16px修改1rem=10px。因此,我们在html中通常做了如下设置:
 
html {font-size: 62.5%; /**10 ÷ 16 × 100% = 62.5%    1rem = 10px   **/}  
但是呢,Chrome浏览器有时候会忽略了html的设置。于是在初始化页面的时候,出现了上面字体过大的情况,本来1.6rem应该渲染成16px的字体,却被渲染成了16*1.6=25.6px大小了。
 
问题解决
 
你仔细研究会发现,出现字体过大的“元素”,通常是没有设置font-size的,元素的font-size是继承根目录的,因此,字体会变大。
 
因此,最佳的一种解决方案是:
 
在你要展现的文字父级或者其本身设置font-size
第二种解决方案:
 
我们在页面中添加style样式,给body设置font-size
 
例如把下面的代码放到 head 里面:
 
<style>  
        body {  
            font-size: 1.2rem;  
        }
</style>  
期待更优方案
 
上面是我解决rem字体过大的方案,不知道大家有没有更加好的方案来解决这个问题。

时间: 2024-08-03 12:26:49

移动端开发流行单位rem的几点看法的相关文章

移动端页面单位rem

今天有个朋友在群里上传了一份案例,点进去研究了起来,发现了rem这个单位. 然后我就开始百度rem,搜到几篇好文章,跟大家分享一下, 以下代码,是在朋友所发案例中拷贝的 <!doctype html> <html lang="en"> <head>         <meta charset="UTF-8">         <title>Document</title> </head&g

为什么 HTML5-前端开发很火且工资很高

晚上逛论坛看到一篇对从事HTML5前端开发的文章写的非常不错,和目前的市场形势差不多,然后我在其基础上给大家进行加工总结一下分享给大家.今天我们谈论的话题是<<为什么从事HTML5前端开发越来越火,工资高,并且还涨的快>>,针对这个问题进行分析分析.   俗话说的好:"没有调查,就没有发言权",同样在市场浪潮中,同样如果没有实际调查,不要轻易发表言论,误导他人.   现在主要从下面几个方面给大家进行总结和分析呢?  目     录 HTML5前端开发的薪资 市场

基于Vue2的移动端开发环境搭建详解_javascript技巧

前言 vue2.0发布了,那么还在用vue1.x的你,是不是也有所心动呢?下面这篇文章就给大家详细介绍基于Vue2的移动端开发环境搭建的详细步骤,下面来一起看看吧. 一.vue-cli 首先还是介绍我们的脚手架工具,因为它能让我们省去大部分的配置时间,这里只给出简单步骤,保证你的命令顺利运行的前提是安装最新版本的 node 和 npm,这里不赘述升级流程 全局安装 vue-cli npm install vue-cli -g 借此也全局安装一个 webpack npm install webpa

网易推有端开发 轻度游戏成本或下降

[TechWeb消息]5月18日,一向被国内 认为最能"吸金的"MMO网游遇到营收瓶颈时,像国外<植物大战僵尸>.<愤怒的小鸟>的轻度游戏却风靡起来.随着中国玩家碎片化时间的不断增加,以往被认为难以盈利的小游戏引来国内开发者的热情,网易日前推出了有端开发平台iTownSDK,以期望降低开发者成本.据易观国际提供的网游用户市场研究报告中显示,中国网游用户中33.5%为上班族,整体职场人群占73.5%.这类职场人群具有良好的消费能力, 但是娱乐时间被工作和应酬大大压

01-移动端开发教程-CSS3新特性

1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包括: CSS3新特性 新选择器 边框.背景升级.圆角.阴影 新的盒模型 渐变.动画.2D3D转换 伸缩布局.多列布局 新单位 在线字体图标 前缀应用.浏览器兼容.渐进增强 媒体查询 移动端适配开发方案 响应式布局开发方案 移动端js.触屏事件 zepto.js\bootstrap\iScroll.j

CSS3教程:相对单位rem详解

文章简介:CSS3新增了一个相对单位rem(root em,根em),这个单位引起了广泛关注.这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素. CSS3新增了一个相对单位rem(root em,根em),这个单位引起了广泛关注.这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素.这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体

2016届360公司PHP服务端开发笔试和面试之所得所感

        这是一篇叙述自己在360公司参加笔试和面试的过程,可能面试的职位并不是你所学的方向,但是如果你能从中学到些什么或者吸取我的教训,那么作者就非常知足了.本着"学习别人是怎么失败的,活着出来的人才能成功"的目标,我从三个方面进行叙述:         第一部分:360公司笔试题         第二部分:面试过程         第三部分:注意事项及心得体会         同时,真心感谢360公司,我非常向往的一个公司.也非常感谢给我面试的那位大哥,让我真的学到了很多东西

请问哪位大神有试过用c# 服务端开发百度云推送的

问题描述 请问哪位大神有试过用c# 服务端开发百度云推送的 c#服务端开发百度云推送的(特别是服务端推送一条消息给IOS手机,就报了一个403,说权限验证失败的),问了百度云的人,问了都不知道什么回事~! 解决方案 看看你的校验签名和key是否正确,百度有没有给你开权限和账户.如果百度自己的人都不知道,我只能无语了. 解决方案二: 楼主,请问有解决方案吗?同样遇到

客户端-安卓手机客户登陆端开发时Eclipse中应该怎么建文件夹

问题描述 安卓手机客户登陆端开发时Eclipse中应该怎么建文件夹 在手机开发安卓应用客户登陆端(MYSQL作为数据库)应该怎么建立工程,看到有些人写的代码,是几个文件分开的,首先我要写一个登陆的界面,注册界面并且能够与服务器进行通信,采用的是mysQL数据库,servlet.java是放在什么地方,部署信息是放在什么地方,这些文件时如何放置的或者需要哪些文件