Question

我正在使用MediaQuery创建一个响应式网站布局，如下所示，除了一个邪恶的问题，一切正常！

core.css默认应用于网站，它是桌面版的样式表。但正如您在此链接中看到的，当屏幕宽度为1024px或更低时，它将链接到tablet-and-mobile.css，因此它应用了平板电脑和手机样式。 <link rel="stylesheet" type="text/css" media="screen and (max-width : 1024px)" href="assets/css/tablet-and-mobile.css"/>

问题是许多用户仍然使用宽度为1024px且平板电脑宽度为1024px的用户桌面！两个屏幕具有相同宽度的事实与整个系统相冲突，因为当从宽度为1024px的屏幕桌面访问网站时，它应用平板电脑版本。

@media screen and (max-device-width: 1024px)

我尽我所能！但似乎无法修复它。你会推荐什么？这是一个实时模板：www.loaistudio.com

Answer 1

您可以尝试以下方法： @media screen and (max-width: 1024px) and (min-resolution: 120dpi) 这个MQ适用于大多数平板电脑，但不适用于屏幕大于10.5英寸的笔记本电脑，这涵盖了大多数情况。不是一个理想的解决方案，但值得一试。 DPI calculator might help

对于您的情况可能如下：<link rel="stylesheet" media="screen and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 1.25),(min-resolution: 120dpi)" href="assets/css/tablet-and-mobile.css" />

注意：请参阅 - https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#resolution

Answer 2

用

尝试这样的事情怎么样？

   @media only screen 
       and (min-device-width : 768px) 
       and (max-device-width : 1024px) 
       and (orientation : landscape) {
       /* Styles */
    }


   @media only screen 
       and (min-device-width : 768px) 
       and (max-device-width : 1024px) 
       and (orientation : portrait) {
       /* Styles */
    }

Answer 3

更简单的方法是为1024px制作2个不同的媒体查询：

@media only screen and (max-width:1024px) {
       /*This will show only the desktop Css rules with dimension of 1024px */    

}

@media only screen and (max-device-width:1024px) {
       /*This will show only the tablet Css rules with dimension of 1024px*/    

}

创造像这样的区别是有效的，我尝试过，它的功能就像魅力一样。希望这对你有用。

1024px宽度的平板和1024px宽的平板电脑是相互矛盾的

3 个答案: