前端pc版的简单适配

 

我们都知道对于前端pc版本的适配是一个难题，大部分都是做的媒体查询。但是有时间公司不要媒体查询 就是需要不管多大的屏幕都是满屏显示。我就在考虑为啥不用rem给pc端做个适配。

我是基于设计图是1920的做的简单的js适配。

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<script type="text/javascript">   var winWidth = document.documentElement.offsetWidth ||   document.body.offsetWidth   winWidth = winWidth < 1366 ? 1366 : winWidth   var oHtml = document.getElementsByTagName('html')[0]   oHtml.style.fontSize = 100 * winWidth / 1920 + 'px'     window.addEventListener('resize', function () {     var winWidth = document.documentElement.offsetWidth || document.body.offsetWidth     winWidth = winWidth < 1400 ? 1400 : winWidth     var oHtml = document.getElementsByTagName('html')[0]     oHtml.style.fontSize = 100 * winWidth / 1920 + 'px'   }) </script>

　　把这个js脚本放到根目录下，也就是index.html中。我们所测的尺寸去除以100就可以转化位rem。

顺便说一句，我的项目是vue所搭建的。当然现在是vue-cli3的话，就放在public文件下的index文件中。

这样就完成了简单的pc端适配

标签：Vue,winWidth,pc,适配,PC,var,document,offsetWidth
来源： https://www.cnblogs.com/MrSlow/p/15241198.html