媒体查询Media区分移动端和pc端

说一下我用媒体查询得两个实际场景

1.之前做活动,那时候手机机型还不多,做活动根据主流的机型宽度去写css,当然这个在现在来说不是很好
2. 对于简单的官网,并且移动端和pc端的基本骨架是相同的,尤其是第一个版本只有pc端.
后续加入简单的移动端(可用少量display:none进行隐藏),如果稍微有点复杂，尤其涉及多语言等,最好早点改用主流的框架

这次主要说官网

1.media标签进行区分

<link rel="stylesheet" href="css/index.css?t=1.0.4" type="text/css" media='screen 
and (min-width: 480px)' /> 
<link rel="stylesheet" href="css/mobIndex.css?t=1.0.4" type="text/css" media='screen 
and (max-width: 479px)' /> 

2.对移动端进行适配,pc端不用管

html{
  font-size:calc(100vw/750*100)
}

上面的750是UI设计稿的宽度,如果你们是375px你就写375px嘛

使用的时候,就是量出来多少，rem左边移动2位

.logo {
  display: block;
  width: 1.12rem;
  height: 0.33rem;
  margin-left: 0.60rem;
}

3.如果是使用postcss-px-to-viewport做移动端适配,pc端怎么办?

postcss-px-to-viewport 因为postcss-px-to-viewport目前并没有将他做的pc端适配合并到这个包里面，相当于没实现,所以移动端正常px实现,pc端直接用大PX,这样能够避免转化. 也就是说pc端不进行适配处理,但是因为postcss-px-to-viewport是作用到整个项目里面,我们用PX避免不合适的转化

4.pc端移动端都适配

import { isMobileFunc } from '@/utils'
mounted() {
    this.setFontBase()
  },
  methods: {
    // 设置窗口监听，进行根元素font-size的修改
    setFontBase() {
      const designWidth = isMobileFunc() ? 750 : 1920
      {
        ((win, doc) => {
          if (!win.addEventListener) return
          const html = doc.documentElement
          const setFont = () => {
            html.style.fontSize = `${this.fontBase * (html.clientWidth / designWidth)}px`
          }
          win.addEventListener('resize', setFont, false)
          setFont()
        })(window, document)
      }
    },
  },

export const isMobileFunc = function () {
  const userAgentInfo = navigator.userAgent
  let mobileAgents = [
    'Android',
    'iPhone',
    'SymbianOS',
    'Windows Phone',
    'iPad',
    'iPod',
  ]
  return mobileAgents.some(i => userAgentInfo.includes(i))
}

有更好的方法欢迎提出哦~