ios - Ipad 与台式机

Question

我正在制作一个响应式网站 sandbox.mercomcorp.com。我的问题是用于 ipad 的 css 正在更改 myt 桌面 css 为什么会这样？ ipad 是我桌面上的另一个媒体查询？附件是我的 CSS。

#phone   {font-size:18px; }
p.serviceheader {font-size:18px; color:#464646;}
#servicetext {margin-top:-227px; margin-left:15px; color:#ffffff;}
#servicelink {margin-top:-4px; margin-left:15px}
#securitylink {margin-top:20px; margin-left:2px}
#networkinfrastructurelink {margin-top:-20px; margin-left:-2px}
#itlink {margin-top:-20px; margin-left:8px}
#datalink {margin-top:46px; margin-left:8px; color:#ffffff;}
#personnellink {margin-top:6px; margin-left:15px}
#hometext {font-size:31px; text-align:right; line-height:1.5; font-weight:bold; margin-top:-25px;}
#abouthome {margin-left:20px; float:left;}
#contacthome {font-size:23px; color:#464646; font-weight:bold;}
#prefooter {color:#464646; font-size:23px;}
#careershome {color:#464646; font-size:18px; margin-top:-5px;}
#jointeam {color:#464646; font-size:23px; margin-top:35px;}
#benefits {color:#464646; font-size:23px; margin-top:7px;}
#joinus {color:#464646; font-size:23px; margin-top:38px; }
#employees {color:#464646; font-size:18px; margin-top:10px; line-height:20px;}
p.corporateoffice {font-size:20px; color:#464646;}
p.officetext {color:#464646;}
#footer-links {font-size:12px;}
#chamberlogo {margin-top:10px; margin-left:28px;}
#sbalogo {margin-left:3px;margin-top:30px;}
#bicsilogo {margin-left:53px;}
#alliance {margin-left:15px;}
#mbchamber {margin-left:3px;}
#pmilogo {margin-left:55px;}
.prefooterlink a {color:#464646;}
#afcealogo {margin-bottom:-9px; margin-left:30px;}
#bbb {margin-left:17px;}
#infocommlogo {margin-left:40px;}
h1.relatedpgs {font-size:24px; color:#990812; margin-left:-8px;}
h1.pheader {font-size:26px;}
.customheader {margin-top:-60px;}
.bodycontentalign {margin-left:11px;}
.navalign {margin-top:-15px; margin-left:11px;}
.topphone {margin-top:-15px; margin-left:115px;}
.socialicons {margin-top:-32px; margin-left:60px;}
.footercontactinfo {background:url('/wp-content/uploads/2012/05/ragedge-right.gif') repeat-y scroll right top #ECECEC;
  color: #5a5858;
  float: left;
  min-height:260px;
  width: 260px;
}
.footerlogos {background:url('/wp-content/uploads/2012/05/ragedge-left.gif') repeat-y scroll left top #ECECEC;
  color: #5A5858;
  float: left;
  min-height:260px;
  width: 680px;
  margin-left:-95px;
}
.innerpagenav {background-color:#ececec;}
#block-69 {margin-top:-15px;}
#block-72 {margin-top:-74px; margin-left:-1px;}
#block-73 {margin-top:-70px; margin-left:-19px; background-color:#000000; color:#ffffff;}
#block-372 {margin-top:-55px;}
#block-370 {margin-top:-45px;}
#block-25 {margin-top:25px;}
#datacentertext {margin-top:-245px; margin-left:10px; color:white;}
#itintegrationtext {margin-top:-245px; margin-left:10px; color:white;}
#securitytext {margin-top:-245px; margin-left:10px; color:#ffffff;}
#networkinfrastructuretext {margin-top:-245px; margin-left:10px; color:#ffffff;}
#vtctext {margin-top:-245px; margin-left:5px; color:#ffffff;}


/*regular site css*/

.container
{

        /*text-align:left;
        display:inline-block;
        width:100%;
        height:auto;
      overflow: hidden; */

   background-color:white;
    display:inline-block;
    height:100%;
    width: 100%;  
    /*border: solid 1px #aaa;*/  
    text-align: left;  
    font-size: 1em;
    /*letter-spacing:px;  */
    /*white-space: nowrap;  */
     /*line-height: 12px;  */


}


.square
{
    /*margin:auto;
    width:20%;
    text-align:left;
    display:inline-block; 
    float:left;*/

    width:19.5%; 
   margin:auto;
   /* border: solid 1px #ccc; */
    display: inline-block;  
   vertical-align:middle;
}

.words
{
 background-color:#990913; color:white;
  /*display:inline-block;*/
  width:12.85em;height:15em;


}


#block-72 li.widget
{
  margin-bottom:2%;
}
.title
 {
   /*display:inline-block;*/
  font-size:18px;
  padding-bottom:5px;
  /*color:#444444;*/
}


  #block-73 li.widget
  {
    margin-top:5%;

  }

  #block-66/*phone numbers*/ 
  {
    /*background-color:purple;*/
    position:relative;
    top:-10px;
    margin-left:105px;

  }
  #block-67
  {
    padding-top:5%;
  }

  #block-52
  {
    padding-top:15px;
  }
  a.linktext
{
  color:#464646 !important; font-size:20px; text-decoration:underlined;
}
a.linktext1
{
  color:#464646 !important; font-size:20px; text-decoration:underlined;
}
a.linktext2
{
  color:#464646 !important; font-size:20px; text-decoration:underlined;
}

.fb-hide
{
  position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
}
.corporateoffice
{
  color:#464646;
  font-size:20px;
}
.officetext
{
   color:#464646;
}
@media screen and (min-width: 770px)
  {

  .hide
  {
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
  }
   a.linktext1
{
  position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
}

}

/*@media screen and (min-width: 768px)and (orientation:portrait)
{
  .container
        {
          height:100%;
          width:100%;
          text-align:center;
          background-color:white;
            display:inline-block;

        }
      .square
      {
         margin:auto;
          width:15em!important;
          text-align:center;
          display:inline-block;

        }
    .words
      {

        width:100%;
      }
      a.linktext
      {
        color:#464646 !important; font-size:17px; text-decoration:underlined;
      }
        a.linktext1
        {
         color:#464646 !important; font-size:17px; text-decoration:underlined; 
        }
        a.linktext2
       {
          position: absolute !important;
         top: -9999px !important;
         left: -9999px !important;

  }
   .centerlink
  {
    text-align: center;
  }  
  #block-65
  {
    margin:-65 0 0 0 ;
    position:absolute;
    left:75px;

  }
  #block-66
  {
    background:blue;
    position:absolute;
    top:484px;

  }
}
*/
@media only screen and (max-width: 500px)and (orientation:landscape)/*iphone 4*/{ 
     .container
        {

          width:100%;
          text-align:center;
          background-color:white;


        }
      .square
      {

         margin:auto;
          width:15em !important;
          text-align:left;

        }
      .fb
    {

      position:relative;
      /*top:-80px!important;*/
      /*right:20px;*/
      background:white;
      z-index:3;
    }
  .words
  {
    width:100%;
    height:203px!important;
    text-align:center;
  }


  /*.topfooter
{

    color:blue!important;
}*/

.botfooter
{    

    float:right;
        position:absolute;
    top:20px;
    right:-225px!important;

}
  .officetext
  {
    font-size:12px!important;
  }
  .coporateoffice
  {
    font-size:14px!important;
  }
   #employees
  {
    width:100%;

    margin:0 ;
    padding: 0;
  }
  .contact1{
    position:absolute;
    top:2050px!important;
    margin-top:0px;
    /*margin-top:100px!important;*/
  }
}

@media screen and (max-width: 680px) and (orientation:landscape)/*landscape small phone*/

  {

        #wrapper-4,#wrapper-5,#wrapper-9,#wrapper-10,#wrapper-11,#wrapper-12,#wrapper-13,#wrapper-14,#wrapper-15,#wrapper-16,#wrapper-17/*stops from scrolling horizontal*/
     {
           width:auto;
          overflow: hidden;
          maxwidth:auto;
          padding :0.5em;
     }

    .hide img /*logo*/
      {

        width:68%;
        height: 185px;
         /*display: block;*/
        margin: auto !important;
      }

         .container
        { 
         /* height:100%;*/
          width:100%;
          text-align:center;
          background-color:white;
            /*display:inline-block;*/

        }
      .square
      {

         margin:auto;
          width:20em;
          text-align:left;

         /* display:inline-block;*/

        }

         .words
          {
             width:100%; 
             font-size:16px;
              height:145px;
            text-align:center;
          }


    #block-72 li.widget
        {
          margin-bottom:2%;
        }
    .title
       {
         /*display:inline-block;*/
        font-size:18px;
        padding-bottom:5px;
        /*color:#444444;*/
      }


    #block-73 li.widget
      {
        margin-top:5%;

      }

    #block-66 
      {

        width:100%
        display:inline;
        font-weight:bold;
        posititon:absolute;
        left:-25px;
        top:5px;
        letter-spacing:2px;
        white-space:nowrap;
        font:OpenSans-Semibold;

      }
  .phonenav
  {
    font-size:20px!important;
    line-height:200%;
  }
   .insideimg
  {
  /*  align:center;*/
  /* position:absolute;*/
    /*top:300px;*/
    height:auto;
    width:300px;
    float:right;

  }

  /*.officetext
  {
    position:absolute;
    top:500%;
    width:100%;
    font-size:20px;
    white-space:nowrap;
    color:red;
  }*/
  a.linktext2
  {
    position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
  }
  .centerlink {
    text-align: center;
  }

  #block-38
  {
    margin:0;
    position:absolute;
    top:1625px;
    width:100%;

  }
  .corporateoffice
  {
    font-color:black!important;
    font-size:20px!important;
    white-space:nowrap !important;
  }
  .officetext
  {
    font-size:18px!important;
  }


 /* .fb
  { 

   position:absolute;
    left:2px;
    text-align:right;
    background:white;
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
  }*/
.fb-hide
{
     position:absolute;
    left:2px;
    text-align:right;
    background:white;

  /* background-color:white;
    padding:right:40px;
    position:absolute
    z-index:-1;
    */
}
  #block-67
  { 
    display:inline-block;
    background-color:white!important;
    position:relative;
    left:235px;
    top:20px;
    z-index:2;  

  }
  /*.fb
  {
    background:white;
  }
 */

   a.linktext
{
  color:#464646 !important; font-size:20px; text-decoration:underlined;
}
a.linktext1
{
  color:#464646 !important; font-size:20px; text-decoration:underlined;
}
  .block-type-hwr-contact #hwr-contact-27 .hwr-form-title {
      line-height:90%;
}
   .topfooter
  {
      margin:0 0 0 0 ;
     position:absolute;
      top:80px!important;
    background:transparent


  }
  .botfooter
{    
    margin:0 0 0 0;
    float:right;
    position:absolute;
    top:1px;
    right:-330px;
    background:transparent;

}

 .contact {
    position:absolute;
    top:640px;

    margin-top:100px!important;

  }



}
@media only screen (device-height : 568px) and (device-width : 320px)and (-webkit-min-device pixel-ratio: 2)and (orientation : landscape)/*iphone 5*/
  {

       .container
        {
         /* height:100%;*/
          width:100%;
          text-align:center;
          background-color:white;
            /*display:inline-block;*/

        }
      .square
      {
         margin:auto;
          width:15em;
          text-align:left;

         /* display:inline-block;*/

        }
          .botfooter
        {    

            float:right;
                position:absolute;
            top:2px;
            right:20px;

        }
  }
@media screen and (min-width: 320px) and (max-width: 480px)/*small devices*/


{

  .hide/*logo*/
  {
    margin-top:10%;
   margin-bottom:2px;
   display:block;
  }
 a.linktext2
  {
    position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
  }
  .container{
        width:100%;
        text-align:left;
        height:auto;  
     background-color:white;
    }
  .square{
     margin:auto;
    width:100%;
    text-align:left;
    display:inline-block;
     background-color:white;

  }


.words
{
    color:white;
    font-size:18px;
    text-align:center;
    background-color:#990913;
    width:100%;
    height:150px;

}
.title
 {
    width:100%;
  }

  #block-73 li.widget
  {
    margin-top:30%;

  }

#block-66
 {

     position: relative;
    top: 55px;
    padding-left:60%;
    font-weight:bold !important;
    z-index:2;
    line-height:4px;
}
  .phonenum
  { 
    background-color:white;
    /*padding:right:40px;*/
    position:absolute;
    top:-3px;
    z-index:-1;

  }
  .insideimg
  {
  /*  align:center;*/
  /* position:absolute;*/
    /*top:300px;*/
    height:120px;
    width:140px;
    float:right;
   }
   .centerlink {
    text-align: center;
  }
  .footer 
  {
    color:black!important;
    font-size:20px;
  }

   .fb
  {
    background:white;
  }
  .fb-hide
  {
    position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
  }
  .insideimg
  {
  /*  align:center;*/
  /* position:absolute;*/
    /*top:300px;*/
    height:auto;

    float:right;

  }
}

Answer 1

这可能是您的媒体查询中“and”一词周围缺少空格。根据 W3C，它是格式错误的代码:http://www.w3.org/TR/css3-mediaqueries/#error-handling

因此:

@media only screen and (max-width: 500px)and (orientation:landscape)/*iphone 4*/{

应该是

@media only screen and (max-width: 500px) and (orientation:landscape)/*iphone 4*/{