0
我創建了一個完全工作的網站。媒體查詢未運行
我把媒體查詢..根據前面的響應式網站，但它不工作在我的網站。
這是我的網站www.itztotalsolutions.us，我試圖添加媒體查詢使響應，但有一個沒有媒體查詢效果在手機或ipad ..在這裏我提到，我有移動和ipad網站的外觀問題。它看起來像我們在桌面上看到的正常網站，而不是我爲手機和Ipad編寫的CSS ...意味着它不會檢測到設備分辨率。
這是代碼。在標題：
<meta name="viewport" content="width=device-width" />
在style.css中：
body, html { height: 100%;}
body {
font-size: 12px;
line-height: 18px;
font-family: arial, sans-serif;
width:100%;
margin:auto;
background:url(images/main-full-bg.jpg) repeat #F60;
background-size:cover;
}
...etc.... all CSS for pages.. after it
/* ipad portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 980px) {
body { min-width: 768px; }
.shell { max-width: 748px; }
#navigation ul li { padding-left: 24px; font-size: 15px; }
.header-top { padding-left: 20px; padding-right: 20px; }
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
body { min-width: 320px; }
.shell { max-width: 320px; }
.header .shell { padding:0; background: url(images/m-header-shell.jpg) no-repeat 0 0; }
.header-top { padding: 0px 0 0px 0; }
#logo { margin: 0 auto; float: none; display: block; }
}
@media only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) {
#logo a { background: url(images/[email protected]) no-repeat 0 0; -webkit-background-size: 142px 57px; -moz-background-size: 142px 57px; background-size: 142px 17px; }
#navigation { background: url(images/[email protected]) no-repeat 0 0; -webkit-background-size: 298px 32px; -moz-background-size: 298px 32px; background-size: 298px 32px; }
#navigation a.nav-btn span { background: url(images/nav-arr[email protected]) no-repeat 0 0; -webkit-background-size: 10px 15px; -moz-background-size: 10px 15px; background-size: 10px 15px; }
.pagination a { background: url(images/[email protected]) no-repeat 0 1px; -webkit-background-size: 18px 40px; -moz-background-size: 18px 40px; background-size: 18px 40px; }
.main section { background: url(images/[email protected]) no-repeat center bottom; -webkit-background-size: 300px 10px; -moz-background-size: 300px 10px; background-size: 300px 10px; }
}
我檢查，當我在手機上運行似乎CSS從默認的CSS不是從查詢CSS運行。
請幫我解決這個
什麼是標題？ – BoltClock
你能否更詳細地描述問題？ 「它不適合我的網站」不是一個很好的描述。你期望這個代碼做什麼，它實際上做了什麼？ –
您正在IE8中嘗試媒體查詢？你使用什麼瀏覽器？ –