vue实现浏览器不同分辨率下的不同样式，css的媒体查询与js判断当前浏览器宽度

前言：

        实现实现浏览器不同分辨率下的不同样式的方法很多，这里整理两种，1个是css的媒体查询来实现，另一个是js判断当前浏览器的宽度，然后动态给他添加不同的class名，或者动态用style修改样式，添加不同class名的话展示能更灵活。

1、css的媒体查询

• @media screen and (max-width: 500px) { ... }：表示当屏幕宽度小于 500px 时，应用 CSS 规则。
• @media screen and (min-width: 500px) { ... }：表示当屏幕宽度大于或等于 500px 时，应用 CSS 规则。
• @media screen and (orientation: landscape) { ... }：表示当屏幕方向为横向时，应用 CSS 规则。
• @media screen and (orientation: portrait) { ... }：表示当屏幕方向为纵向时，应用 CSS 规则。

@media screen and (max-width: 1399px) {
    // 小于等于1399宽度的情况下
}
@media screen and (min-width: 1400px) and (max-width: 1700px) {
     // 大于等于1400宽度 && 小于等于1700宽度   的情况下
}
@media screen and (min-width: 1701px) and (max-width: 1920px) {
     // 大于等于1701宽度 && 小于等于1920宽度   的情况下
}复制

2、js判断当前浏览器的宽度

this.winWidth = window.innerWidth || document.documentElement.clientWidth复制

vue动态绑定class

<li
    :class="[
               {'active':active === i},{'maxTextStyle':winWidth<1920 && item.name.length>7}
           ]"
    v-for="(item,i) in tabList"
    :key="'tabList-'+i"
    @click="active = i"
 >
    ...
</li>复制