每个设备的所有响应断点？

Question

在mac或大屏幕的这个断点中混淆 我试过这个，但在一些断点滑块将是不可见的，然后它再次可见 在mac或大屏幕的这个断点中混淆 我试过这个但是在一些断点中滑块将是不可见的，之后再次可见

/*Large Desktop for mac*/
@media(min-width: 1600px) and (max-width:2000px){
.bx-wrapper .bx-viewport{
    height:325px !important;
}

.bx-wrapper .bx-viewport ul.slider-home li{
    height: 325px !important;
}

.bx-wrapper .bx-viewport .slider-image{
    height: 100% !important;
    background-size: cover;
    background-position: center center;
}
}

/*Large Desktop*/
@media(max-width:1024px){

.entry-content .wrapper:after, .entry-content .wrapper:before{
    display: none;
}

.bx-wrapper .bx-viewport{
    height:489px !important;
}

.bx-wrapper .bx-viewport ul.slider-home li{
    height: 489px !important;
}

.bx-wrapper .bx-viewport .slider-image{
    background-size: 100%;
}

}


/*Potrait tablet to Landscape and Desktop*/
@media(min-width:768px ) and (max-width: 980px){

.wrapper{
    width: 750px;
}

.site-branding {
    width: 260px;
}

.site-branding img{
    width: 100%;
}

.site-header .main-navigation ul li a {
    padding: 16px 14px 17px;
    font-size: 16px;
}

.site-header .main-navigation ul li:first-child a::before{
    left: -54px;
    width: 66px;
}

.topic-heading .part2 .reflected{
    font-size: 45px;
}

.topic-heading .part2 .reflected:before, 
.topic-heading .part2 .reflected:after{
    bottom: -32px;
}

.topic-heading .part1 .blue{
    font-size: 36px;
    width: 485px;
}

.services-content .services{
    width: 230px;
}

.services-content .services img{
    display: block;
    margin: 0 auto 5px;
}

.services-content .services .post-title {
    padding-left: 3px;
}

.site-footer .info-side{
    width: 460px;
}

.site-footer .find-us .pts{
    margin-left: 0;
}

.site-footer .find-us .find-us-BB, .site-footer .find-us .find-us-fb{
    margin-left: 15px;
}

.site-footer .menu-main-menu-container ul li{
    padding-right: 15px;
}

.site-footer .menu-main-menu-container ul li:last-child{
    padding-right: 0;
}



/*-------About Us----------*/
.entry-content .wrapper .primary{
    width: 365px;
}

.entry-content .wrapper .widget-area{
    width: 335px;
}

.entry-content .wrapper .widget-area img{
    width: 100%;
}

/*--------------clients-------------*/
.entry-content .wrapper .left, .entry-content .wrapper .right{
    width: 47%;
}

/*-------------- Videos-------------------*/

.videos-content .services{
    width: 366px;
}

.videos-content .services > iframe.youtube-player{
    width: 100%;
    height: 295px;
}


/*--------Contact Us----------------*/
.entry-content .wrapper .wpcf7-form input[type="text"], 
.entry-content .wrapper .wpcf7-form input[type="email"], 
.entry-content .wrapper .wpcf7-form input[type="tel"], 
.entry-content .wrapper .wpcf7-form textarea{
    width: 100%;
}

.bx-wrapper .bx-viewport{
    height:366px !important;
}

.bx-wrapper .bx-viewport ul.slider-home li{
    height: 366px !important;
}


}


/*Landscape Phones to Potrait tablet*/
@media(max-width: 767px){

.wrapper{
    width:96%;
    padding: 0 2%;
}

.site-header .main-navigation{
    display: none;
}

.slicknav_menu {
    display: block;
}

.site-header .site-branding {
    width: 100%;
    float: none;
    margin-bottom: 10px;
    margin: 0 auto;
    text-align: center;
}

.site-header .call-us {
    float: none;
    width: 100%;
    text-align: center;
    margin-bottom: 23px;
}

.topic-heading .part1 .blue{
    width: 520px;
}


.topic-heading .part2 .reflected:before, 
.topic-heading .part2 .reflected:after{
    display: none;
}

.services-content .services{
    width: 225px;
}

.site-footer .find-us {
    float: none;
    width: 100%;
    text-align: center;
}

.site-footer .find-us .pts, .site-footer .find-us .find-us-BB, 
.site-footer .find-us .find-us-fb{
    float: none;
    display: inline-block;
    vertical-align: middle;
    margin-right:32px;
}

.site-footer .find-us .pts, .site-footer .find-us .find-us-BB{
    margin-left: 0;
}
.site-footer .find-us .find-us-fb{
    margin-left: 0;
    margin-right: 0;
}

.site-footer .info-side {
    float: none;
    width: 100%;
    text-align: center;
    padding-top: 25px;
}


/*----------About Us---------*/

.entry-content .wrapper .primary{
    width: 100%;
    margin-bottom: 5%;
}

.entry-content .wrapper .widget-area{
    float: none;
    margin: 0 auto;
}
.entry-content .wrapper .widget-area img{
    width: 100%;
}


/*--------Clients--------------*/

.entry-content .wrapper .left, .entry-content .wrapper .right{
    width: 45%;
}

/*-------------- Videos-------------------*/

.videos-content .services{
    width: 359px;
}

.videos-content .services > iframe.youtube-player{
    width: 100%;
    height: 290px;
}


/*-------Contact Us-------------*/
.entry-content .wrapper .wpcf7-form input[type="text"], 
.entry-content .wrapper .wpcf7-form input[type="email"], 
.entry-content .wrapper .wpcf7-form input[type="tel"], 
.entry-content .wrapper .wpcf7-form textarea{
    width: 100%;
}

.bx-wrapper .bx-viewport{
    height:366px !important;
}

.bx-wrapper .bx-viewport ul.slider-home li{
    height: 366px !important;
}


}



