完美解决前端自适应问题

前段时间做了一个大数据前端页面显示的项目，使用了如下的简单的方式来解决页面自适应的问题，码友们如果有更好的方法欢迎留言。

采用的方案核心的3个步骤

采用bootstrap的的网格系统来进行页面布局划分。要实现自己想要的页面效果就需要结合百分比和div嵌套来实现，这都是基础哈。

整个页面的宽度width和高度height都采用百分比的形式来设计，从一开始的html标签开始到body里面的内容层层递进都设置上百分比。
注意：当你发现对某个元素设置的百分比没有起作用时，这是因为百分比的大小是相对其父级元素宽高的大小，如最外层元素设置的百分比是对应屏幕而言的。

字体如何去做自适应我采用的是使用Css3的@media 查询，通过@media可以针对不同的屏幕尺寸设置不同的样式，我们这里对字体的样式进行修改，于是我在style标签中写了类似如下的一串代码，来改变body的字体大小,你也可以把它写成css文件然后引入到网页中。

  @media screen and (max-width: 1920px) {
   body { font-size: 16px;}
   }
    @media screen and (max-width: 1200px) {
   body { font-size: 14px;}
   }
    @media screen and (max-width: 1000px) {
   body { font-size: 12px;}
   }
    @media screen and (max-width: 800px) {
   body { font-size: 8px;}
   }
    @media screen and (max-width: 700px) {
   body { font-size: 7px;}
   }
    @media screen and (max-width: 600px) {
   body { font-size: 6px;}
   }

这个时候你会发现我们只是在不同尺寸大小的屏幕下修改标签的字体大小，其他地方的字体我们没有去设置，这里我找到一种比较好的方法，使得我们只需修改里面的字体大小,就可以实现整个网页字体大小的自适应，方法就是使用css 的em单位来对页面中所有的字体大小进行统一设置，em相对长度单位。相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 在标签中设置font-size后em就会以他作为标准，如font-size:16px;那么1em=16px，这时我们整个网页中其他的font-size就可以换算成多少em值 如font-size:1em;、font-size:0.75em、font-size:2em等等。通过@media和em我们实现了字体的自适应。
注意：字体的大小px,尽量使用偶数，当然奇数也可以，最好不要使用小数，因为可能会导致字体渲染不均匀

接下来的是适应手机和pc端的代码

import store from '@/store'

function reset () {
  let deviceWidth = document.documentElement.clientWidth
  store.commit('checkPlatWi', deviceWidth)
  let isMobile = false
  let fontSize = '10px'
  let fontSizeNum = 0
  if (deviceWidth > 768) {
    isMobile = false
    fontSize = deviceWidth / 19.2 + 'px'
    fontSizeNum = deviceWidth / 19.2
  } else {
    isMobile = true
    fontSize = deviceWidth / 7.5 + 'px'
    fontSizeNum = deviceWidth / 7.5
  }
  console.log(deviceWidth)
  let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
  // eslint-disable-next-line no-unused-expressions
  flag ? document.documentElement.style.fontSize = fontSize : document.documentElement.style.fontSize = (fontSizeNum <= 82.4479 ? '82.4479px' : fontSizeNum + 'px')
  if (isMobile) {
    document.getElementsByTagName('body')[0].className = 'isMobile'
    document.getElementsByTagName('body')[0].setAttribute('id', 'isMobile')
    store.commit('checkPlat', true)
  } else {
    document.getElementsByTagName('body')[0].className = 'notMobile'
    document.getElementsByTagName('body')[0].setAttribute('id', 'notMobile')
    store.commit('checkPlat', false)
  }
}
reset()
window.addEventListener('resize', () => {
  reset()
})