2

我在我的 css 文件中尝试了以下 css 媒体查询来调整 div 中 2 个图像的大小和位置。但它不能正常工作，即使我在媒体查询中给出了正确的参数。我正在创建移动网页（HTML5、CSS、JS ) 针对 Iphone blackberry、android 和 windows 设备。

我对 s3 的 css 媒体查询如下..

  @media only screen and (device-width:360px) and (device-height:640px) and (-webkit-min-device-pixel-ratio : 2) and (orientation : portrait) 
  {
 #image1{height:45%;width:42%;margin-left:2%;margin-top:2%;float:left;}

  #image2{height:55%;width:55%;margin-right:0px;margin-    top:0;float:right;position:relative;z-index:3;}
   }

我对 iphone 3 gen 的 CSS 媒体查询如下

  @media only screen and (device-width:320px) and (device-height:480px) and (-webkit-min-device-pixel-ratio : 2) and (orientation : portrait) 
  {
 #image1{height:77%;width:42%;margin-left:2%;margin-top:2%;float:left;}

  #image2{height:100%;width:55%;margin-right:0px;margin-    top:0;float:right;position:relative;z-index:3;}
   }

我在这里面临的问题是在 iphone 3 中，galaxy s3 的 css 正在加载。我也尝试将此代码用于 s3 ，

   @media only screen and (min-device-width:720px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio : 2) and (orientation : portrait) 
  {
 #image1{height:45%;width:42%;margin-left:2%;margin-top:2%;float:left;}

  #image2{height:55%;width:55%;margin-right:0px;margin-    top:0;float:right;position:relative;z-index:3;}
   }

可悲的是，结果在 iphone 中是相同的。我应该在这里做什么。是否有针对使用 CSS 定位多个移动平台的任何好的参考

4

0 回答 0