首页 > 移动端用em和用百分比来做自适应布局有什么不同吗?

移动端用em和用百分比来做自适应布局有什么不同吗?

移动端用em单位和用百分比来做自适应布局有什么不同吗?如果不同,哪种方式布局更好?另外,移动端的文字字号需要自适应大小么?


em是相对于基准字体大小来说的,你在body里设置了font-size: 16px,那么1em就等于16px, 2em就等于32px。百分比布局是相对于屏幕大小来说的,屏幕宽640px, 50%就是320px。我琢磨着,你要想让任何屏幕都显示一般般多的字数的话,你就全用百分比布局,好比屏幕宽640px,你设定字体大小为5%,那也就是32px大,一屏刚好能放20个字,完全不考虑margin, padding的情况下,如果用户屏宽只有320px,那相应的字体就变成了16px大,一屏还是显示20个字,但这时候每个字可能会很小,用户肉眼已经看不清了。所以需要两者结合着来用,对于图片,可以设定为屏幕的100%或者50%,这样甭管用户屏幕多大,始终显示是100%点满屏幕或者50%占一半,但是对于文字来说,设定为死的16px,如果用户屏幕大,一行显示的字数多,如果用户屏幕小,一行显示的字数少,字数多了就折行,但不会出现看不清的情况。


em是基于父元素的字体大小去计算,从而实现对移动端的响应。百分比是相对于父元素去计算,在实际使用中,百分比并不是很好用,虽然可以实现相应,但是在某些细节上会有问题,实现与百分比类似的是css3的新单位vw,vh。个人在做移动端的项目时候实现响应使用的是rem,非常方便,兼容性也比较好,具体用法可以参考利用CSS3新单位rem实现响应。

【热门文章】
【热门文章】