前端pc版的简单适配

Posted sanye00liubingjian

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端pc版的简单适配相关的知识,希望对你有一定的参考价值。

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

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

<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端适配

以上是关于前端pc版的简单适配的主要内容,如果未能解决你的问题,请参考以下文章

前端适配

云适配将推出中国首个开源 HTML5 跨屏前端框架 - Amaze UI

云适配将推出中国首个开源 HTML5 跨屏前端框架 - Amaze UI

一个简单的 PC端与移动端的适配(通过UA)

前端里移动端到底比pc端多哪些知识?

适配方案