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