Question

我有一个网站启动并运行但由于某些原因，大多数网页都没有调整到移动电话的大小。

主页，除旋转木马外，一切都很好。在其他页面上，图像和大部分文本都在任何地方。

我试图使用

@media (min-width: 200px) {
  div.test > img{ height: 300px !important ;}
}

@media (min-width: 300px) {
  div.test > img{ height: 300px !important; }
}

@media (min-width: 400px) {
  div.test > img{ height: 300px !important; }
}
@media (min-width: 600px) {
  div.test > img{ height: 400px !important ;}
}
@media, (min-width: 800px) {
  div.test > img{ height: 600px !important ; }
}

和

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

但旋转木马没有调整大小。任何建议将不胜感激

我的HTML：

     <!DOCTYPE html>
     <html lang="en">
     <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="">
     <meta name="author" content="">
     <title>Home | XLevelRetail</title>

     <!--[if lt IE 9]>
     <script src="js/html5shiv.js"></script>
     <script src="js/respond.min.js"></script>
     <![endif]-->       

     </head><!--/head-->

      <body class="homepage">






     <section id="main-slider" class="no-margin">
        <div class="carousel slide">
            <ol class="carousel-indicators">
          <li data-target="#main-slider" data-slide-to="0"  class="active"></li>
                <li data-target="#main-slider" data-slide-to="1"></li>
                <li data-target="#main-slider" data-slide-to="2"></li>
                <li data-target="#main-slider" data-slide-to="3"></li>
                <li data-target="#main-slider" data-slide-to="4"></li>

             </ol>
              <div class="carousel-inner">
           <div class="item active" style="background-image:url(images/slider/667.jpg)">
                    <div class="container">
                        <div class="row slide-margin">
                            <div class="col-sm-6">
                                <div class="carousel-content">
                                    <h1 class="animation animated-item-1">World Class Point Of Sales Solutions </h1>
                                    <h2 class="animation animated-item-2">From a single store mum and pop business to a 1,000 store chain, we provide retail management solutions that provide a perfect fit and grows as the retailer grows</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!--/.item-->

                <div class="item" style="background-image: url(images/slider/erp.jpg)">
                    <div class="container">
                        <div class="row slide-margin">
                            <div class="col-sm-6">
                                <div class="carousel-content">
                                    <h1 class="animation animated-item-1">ERP Solutions</h1>
                                    <h2 class="animation animated-item-2">The back end counts, from Accounting solutions to full ERP solutions we provide solutions to fit each organization size</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!--/.item-->

                <div class="item" style="background-image: url(images/slider/tam.jpg)">
                    <div class="container">
                        <div class="row slide-margin">
                            <div class="col-sm-6">
                                <div class="carousel-content">
                                    <h1 class="animation animated-item-1">Time & Attendance Solutions</h1>
                                    <h2 class="animation animated-item-2">Easy to use cloud based Time & Attendance solutions that integrate with all payroll services</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!--/.item-->

                <div class="item active" style="background-image: url(images/banners.jpg)">
                    <div class="container">
                        <div class="row slide-margin">
                            <div class="col-sm-6">
                                <div class="carousel-content">
                                    <h1 class="animation animated-item-1">The Future of Retail</h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!--/.item-->

                <div class="item" style="background-image: url(images/slider/ecom.jpg)">
                    <div class="container">
                        <div class="row slide-margin">
                            <div class="col-sm-6">
                                <div class="carousel-content">
                                    <h1 class="animation animated-item-1">Omni Channel Ecommerce Set Up</h1>
                                    <h2 class="animation animated-item-2">When we implement ecommerce we do not close our eyes to the backend, and we take into cognizance all points of contacts for the customer. Such channels include retail stores, online stores, mobile stores, mobile app stores, telephone sales and any other method of transacting with a customer</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!--/.item-->
            </div><!--/.carousel-inner-->
         </div><!--/.carousel-->
         <a class="prev hidden-xs" href="#main-slider" data-slide="prev">
            <i class="fa fa-chevron-left"></i>
         </a>
         <a class="next hidden-xs" href="#main-slider" data-slide="next">
            <i class="fa fa-chevron-right"></i>
         </a>
         </section><!--/#main-slider-->





my css
     <style>
        .services-wrap {
          padding: 15px 30px;
          background: #fff;
          border-radius: 4px;
          margin: 0 0 40px;
          height: 180px;
        }

        .int {
            width: 250px;
        }

        /*.int > h3 {*/
            /*font-size: 12px;*/
        /*}*/
        @media (min-width: 200px) {
            div.item > img{ height: 300px !important ;}
        }

        @media (min-width: 300px) {
            div.item > img{ height: 300px !important; }
        }

        @media (min-width: 400px) {
            div.item > img{ height: 300px !important; }
        }
        @media (min-width: 600px) {
            div.item > img{ height: 400px !important ;}
        }
        @media (min-width: 800px) {
            div.item > img{ height: 600px !important ; }
        }
      </style>
   #main-slider .carousel .item {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    left: 0 !important;
    opacity: 0;
    top: 0;
    position: absolute;
    display: block !important;
     height: 100%;

Answer 1

你有错误的媒体查询 - 错过了screen and部分，并且由于某种原因在最后一个中有逗号...你也错过了img和{{1}之间的一些空格，最有可能导致浏览器降级。

使用

代替。您可以阅读有关媒体查询here的更多信息。

网站没有调整到移动设备

1 个答案: