笑话 语录用什么网站做,新时代文明实践站模板,网站基本代码,张家港做网站优化价格前言#xff1a; 实现实现浏览器不同分辨率下的不同样式的方法很多#xff0c;这里整理两种#xff0c;1个是css的媒体查询来实现#xff0c;另一个是js判断当前浏览器的宽度#xff0c;然后动态给他添加不同的class名#xff0c;或者动态用style修改样式#xff0c;添加… 前言 实现实现浏览器不同分辨率下的不同样式的方法很多这里整理两种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:winWidth1920 item.name.length7}]v-for(item,i) in tabList:keytabList-iclickactive i...
/li
