미디어 쿼리 실행 안함

나는 완전히 작동하는 웹 사이트를 만듭니다.미디어 쿼리 실행 안함

이전의 반응 형 웹 사이트마다 미디어 쿼리를 넣었지만 내 웹 사이트에서는 작동하지 않습니다.

이 웹 사이트 www.itztotalsolutions.us는 반응 형 미디어 쿼리를 추가하려고했지만 모바일 또는 ipad에는 미디어 쿼리가 적용되지 않습니다. 여기에 모바일 및 ipad 웹 사이트보기에 문제가 있음을 언급했습니다. 그것은 정상적인 웹 사이트처럼 우리가 데스크탑에서 본 것만 큼 나는 모바일 및 Ipad를위한 CSS를 쓰지 않는 것처럼 보인다 ... 장치 해상도를 감지하지 못한다는 것을 의미한다.

다음은 코드입니다. 있는 style.css에서

<meta name="viewport" content="width=device-width" />

: 헤더에

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/[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에서 실행되고있는 것 같다 확인.

내가 당신이 잘못 {}이이

출처

2013-07-15 samir prajapati

제목은 무엇입니까? – BoltClock

문제를 좀 더 자세히 설명해 주시겠습니까? "내 웹 사이트에서 작동하지 않는다"는 것은 훌륭한 설명이 아닙니다. 이 코드가 기대하는 것은 무엇이며 실제로 무엇을합니까? –

IE8에서 미디어 쿼리를 시도하고 있습니까? 어떤 브라우저를 사용합니까? –

는하지 마십시오 해결하기 위해 도와주세요? 여기에서 CSS를 확인하십시오 : http://csslint.net/

출처

2013-07-15 14:08:09

미디어 쿼리 실행 안함

답변

관련 문제