Iphone Ipad 的媒体查询答案

【问题标题】：Media queries for Iphone IpadIphone Ipad 的媒体查询
【发布时间】：2013-12-24 01:54:25
【问题描述】：

我想在 ipad 或 iphone 上隐藏两个 div 并显示一个 div。在处理媒体查询时，我能够隐藏两个 div，但我想显示的那个没有在 ipad 或 iphone 上显示我正在使用的代码。

<link media="all and (min-device-width: 481px) and (max-device-width: 800px) and (orientation:landscape)" href="/cs_common/css/ipad/ipad-landscape.css" rel="stylesheet" type="text/css" />


<link media="all and (min-device-width: 481px) and (max-device-width: 800px) and (orientation:portrait)"  href="/cs_common/css/ipad/ipad-portrait.css" rel="stylesheet" type="text/css" />

<link media="all and (max-device-width: 480px)" href="/cs_common/css/ipad/iphone.css" rel="stylesheet" type="text/css" />


<style>
  .newrugtoolsel 
 {

     visibility:hidden;

  }

  .newrugsearch
  {
      visibility:hidden;
  }
  .bottom
  {
      display:block;



  }

</style>


<html>
<div  class="bottom"  style=" width:100%; height:80px; background-color:blue; position: fixed; left:0px; bottom:0px; display:none;"> This is the div i want to show on ipad or iphone and hide on desktop </div>
</html

我要显示的 div 是 .bottom

【问题讨论】：

标签： html iphone css ipad media

【解决方案1】：

您需要在为整个网站设置样式后链接样式表，否则标签将覆盖您的媒体样式表所说的内容。

<style>
  .newrugtoolsel 
 {

     visibility:hidden;

  }

  .newrugsearch
  {
      visibility:hidden;
  }
  .bottom
  {
      display:block;



  }

</style>

    <link media="all and (min-device-width: 481px) and (max-device-width: 800px) and (orientation:landscape)" href="/cs_common/css/ipad/ipad-landscape.css" rel="stylesheet" type="text/css" />


<link media="all and (min-device-width: 481px) and (max-device-width: 800px) and (orientation:portrait)"  href="/cs_common/css/ipad/ipad-portrait.css" rel="stylesheet" type="text/css" />

<link media="all and (max-device-width: 480px)" href="/cs_common/css/ipad/iphone.css" rel="stylesheet" type="text/css" />

【讨论】：

【解决方案2】：

首先，我会将 css 放入样式表中。从您的 html 页面中删除它，并将其全部放入不同的样式表中。

应该按照您的想法工作，但在每个样式表中而不是在您的 html 中指定它。

【讨论】：

你的 html 中不应该有样式，而应该是类。 .bottom 是设置类和样式，如@Ben 所说，将覆盖 css ;)