关于移动端或者需要灵活变动的宽度的PC端的多屏幕适配

将px值转rem从而实现多屏幕适配目前有2种方法：

1.简洁明了的font-size：13.33333vw的传说大法：

注：该方法需在index,.html搭配视口标签

content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

移动端的设计稿一般是width：750px，height：auto（这里指的是不确定），100vw = 100%，这个也没有问题吧；那么，设计稿拿过来，我们可以得出：750px = 100vw，这个也没有问题吧，那么1px等于多少vw呢？ 是不是 1px = 100 / 750 vw = 0.3333vw；那么100px = 多少vw呢，这个应该知道了吧。100px = 13.33vw；

思路过程：

mobile.width = 750px  => 750px = 100% =100vw => 750px = 100vw => 1px = 0.1333vw => 100px = 13.33vw => 1rem =100px;

即：我们把html:{font-size: 13.33vw} // 也就是以100px位基准；1rem = 100px;

现在就好算多了；移动端的尺寸 / 100  =  XXX rem；

---------------------

作者：chi1130

来源：CSDN

原文：https://blog.csdn.net/chi1130/article/details/82844489

版权声明：本文为博主原创文章，转载请附上博文链接！

2.借用工具pxtorem转换

具体链接如下：https://blog.csdn.net/qq719756146/article/details/84760953

该方法通过wepack配置项和搭配js即可完成对页面px转rem；

总结： 综上两种方法：应用中第一种方法简单明了，只是根据设计稿编程时得根据px除以100得到rem，每次每个都要这么想一下，如果说碰到算错的问题，那么你自己慢慢找吧。第二种方法：借用工具，你可以直接根据设计稿写PX值，后续工具帮你转，无任何多余操作，博主编程过程中发现要再公共的样式中给body的font-size：16px;（自行斟酌用多少px）这样可以组织工具的自带根元素的PX使得字体偏大。个人比较推荐第二种，第一种虽然懒一时，但麻烦至整个项目且对共同开发非常不友好。