正文 

当前位置： 首页 > 问答 >

为移动设备、低分辨率桌面和高分辨率桌面编写媒体查询 [重复]

     2023-03-06     114

关键词：

【中文标题】为移动设备、低分辨率桌面和高分辨率桌面编写媒体查询 [重复]【英文标题】：Writing media queries for mobile devices, low-res desktop and hi-res desktop [duplicate] 【发布时间】：2015-11-12 23:44:08 【问题描述】：

我同时使用屏幕宽度和屏幕高度来检测移动设备和桌面设备之间的差异，然后检测高分辨率桌面和低分辨率桌面。

我有一些 JavaScript 用于加载不同的 CSS 文件。它看起来像这样：

JavaScript

<script>
  if (screen.width > 800)  

    if (screen.height < 900)  
      document.write('<link href="/LowRes.css" type="text/css" />'); 
     else  
      document.write('<link href="/HiRes.css" type="text/css" />'); 
    

 else 

    document.write('<meta name="viewport" content="width=device-width,initial-scale=1">');
    document.write('<link href="/Mobile.css" type="text/css" />'); 

</script>

我想改变它并使用媒体查询，这就是我所拥有的：

CSS

<link media="screen and (min-device-width: 801px) and (min-device-width: 801px)" href="low.css" rel="stylesheet" />
<link media="screen and (min-device-height: 901px)" href="hi.css" rel="stylesheet" />
<link media="screen and (max-device-width: 800px) and (orientation : portrait), screen and (max-device-height: 800px) and (orientation : landscape)" href="mobile.css" rel="stylesheet" />

这允许无论方向如何都可以下载移动样式表。但是，桌面样式表总是设置为高分辨率，即使它实际上是低分辨率的。

如您所见，我的桌面模式高度为 800 像素，媒体查询设置为 min-device-height:901px，但它正在下载高分辨率样式表。这是为什么？

【问题讨论】：

为什么投反对票？需要解释一下吗？ 您知道您需要媒体查询，但您可能没有考虑过如何编写媒体查询？ @cimmanon：这不是重复的！我已经更新了我的问题以及您指出的问题中的答案与该问题无关。我正在寻找 3 条规则来复制 javascript；我已经更新了这个问题。如图所示，我不知道为什么应该将样式表限制为桌面低分辨率的 min-device-height:901px 不起作用。问题是“如何编写 3 条规则来检测移动/桌面低分辨率/桌面高分辨率”，到目前为止，所有答案都有很多规则，但没有一个答案将问题减少到只有 3 条规则。所以不，这不是重复的恕我直言 除非您在物理上更改了设备的分辨率，否则您所做的只是更改视口的大小，并且 *device-width 属性不会响应视口的更改。如果你想要你所要求的，你会接受这个被标记为重复的问题中的建议，而不是跺脚并声明“这不是重复的，它没有给我确切的代码我需要复制/粘贴到我的项目中！” @cimmanon：无论如何，在 3 个媒体查询中检测移动/低分辨率桌面/高分辨率桌面就是这个问题的内容。现在我让它在 javascript 中工作，我正在寻找替换它。您可以还原副本以查看其他人的想法吗？ 【参考方案1】：

将所有 CSS 文件包含到您的 &lt;head&gt;。或者，您可以将它们组合成一个 CSS 文件。

<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="/Mobile.css" type="text/css" />
<link href="/LowRes.css" type="text/css" />
<link href="/HiRes.css" type="text/css" />

然后您通过将文件内容包装到媒体查询来更改文件。 

@media (max-width: 800px)  
    // all contents of Mobile.css

@media (min-width: 801px) and (max-height:900px)  
    // all contents of LowRes.css

@media (min-width: 801px) and (min-height:901px)  
    // all contents of HiRes.css

查看here 了解 CSS 媒体查询。作为替代方案，您可以使用nested media queries，但一些旧浏览器可能不支持它们。

【讨论】：

这不起作用，因为如果用户在移动设备上并旋转到横向，那么他就不再使用移动设备了。 我明白了。仅使用媒体查询您无法检测到设备类型。您仍然需要依靠 JavaScript 来进行区分（请参阅 this）。 this 也可能会有所帮助。 好的，你可以投票重新提出问题吗？？ 当然。你还在寻找纯 CSS 的解决方案吗？ 是的，我的目标是用纯 CSS 媒体查询实现替换 javascript。

如何在移动设备中显示更高分辨率的图像，在桌面显示更低分辨率的图像？

】如何在移动设备中显示更高分辨率的图像，在桌面显示更低分辨率的图像？【英文标题】：Howtoshowhigherresolutionimageinmobileandlowerresolutionimageindesktop?【发布时间】：2021-10-1704:56:20【问题描述】：我使用了一些典型的引导网格来生... 查看详情

