如何使用媒体查询来显示特定于设备的内容答案

【问题标题】：How to use media queries to display device-specific content如何使用媒体查询来显示特定于设备的内容
【发布时间】：2017-02-28 02:13:31
【问题描述】：

我是 Web 开发的新手，我正在尝试弄清楚媒体查询是如何工作的。我正在尝试为移动设备显示一个图像，为桌面显示一个更大的图像。我已经最大限度地简化了项目，以隔离问题，并且还制作了不同的背景颜色以更好地区分。这是我的文件：

HTML：

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">

    <title>Website</title>

    <link rel="stylesheet" media="screen and (max-width:500px)" type="text/css" href="phoneStyle.css"> 
    <link rel="stylesheet" media="screen and (min-width:501px)" type="text/css" href="desktopStyle.css"> 

</head>

<body>      
    <div id="wrap">
            <img id="phone" src="phoneImg.jpg" height="100%"  />
            <img id="desktop" src="desktopImg.jpg" height="100%"  />            
    </div>
</body>

</html>

CSS：

phoneStyle.css

#desktop {
    display: none;
}

body {  
    background-color: red;
    margin: 0px;
}

desktopStyle.css

#phone {
    display: none;
}

body {  
    background-color: black;
    margin: 0px;
}

我只在两台设备上都获得了带有黑色背景的桌面图像。我正在使用 MAMP 在本地服务器上进行测试。任何帮助表示赞赏。

【问题讨论】：

标签： html css mobile media-queries mobile-website

【解决方案1】：

为不同的设备编写 CSS 可能会让人头疼。如果您知道如何定位特定设备，则使用媒体查询会更容易。这可以帮助您从 CSS 中确定特定的移动设备。复制代码并将其粘贴到您的 CSS 文件中，然后开始破解！

/* 智能手机（纵向和横向）----------- */

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
    /* Styles */
}

/* 智能手机（横向）----------- */

@media only screen
and (min-width : 321px) {
    /* Styles */
}

/* 智能手机（纵向）----------- */

@media only screen
and (max-width : 320px) {
    /* Styles */
}

/* iPad（纵向和横向）----------- */

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

/* iPad（横向）----------- */

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

/* iPad（纵向）----------- */

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

/* 新 iPad (iPad 3) ----------- */

@media only screen
and (min-device-width: 1536px)
and (max-device-width: 2048px)
and (-webkit-min-device-pixel-ratio: 2) {
    /* Styles */
}

/* iPhone 4 ----------- */

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
}

【讨论】：

【解决方案2】：

您可以遵循如何编写媒体查询的标准模式，而不是这样写，这里是链接http://www.w3schools.com/css/css_rwd_mediaqueries.asp 您可以根据分辨率获取图像，而不是使用 id 操作它

【讨论】：

我做了研究，我知道你可以使用@media，但我写的代码在我看来也是有效的，但它不起作用
也许你可以试试这个#phone { display: none; } 身体 { 背景颜色：黑色！重要；边距：0px； }