rem和vw/vh 的区别

498 阅读2分钟

rem

rem把屏幕等分成的了10分,如一个屏幕宽度为375,那么用rem编写网页就是, 37.5rem.
rem适合于移动端适配,图片大小,文字大小等与屏幕宽度进行适配。页面以及页面内容随屏幕宽度变化而变化

rem配合媒体查询设配宽度,可以起到一个很好的布局作业,不过要每个屏幕都要查询一次,我们可以引用一个flexible.js的文件,这个文件可以帮助我们自动查询每个设备的宽度,非常方便,只需要设置一个@media就可以了

而rem和em的区别在:1rem的大小是通过html下的font-size这个css属性告诉浏览器的所以在设置rem比例是在html上设置,
而em是可以为自己元素内的font-size属性值的大小,em主要做首行缩进使用.

vw/vh

vw/vh就是视口的宽/视口的高

vw

vw也是一个单位,并且也是一个相对单位
vw把屏幕的宽等分成100分,如一个屏幕宽度为375,那么用vw编写网页就是, 3.75vw.
vw不需要引用js文件,自己就会帮我们查询屏幕的适配非常方便

vh

vh也是一个单位,并且也是一个相对单位
vh把屏幕的高等分成100分,如一个屏幕高度为375,那么用vw编写网页就是, 3.75vw.
vw不需要引用js文件,自己就会帮我们查询屏幕的适配非常方便

总结

rem和vw/vh都是做移动端适配用的,方法. 现在用rem做网页的公司是比较多的,vw/vh是一种新趋势,方便快捷,推荐使用