换算rem的宽度和高度不生效 chrome字体最小为12px

现在很多前端都用rem来单位元素和字体大小

一般的设置是

html{

font-size:62.5%;

}

换算来源 1rem = 16px

10/16 = 0.625

这样10px 就等于了1rem

1.4rem = 14px （这样很好换算）

1.6rem = 16px （这样很好换算）

在chrome浏览器中有一个问题是字体小于12px统一都按12px

but 我们在计算元素的宽高是会出现问题

例如一个div的宽原先是100px 高是100px

按照我们原先的思想 width:10rem & height: 10rem

可是现实中没有达到我们的预期，真是的是 width:120px (width:10rem) && height: 120px(height:rem)

彻底懵逼了，怎么可能。。。。。

字体大小没有问题，为啥width和height不好使了。。。。。

原因在于chrome最小字体为12px，刚才已经提到过了，。。

我们在html中设置了font-size：62.5% ，（= 10px）真正的是 =12px

这时候我们知道原因了，可以这样设置

把 62.5% * 12

然后把原先的值统一除以 2

例如

html{

font-size:125%；

}

div{

font-size: 0.8rem; /*真实值： 16px 怎么来的 16/10/2=0.8*/

width: 5rem; /*真实值： 100px 怎么来的 100/10/2=5*/

}

如果算术不太好的怎么办

我们可以设置用100来换算

html{

font-size:625%；

}

div{

font-size: 0.16rem; /*真实值： 16px 怎么来的 16/100=0.16*/

width: 1rem; /*真实值： 100px 怎么来的 100/100=1*/

}

这样和一起的62.5% 换算差不多，就是有从除10变成了除以100

换算rem的宽度和高度不生效 chrome字体最小为12px相关推荐

html中rem单位的转换,rem换算(rem与px换算工具)
哪位大神,能告诉我,rem和px是怎么换算的?然后怎样用rem布局??我就. 需要自己设置,一般是1rem=14px,单位和px的布局是一样的,只是单位不同而已,所以不必纠结 px像素(Pixel). ...
Android中获取文本宽度和高度
本文罗列Android中字体宽度和高度的相关概念,及测量方法 . 原文请参考Android_FontMetrics.Android字符串进阶之三:字体属性及测量(FontMetrics). Andro ...
关于div宽度和高度的100%设定的问题
设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明白这个100%的宽度(高度)到底有多宽有多高?这个100%是从哪里得到的从哪里继承 ...
html盒子宽高,css盒子模型之宽度和高度
盒子模型的宽度width高度height;宽度和高度的单位px像素,使用%动态计算(自适应和响应式) HTML代码 *lt;div class="pag1">*lt;/div ...
获取当前页面的宽度和高度
jQuery:获取当前打开页面的宽度和高度: var windowheight = $(window).height() - 20; var windowwidth = $(window).width ...
java读取服务器图片大小,SpringMVC中MultipartFile上传获取图片的宽度和高度详解
SpringMVC一般使用MultipartFile来做文件的上传,通过MultipartFile的getContentType()方法判定文件的类型(MIME) ".doc":& ...
1501 二叉树最大宽度和高度
题目链接:http://codevs.cn/problem/1501/ 题目描述 Description 给出一个二叉树,输出它的最大宽度和高度. 输入描述 Input Description 第一行 ...
CSS------当内容超出div宽度后自动换行和限制文字不超出div宽度和高度
原文:CSS------当内容超出div宽度后自动换行和限制文字不超出div宽度和高度如图: 1.自动换行 <div style="widht:100%;height:100%;wo ...
php获取图高度,PHP imagesx()、imagesy() – 获取图像宽度与高度_程序员人生
PHP 获取图像宽度与高度 PHP 获取图像宽度函数:imagesx() imagesx() 函数用于获取图像的宽度,单位为像素,返回值为整型. 语法: int imagesx( resource i ...

换算rem的宽度和高度不生效 chrome字体最小为12px

换算rem的宽度和高度不生效 chrome字体最小为12px相关推荐

最新文章

热门文章