东莞企业网站制作推广运营百度文库个人登录

前言：

        实现实现浏览器不同分辨率下的不同样式的方法很多，这里整理两种，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>