@media组件大小自适应


<RightDrawer :style-config = "styleConfig"></RightDrawer>
styleConfig:{
        position       : "absolute",
        width          : "15%",
        color : "black",
        backgroundColor: "white",
        top            : "7.8%",
        bottom         : "0%",
        left         : "0%",
        zIndex:"10",

      },

此代码在别的电脑会走样，想给它加一个@media 变成自适应的。应该怎么加？加在此页面的script里可以吗

可以了解matchMedia(),用法几乎与CSS媒体查询相同,将媒体查询字符串传递给matchMedia(）

const mediaQuery = window.matchMedia('(min-width: 768px)')

定义的媒体查询将返回一个MediaQueryList对象，可以通过返回对象的matches属性来判断是否匹配。


if (mediaQuery.matches) {
  console.log('matchMedia')
}