css里面px和%的问题

html-css023

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}

这位网友你好,这个问题需要具体看你项目要求了。有写元素例如小图片,如果你认为它没有必要变大,那就可以用px写死就可以了,如果是导航,需要根据屏幕大小自动变宽,这时候就需要用百分比了。还有一些比如按钮这样的元素,可以用px写死,当然也可以用百分比按屏幕大小缩放。具体还要看项目的要求和不同屏幕大小下的效果。