怎样简便的使用vw完成移动端rem适配

px(像素)进行页面开发的基础单位

px: 绝对单位,页面按精确像素展示

em 相对单位

em: 相对单位,相对于父元素的font-size来决定大小

rem 相对单位

rem: 是相对于根元素(即html的文字大小),我们在使用时可以在根元素设置一个参考值即可,相对于em使用,减少很大运算工作量,多用于移动端的页面单位

vw 相对宽度

vw: 相对于浏览器窗口宽度,一个窗口被均分为100单位(即整个窗口宽度为100vw)

vh 相对高度

vh: 相对于浏览器窗口高度,一个窗口被均分为100单位(即整个窗口宽度为100vh)

如何进行简单的px,rem转换

在我们开发移动端项目中,因为移动端的屏幕大小不一,所以在开发过程中不能使用px这个绝对单位来进行书写,通常我们是使用rem作为单位进行书写,那么,怎么做才能达到适配的效果呢?

在开发中,有各种各样的适配方式,在这里,我就说一种纯css方式,只需要写一行代码便可做到rem的适配效果:

通过了解上面的单位后,我们知道vw是根据窗口宽度来进行变化的,所以我们不妨拿vw与rem进行结合来书写出合适的适配。
为了方便计算 我们需要1rem=100px如果我们得到的设计稿宽度是750px
那么 100vw = 750px
即 1px = 0.1333333vw
即 1rem = 13.33333vw
所以 我们只需要在样式重置文件中写上下面这段代码即可完成页面适配

html {
   font-size: 13.333333333vw;
   background-color: #fff;
}

当然,这只是一种计算方法,里面的数据是可以变化的,总结一下计算方法:

  • (100/设计稿宽度)X想要1rem等于的像素值 = 根字体为多少vw*
  • 如示例中的(100/750)X100 = 13.3333

这样做就已经完成了页面的适配。
例如:750稿子中一个图片的宽度是540px,那么我们转换之后就应该写

5.4rem

当然,在实际开发中,为了防止字体大小变过来变过去,导致页面变化,通常在之后会给body设置一个默认字体大小:

body{
   font-size:16px;
}

默认字体大小请根据开发需求自行设置

 
原文地址:https://www.cnblogs.com/planetwithpig/p/13494872.html