nuxt_site/assets/css/ProductList/media.scss
2024-05-02 21:28:18 +08:00

180 lines
2.5 KiB
SCSS

//media.scss
/*1440px*/
/*大于*/
@media screen and (min-width: 1440px) {
}
/*小于*/
@media screen and (min-width: 1440px) {
}
/*1200px*/
/*大于*/
@media screen and (min-width: 1200px) {
}
@media (min-width: 993px) and (max-width: 1200px) {
.bannercontent {
position: relative;
overflow: hidden;
width: 100%;
height: 280px;
}
.bannercontent img {
width: 100%;
height: 100%;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.product,
.news {
padding: 40px 0;
}
.product_left,
.news_left {
margin-bottom: 30px;
}
.fanye {
margin: 0 auto;
}
}
/*小于*/
@media screen and (max-width: 1200px) {
.bcard, .brand, .move {
background-size: auto 100%;
}
}
@media (min-width: 768px) and (max-width: 992px) {
.bannercontent {
position: relative;
overflow: hidden;
width: 100%;
height: 280px;
}
.bannercontent img {
width: 100%;
height: 100%;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.product,
.news {
padding: 40px 0;
}
.product_left,
.news_left {
margin-bottom: 30px;
}
.fanye {
margin: 0 auto;
}
.product_row_more,
.newsboxtxt_bottom {
padding-top: 15px;
margin-top: 15px;
}
}
/*880px*/
/*大于*/
@media screen and (min-width: 880px) {
}
/*小于*/
@media screen and (max-width: 880px) {
.img-box{
width: 60vw!important;
}
}
@media (max-width: 767px){
.bannercontent {
position: relative;
overflow: hidden;
width: 100%;
height: 280px;
}
.bannercontent img {
width: 100%;
height: 100%;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.product,
.news {
padding: 40px 0;
}
.product_left,
.news_left {
margin-bottom: 30px;
}
.fanye {
margin: 0 auto;
}
.product_row_txt,
.newsboxtxt {
padding: 15px;
}
.product_row_more,
.newsboxtxt_bottom {
padding-top: 15px;
margin-top: 15px;
}
}
/*480px*/
/*大于*/
@media screen and (min-width: 480px) {
}
/*小于*/
@media screen and (max-width: 480px) {
.right-box{
// height: 40px!important;
// width: 40px!important;
// img{
// height: 30px!important;
// width: 30px!important;
// }
// }
// .left-box{
// height: 40px!important;
// width: 40px!important;
// img{
// height: 30px!important;
// width: 30px!important;
// }
}
}