Question

我想隐藏两个div并在ipad或iphone上显示一个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

Answer 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" />

Answer 2

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

应该按照您的思维方式工作，但在每个样式表中指定它而不是在您的HTML中。

媒体查询Iphone Ipad

2 个答案: