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

时间:2016-10-18 17:24:47

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

我是网络开发的新手,我正在努力弄清楚媒体查询的工作原理。我试图为移动设备显示一个图像,为桌面显示更大的图像。我已经将项目简化为最大化,以隔离问题,并使背景不同的颜色更好地区分。这是我的文件:

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在本地服务器上进行测试。任何帮助表示赞赏。

2 个答案:

答案 0 :(得分:0)

不是以这种方式编写,而是可以遵循如何在此处编写媒体查询的标准模式是链接http://www.w3schools.com/css/css_rwd_mediaqueries.asp 而不是用id操纵它,你可以根据分辨率获得图像

答案 1 :(得分:0)

为不同的设备编写CSS可能会让人痛苦。使用媒体查询,如果您知道如何精确定位特定设备,则会更容易。这可以帮助您从CSS中精确定位特定的移动设备。复制代码并将其粘贴到您的CSS文件中并获取crackin'!

/ *智能手机(人像和风景)----------- * /

@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 */
}

/ * iPads(人像和风景)----------- * /

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

/ * iPads(风景)----------- * /

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

/ * iPads(肖像)----------- * /

@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 */
}