我正在制作一個螢屏尺寸檢測器，并希望當您的螢屏太小時，它會用文字提醒您“您的螢屏尺寸太小。了解更多”。有沒有辦法做到這一點？我的代碼：
/* Extra small devices*/
@media only screen and (max-width: 600px) {
body {background: red;}
.info{content: "Extra Small Screen";}
}
/* Small devices */
@media only screen and (min-width: 600px) {
body {background: orange;}
}
/* Medium devices */
@media only screen and (min-width: 768px) {
body {background: lightgray;}
}
/* Large devices*/
@media only screen and (min-width: 992px) {
body {background: lightgray;}
}
/* Extra large device */
@media only screen and (min-width: 1200px) {
body {background: lightgray;}
}
uj5u.com熱心網友回復：
正確的方法是在足夠大的顯示幕上隱藏一個元素。
@media only screen and (max-width: 600px) {
body {background: red;}
.info{ display: block} /* show the warning */
}
/* Small devices */
@media only screen and (min-width: 600px) {
body {background: orange;}
.info { display: none; } /* hide the warning */
}
/* etc for all the others */
然后.info包含您需要顯示的所有資訊/內容/鏈接。
uj5u.com熱心網友回復：
您不能在 .html 中使用 html 標簽content。
您可以使用當寬度超過 600 像素時隱藏的元素。
@media only screen and (min-width: 600px) {
body { background: orange }
.info { display: none }
}
uj5u.com熱心網友回復：
你需要一個::before或::after在 html 標簽中
在你的情況下.info- > .info::after...
在此之后，現在您可以使用content: ;css 屬性
你可以做一些有趣的事情 ::after
例如： 
/* Extra small devices*/
@media only screen and (max-width: 600px) {
body {
background: red;
}
.info::after {
content: "Extra Small Screen";
}
}
/* Small devices */
@media only screen and (min-width: 600px) {
body {
background: orange;
}
.info::after {
content: "Small";
}
}
/* Medium devices */
@media only screen and (min-width: 768px) {
body {
background: lightgray;
}
.info::after {
content: "Medium";
}
}
/* Large devices*/
@media only screen and (min-width: 992px) {
body {
background: lightgray;
}
.info::after {
content: "Large";
}
}
/* Extra large device */
@media only screen and (min-width: 1200px) {
body {
background: lightgray;
}
.info::after {
content: "Extra large";
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="info">your screen is: </div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/390293.html