/*Landscape Phones to Potrait tablet and Down*/
@media(max-width: 640px){


.services-content{
    margin-left: -19px;
}

.services-content .services {
    width: 29.3%;
    margin-left: 3%;
}

.services-content .services img {
    width: 100%;
    height: auto;
}

.entry-content .wrapper .left, .entry-content .wrapper .right{
    width: 42%;
}

.entry-content .wrapper .left .sub-title:before, 
.entry-content .wrapper .right .sub-title:before{
    width: 265px;
}

.bx-wrapper .bx-viewport{
    height:305px !important;
}

.bx-wrapper .bx-viewport ul.slider-home li{
    height: 305px !important;
}

/*-------------- Videos-------------------*/

.videos-content .services{
    width: 298px;
}

.videos-content .services > iframe.youtube-player{
    width: 100%;
    height: 240px;
}

}

@media(max-width: 580px){

.entry-content .wrapper .left .sub-title:before, 
.entry-content .wrapper .right .sub-title:before{
    width: 235px;
}

.bx-wrapper .bx-viewport{
    height:277px !important;
}

.bx-wrapper .bx-viewport ul.slider-home li{
    height: 277px !important;
}

/*-------------- Videos-------------------*/

.videos-content .services{
    width: 269px;
}

.videos-content .services > iframe.youtube-player{
    width: 100%;
    height: 217px;
}

}


/*Landscape phones and Down*/
@media(max-width: 480px){

.bx-controls-direction {
    display: none;
}

.topic-heading .part1 .blue{
    width: 88%;
    font-size: 32px;
}

.topic-heading .part2 .reflected{
    font-size: 50px;
}

.services-content .services {
    width: 44.2%;
    margin-left: 4%;
}

.site-footer .menu-main-menu-container ul li a{
    font-size: 17px;
}

.site-footer .menu-main-menu-container ul li:last-child {
    padding-right: 0;
}

.entry-content .wrapper .left .sub-title:before, 
.entry-content .wrapper .right .sub-title:before{
    width: 200px;
}

.bx-wrapper .bx-viewport{
    height:229px !important;
}

.bx-wrapper .bx-viewport ul.slider-home li{
    height: 229px !important;
}

/*-------------- Videos-------------------*/

.videos-content .services{
    width:100%;
    margin-right: 0;
}

.videos-content .services > iframe.youtube-player{
    width: 100%;
    height: 370px;
}

}



/*Landscape Phones*/
@media(max-width: 320px){


.site-header .site-branding{
    width: 95%;
}

.site-header .site-branding img{
    width: 100%;
}

.site-header .call-us{
    padding-top: 15px;
}

.site-header .call-us span.blue {
    display: block;
    padding-top: 5px;
}


.topic-heading .part1 .blue{
    font-size: 22px;
}

.topic-heading .part2 .reflected {
    font-size: 34px;
    line-height: 34px;
}

.services-content{
    margin-left: 0;
    text-align: center;
}
.services-content .services{
    width: 100%;
    margin-left: 0;
}

.services-content .services img{
    width: auto;
    height: auto;
}

.site-footer .find-us .pts, .site-footer .find-us .find-us-BB, 
.site-footer .find-us .find-us-fb{
    display: block;
    margin: 0 0 15px 0;
    padding-top: 0;

}

.site-footer .menu-main-menu-container ul li {
    display: block;
    padding: 0 0 15px 0;
}

.entry-content .wrapper .widget-area{
    width: 100%;
}

.entry-content .wrapper .primary .sub-title:before, 
.entry-content .wrapper .left .sub-title:before, 
.entry-content .wrapper .right .sub-title:before, 
.entry-content .wrapper .services-content .sub-title:before, 
.videos-content .sub-title:before{
    width: 100%;
}

.entry-content .wrapper .about-us-widget{
    padding: 25px 18px 30px;
}

.entry-content .wrapper .services-content .sub-title{
    margin-left: 0;
}

.entry-content .wrapper .left, .entry-content .wrapper .right{
    width: 100%;
    float: none;
}

.entry-content .wrapper .right{
    margin-right: 0;
    padding-top: 20%;
}

.entry-content .wrapper .whatwe-text{
    margin-bottom: 10%;
}

.bx-wrapper .bx-viewport{
    height:152px !important;
}

.bx-wrapper .bx-viewport ul.slider-home li{
    height: 152px !important;
}

.videos-content .services > iframe.youtube-player{
    width: 100%;
    height: 247px;
}


}

Answer 1

试试这个： 将“all”添加到媒体查询中。 像这样：

@media all and (max-width: ???px)

并且不要忘记将此添加到头部以获得您的响应度：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">