Question

我正在学习媒体查询。我正在尝试为this网页上的各种设备提供不同的宽度。我建立了6个媒体查询（没有Samsung Galaxy，我以后会做……），但是它们会覆盖我的Desktop和Nexus Portrait。

此设备的媒体查询；

/*   My Desktop    1280 x 1024 */

@media only screen and (min-width: 65em) and (max-width: 80em) {  
body {

/* Tablet iPad 4 generation & iPad air, Portrait */

@media only screen and (max-width: 64em) and (orientation: portrait)  {


/* Nokia Lumia 920  */

@media only screen and (max-width : 47.5em) and (orientation : portrait) {

/* Tablet Nexus 7  (Portrait) */

@media only screen and (max-width: 38em) and (orientation: portrait){


/* Smartphones iPhone 3-4-5(Portrait)  */

@media screen and (min-width: 20em) 
          and (max-width: 30em) 
          and (orientation: portrait){

Here来自 tablet_index.css 的所有媒体查询代码。

元标记；

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=utf-8">

我使用PHP代码导入/包含到CSS文件中；

<style>
<?php 

     include 'CSS/me.css';
     include 'CSS/tablet_index.css';
?>
</style>

我从一个星期开始尝试展示它们...，请任何人帮助我解决此问题，非常感谢！

Answer 1

我发现了这个问题。...

在我的台式机 @media only screen and (min-width: 65em) and (max-width: 80em) {

我写了grid-gap的时候应该写grid-row-gap。

后来在我的 Nexus @media only screen and (max-width: 38em) and (orientation: portrait){

更改我的悬停；

.dropdown:hover .dropdown-content {

  left: 80px;
  top: 182px; 
}

媒体查询覆盖方向纵向

1 个答案: