css之学好rem

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

1、先说说几个前端常用的几个单位的概论

1、px (pixel像素)是一个虚拟长度单位是计算机系统的数字化图像长度单位如果px要换算成物理长度需要指定精度DPI(Dots Per Inch每英寸像素数)在扫描打印时一般都有DPI可选。Windows系统默认是96dpiApple系统默认是72dpi。
2、em(相对长度单位相对于当前对象内文本的字体尺寸)是一个相对长度单位最初是指字母M的宽度故名em。现指的是字符宽度的倍数用法类似百分比如0.8em, 1.2em,2em等。通常1em=16px。
3、pt (point磅)是一个物理长度单位指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)
4、remroot em根em是CSS3新增的一个相对单位这个单位引起了广泛关注。这个单位与em有什么区别呢区别在于使用rem为元素设定字体大小时相对大小对比的是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身通过它既可以做到只修改根元素就成比例地调整所有字体大小又可以避免字体大小逐层复合的连锁反应。目前除了IE8及更早版本外所有浏览器均已支持rem。对于不支持它的浏览器应对方法也很简单就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

2、开始进入rem教程

1.先设置header里面的meta标签

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

2.在header写上<script>标签

<script type="text/javascript"> 　　document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px'; </script>

问题为什么要设置Html的font-size

答这里是设置html标签的font-size上面概论红色字写的很清晰页面元素使用rem单位时是相对于这个html标签的font-size的大小为基础的。

问题为什么是clientWidth/640?为什么要乘以100

答

是因为这里是作为一个基础数值换个方向去想这里先不乘以100以免产生误解。

例如设计稿宽度是640px有一个元素设计稿上的宽度是50px设备物理宽度是320px,那么我们在页面上应该设置宽度为 width:50rem相当于宽度是50*320/640=25px这里能正确算出在320px的设备上刚好占一半,其实可以想象为 rem=320/640。
一般浏览器的最小字体是12px如果html的font-size=320/640px相当于font-size=0.5px那么这个数值就小于12px会造成一些计算的错误和一些奇怪的问题*100后font-size是50px就可以解决这种字体小于12px的问题。
为了计算方便我们后面把比率乘以了100320/640*100那么相对应这个元素在设置数值的时候就需要除以100了50/100,这样可以保证最后出来的数值不变.

3、设置好html的font-size,那么我们下面就可以开始编写根据设计稿的例子了。

设计稿是640px有一个红色盒子宽高都是320px里面的文字是32px那么下面是这个例子的代码。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1"> <script type="text/javascript"> document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px'; </script> </head> <body style="margin: 0 ;padding: 0;font-size: 0.32rem"> <div style="width: 3.2rem;height: 3.2rem ;background: red"> <span>danny.xie</span> </div> </body> </html>

1、在iphone5下的情况设备的物理像素是320px