css识别仅IE6和IE7、谷歌 、火狐、屏幕大小尺寸兼容性
头部兼容：
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
在屏幕小于1200px时，就会出现左右滚动条。
overflow: auto;
min-width: 1200px;
仅IE6和IE7识别
@media screen\9 {
.el-form-item__label {
position: relative;
}
}
仅IE8识别
@media \0screen {
.el-form-item__label {
position: relative;
}
}
仅IE6和IE7、IE8识别
@media \0screen\,screen\9 {
.el-form-item__label {
position: relative;
}
}
仅IE9和IE10识别
@media screen and (min-width:0\0) {
.el-form-item__label {
position: relative;
}
}
仅IE10识别
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.el-form-item__label {
position: relative;
}
}
仅IE8-10识别
@media screen\0 {
.el-form-item__label {
position: relative;
}
}
ie10和11的兼容性
@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none){
.hzyq-r {position: relative; }
}
仅支持谷歌
@media screen and (-webkit-min-device-pixel-ratio:0) {
.el-form-item__label {
position: relative;
}
}
仅支持火狐
@-moz-document url-prefix() {
.el-form-item__label {
position: relative;
}
}
/*屏幕大小尺寸媒体查询*/
| 设备 | 屏幕宽度 | 媒体查询 |
|---|
| 超小屏幕 | ≤ 319px | @media (max-width: 319px) |
| 手机 | 320px - 480px | @media (min-width: 320px) and (max-width: 480px) |
| 大屏手机 | 481px - 767px | @media (min-width: 481px) and (max-width: 767px) |
| 平板 | 768px - 1024px | @media (min-width: 768px) and (max-width: 1024px) |
| 小笔记本 | 1025px - 1280px | @media (min-width: 1025px) and (max-width: 1280px) |
| 普通桌面 | 1281px - 1440px | @media (min-width: 1281px) and (max-width: 1440px) |
| 大屏桌面 | 1441px - 1920px | @media (min-width: 1441px) and (max-width: 1920px) |
| 超大屏 | 1921px+ | @media (min-width: 1921px) |
/*超小屏幕*/
@media (max-width: 575px) {
.container-self{background: red;width: 100%;}
}
/*小屏幕*/
@media (min-width: 576px) and (max-width: 767px) {
.container-self{background: green;width: 540px;}
}
/*中屏幕*/
@media (min-width: 768px) and (max-width: 991px) {
.container-self{background: #000;width: 720px;}
}
/*大屏幕*/
@media (min-width: 992px) and (max-width: 1199px) {
.container-self{background: blue;width: 960px;}
}
/*超大屏幕*/
@media (min-width: 1200px){
.container-self{background: pink;width: 1140px;}
}
利用js来控制不同尺寸设备效果可以以下这样写：if (window.innerWidth >= 750) {}
<script>
if (window.innerWidth >= 750) { // 只在宽度大于或等于 750px 时执行
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 6, // Number of slides visible at the same time
slidesPerGroup: 6, // Move 6 slides at a time when navigating
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30,
freeMode: true
});
}
</script>
