如何使用媒体查询来显示特定于设备的内容
How to use media queries to display device-specific content
我是网络开发的新手,我想弄清楚媒体查询是如何工作的。我正在尝试为移动设备显示一个图像,为桌面显示一个更大的图像。我最大限度地简化了项目,以隔离问题,并且还使背景不同颜色以更好地区分。这是我的文件:
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 在本地服务器上进行测试。任何帮助表示赞赏。
你可以按照标准的方式编写媒体查询,而不是这样写,这里是 link http://www.w3schools.com/css/css_rwd_mediaqueries.asp
您可以根据分辨率获取图像,而不是使用 id 进行操作
为不同的设备编写 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 */
}
/* 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 */
}
我是网络开发的新手,我想弄清楚媒体查询是如何工作的。我正在尝试为移动设备显示一个图像,为桌面显示一个更大的图像。我最大限度地简化了项目,以隔离问题,并且还使背景不同颜色以更好地区分。这是我的文件:
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 在本地服务器上进行测试。任何帮助表示赞赏。
你可以按照标准的方式编写媒体查询,而不是这样写,这里是 link http://www.w3schools.com/css/css_rwd_mediaqueries.asp 您可以根据分辨率获取图像,而不是使用 id 进行操作
为不同的设备编写 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 */
}
/* 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 */
}