针对窄桌面而非移动设备的媒体查询

】针对窄桌面而非移动设备的媒体查询【英文标题】：mediaquerytotargetnarrowdesktopandnotmobile【发布时间】：2014-06-0910:01:30【问题描述】：假设我有以下代码：@media(max-width:1024px)divcolor:green;有没有办法在媒体查询中添加条件以排除移... 查看详情

在桌面、ipad、移动设备上显示不同元素的媒体查询

】在桌面、ipad、移动设备上显示不同元素的媒体查询【英文标题】：mediaqueriesshowingdifferentelementsondesktop,ipad,mobile【发布时间】：2017-09-2502:12:00【问题描述】：我需要在不同的屏幕尺寸（移动设备、ipad和桌面）上显示不同的元素... 查看详情

CSS媒体查询不足以检测超大型移动/平板设备与桌面设备[重复]

】CSS媒体查询不足以检测超大型移动/平板设备与桌面设备[重复]【英文标题】：CSSMediaQueriesnotsufficientenoughtodetectextralargemobile/tabletdevicesvsdesktop[duplicate]【发布时间】：2020-02-1512:20:05【问题描述】：通常，在针对台式机检测移动设... 查看详情

针对目标移动设备（第一）、平板电脑和桌面设备的特定媒体查询

】针对目标移动设备（第一）、平板电脑和桌面设备的特定媒体查询【英文标题】：Specificmediaqueriesfortargetmobile(first),tablet&desktop【发布时间】：2013-01-1503:45:02【问题描述】：我正在构建一个响应式布局，默认情况下首先从移... 查看详情

css桌面，平板电脑，移动设备的css媒体查询。(代码片段)

查看详情

css桌面，平板电脑，移动设备的css媒体查询。(代码片段)

查看详情

css桌面，平板电脑，移动设备的css媒体查询。(代码片段)

查看详情

css桌面，平板电脑，移动设备的css媒体查询。(代码片段)

查看详情

css桌面，平板电脑，移动设备的css媒体查询。(代码片段)

查看详情

css桌面，平板电脑，移动设备的css媒体查询。(代码片段)

查看详情

媒体查询在桌面上工作，但在移动设备上不工作

】媒体查询在桌面上工作，但在移动设备上不工作【英文标题】：MediaQueriesworkingondesktopbutnotonmobile【发布时间】：2015-12-1802:54:56【问题描述】：我知道这个问题已经被问过很多次，但我找到的答案并没有帮助。我的媒体查询在桌... 查看详情

媒体使用开发工具查询移动/桌面的不同可视化

】媒体使用开发工具查询移动/桌面的不同可视化【英文标题】：Mediaqueriesdifferentvisualizationformobile/desktopinwithdevtools【发布时间】：2021-08-0514:59:34【问题描述】：我在使用开发工具进行媒体查询时遇到问题。为什么如果我选择移动... 查看详情

针对移动应用到桌面的 CSS 媒体查询

】针对移动应用到桌面的CSS媒体查询【英文标题】：CSSMediaQueriestargetedformobileapplyingtodesktop【发布时间】：2014-05-2923:13:21【问题描述】：网页：www.mathias-syversen.net您好，这是我的第一篇文章，请多多关照！我正在尝试使用@media查... 查看详情

关于屏幕尺寸而不是分辨率的媒体查询

】关于屏幕尺寸而不是分辨率的媒体查询【英文标题】：Mediaqueryaboutscreensizeinsteadofresolution【发布时间】：2013-10-2820:18:54【问题描述】：是否有在CSS媒体查询中使用物理屏幕宽度的解决方法？今天，有些手机的分辨率超过了桌面... 查看详情

Heroku App 的媒体查询可以在桌面设备上运行，但不能在移动设备上运行（尽管尝试了多种解决方案）

】HerokuApp的媒体查询可以在桌面设备上运行，但不能在移动设备上运行（尽管尝试了多种解决方案）【英文标题】：MediaQueriesforHerokuAppworkingondesktopbutnotmobiledevices(despitetryingmultiplesolutions)【发布时间】：2014-10-0817:27:43【问题描述... 查看详情

移动端适配/移动开发与桌面开发(代码片段)

...站caniuse 网站查阅3.媒体查询/响应式设计定义：根据分辨率不同选择不同的样式主要作用：监测媒体类型，比如screen，tv等监测布局视口的特性，比如视口的宽高分辨率等用 查看详情

如何检测移动设备或台式机上的浏览器？ [复制]

...仍会加载桌面版本，因为最近的手机比旧桌面具有更高的分辨率。如何使用Vanillajavas 查看详情