@media不起作用
[英]@media doesn't work
問題描述
我正在使用媒體查詢為較小的屏幕重寫頁面樣式：
@media only screen
and (min-width : 400px)
and (max-width : 1024px) {
#container {
right:10px;
top:50px;
font-size:24px;
position:absolute;
min-height: 85%;
margin-left:auto;
width:100px;
}
#portfolio {
width:100px;
min-height:550px;
-webkit-box-shadow: 0px 2px 10px 4px rgba(9, 9, 9, 0.2);
box-shadow: 0px 2px 10px 4px rgba(9, 9, 9, 0.2);
-webkit-border-radius: 10px;
border-radius: 10px;}
#whoami {
width:100px;
min-height:550px;
-webkit-box-shadow: 0px 2px 10px 4px rgba(9, 9, 9, 0.2);
box-shadow: 0px 2px 10px 4px rgba(9, 9, 9, 0.2);
-webkit-border-radius: 10px;
border-radius: 10px; }
#blog {
width:100px;
min-height:550px;
-webkit-box-shadow: 0px 2px 10px 4px rgba(9, 9, 9, 0.2);
box-shadow: 0px 2px 10px 4px rgba(9, 9, 9, 0.2);
-webkit-border-radius: 10px;
border-radius: 10px;
}
#contact {
width:100px;
min-height:550px;
-webkit-box-shadow: 0px 2px 10px 4px rgba(9, 9, 9, 0.2);
box-shadow: 0px 2px 10px 4px rgba(9, 9, 9, 0.2);
-webkit-border-radius: 10px;
border-radius: 10px;
}
}
根本沒有任何工作。.我通過Dreamweaver CS6兼容性視圖查看了該網頁，但該網頁無法正常工作，因此我通過調整瀏覽器窗口的大小對其進行了檢查，但該網頁也無法正常工作。 任何想法為什么不起作用？ 它不能與ID一起使用嗎？
3 個解決方案
解決方案1
0 2012-12-28 15:10:14
嘗試在您的標頭上添加此meta：
<meta name="viewport" content="width=device-width" />
解決方案2
0 2012-12-28 15:47:50
發布的代碼按這樣的方式工作，因此問題出在其他地方，例如，結構內部的規則或使用不支持媒體查詢的瀏覽器（實際上意味着IE 8或更舊版本；否則， 瀏覽器支持非常好）。
要檢查情況，請首先使用最小的文檔進行測試，例如
<!doctype html>
<title>Testing media queries</title>
<style>
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
body { background: green; }
}
</style>
Hello world
您還應該通過將其取出（使其成為無條件的）來測試構造內部的樣式表，以查看其是否完全起作用。
解決方案3
0 2016-04-18 21:25:15
在Chrome和Firefox上，這也發生在我身上。
我發現，當默認問題出現了visibility設置為hidden或display到none （受CSS的元素的可見性是由JS控制）。
媒體查詢不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.