本文探讨了在前端开发中，如何利用rem单位实现页面在不同屏幕宽度下的等比例展示。通过对比px、pt、em和百分比等单位，强调了rem的优势。介绍了一种基于设计图的rem适配方法，通过计算屏幕宽度与设计图宽度的比例来动态设置根节点字体大小，从而确保元素在不同设备上的比例一致。
首先，我们需要对比一下各种在前端用到的单位。比如px,rem,em,pt,百分比.
1.用于做适配多种移动端的情况下，首先可以排除px和pt.因为px和pt都是一个固定大小的单位。也就是说，如果用px或者pt写移动端页面，我们为了迁就最小屏幕的手机，会将某个按钮的长和高设置的比较小，而这个页面放到大屏手机上看，因其尺寸太小，看着显然不合适。也会违背设计搞的比例。反之同理。
2.用百分比在某些情况下是不适用的。比如，我给一个按钮的宽和高都用百分比设置。如果要用line-height让其内容的字体居中。我们没法给出用了百分比设置高度的内容一个合适的line-height值。亲测，用百分比设置line-height和想要的结果会不一样。另外，考虑到很多页面的高度是不确定的（比如列表页），高度上相对于父容器的百分比是不合适的。
3.em是相对于父元素的字体大小来计算的。如果父元素的字体大小为16px,那么1rem是16px,不过如果这个父元素(暂且叫作元素father)的子元素（son）也设置了字体大小的话，那么孙子元素(grandson)的字体大小又是相对于子元素（元素son）的。当然，用em是可以实现适配多种移动端的。只要在不同屏幕宽度下动态设置根元素<html></html>的字体大小（设置方式和rem的相同，下文会提及）。那么全篇用em来设置的大小都是相对根节点的字体大小。所以也可以在不同屏幕宽度下有不同大小。不过有个缺点就是，在页面结构复杂的情况下，有很多嵌套元素都有设置过字体大小，那么请自备计算器。因为计算长度用到的父元素的字体大小太多。比如father元素为16px,son元素的font-size如果是2rem,则font-size是2*16=32px.元素grandson的font-size如果为2rem,则为32*
最低0.47元/天 解锁文章
5484
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
