css里面px和%的问题

html-css015

css里面px和%的问题,第1张

css里面px和%的问题，即单位转换问题，前端页面排版，做自适应常常会遇到，这里以640px的手机端常用宽度为例，一般手机端建议宽度用百分比，高度用rem单位，web端建议用px和em：

1.如果一个导航有横向5个图标，那么640px的宽度，每个容器平均下来则为128px，转换成百分比则为25%(640px则为100%)，百分比方便计算，自适应。

.nav{width:20%}或.nav{width:128px}

2.如果是320px的五个图标，则20%的宽度需要设置为64px。

.nav{width:20%}或.nav{width:64px}

rem一般用于设置字体的大小，1rem就是html根元素的字体大小，2rem就是html字体大小的2倍，1.5rem是html字体的1.5倍，0.75rem则是html字体大小的四分之三，依此类推。

因此，rem是一个相对长度单位，当改变html根元素的字体大小时，所有以rem为单位的字体大小也会跟着放大或缩小。

当然，它也可以用在其它地方，不一定是字体大小。比如要把某个元素的宽度设为5个字符的宽度，则 {width:5rem}