내 웹 사이트에서 응답하지 않는 문제가 발생했습니다.

내 웹 사이트에 문제가 발생하여 이미 코드를 만들었지 만 응답하지 않습니다. 브라우저의 크기를 변경하면 내 사이트의 이미지가 다시 정렬되지 않습니다.내 웹 사이트에서 응답하지 않는 문제가 발생했습니다.

아래는 내 사이트가 반응하도록 만든 코드가 포함되어 내 responsive.css 파일입니다. 내 index.html 파일 코드뿐. 이 문제를 해결할 수 있도록 나를 보거나 알 필요가있는 것들을 알려주십시오.

index.html을

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Saveliy Yusufov | Working Professional</title> 
    <link rel="stylesheet" href="css/normalize.css"> 
    <link href='http://fonts.googleapis.com/css? family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" href="css/main.css"> 
    <link rel="stylesheet" href="css/responsive.css"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    </head>

responsive.css

@media screen and (min-width: 480px) { 

/********************************** 
TWO COLUMN LAYOUT 
***********************************/ 

    #primary { 
    width: 50%; 
    float: left; 
    } 

    #secondary { 
    width: 40%; 
    float: right; 
    } 
/********************************** 
PAGE: PORTFOLIO 
***********************************/ 

    #gallery li:nth-child(3+1) { 
    clear: left; 
    } 

    #gallery li { 
    background-color: orange; 
    width: 28.3333%; 
    } 
} 
/********************************** 
ABOUT 
***********************************/ 

.profile-photo { 
    float: left; 
    margin: 0 5% 80px 0; 
} 

@media screen and (min-width: 660px) { 
/********************************** 
HEADER 
***********************************/ 
    nav { 
    background: none; 
    float: right; 
    font-size: 1.125em; 
    margin-right: right; 
    width: 45%; 
    } 

    #logo { 
    float: left; 
    margin-left: 5%; 
    text-align: left; 
    width: 45%; 
    } 

    h1 { 
    font-size: 2.5em; 
    } 

    h2 { 
    font-size: 0.25em; 
    margin-bottom: 20px; 
    } 

    header { 
    border-bottom: 5px solid #599868; 
    margin-bottom: 60px; 
    } 
} 

    @media screen and (min-width: 480px) { 

/********************************** 
TWO COLUMN LAYOUT 
***********************************/ 

    #primary { 
    width: 50%; 
    float: left; 
    } 

    #secondary { 
    width: 40%; 
    float: right; 
    } 
/********************************** 
PAGE: PORTFOLIO 
***********************************/ 

    #gallery li:nth-child(3+1) { 
    clear: left; 
    } 

    #gallery li { 
    background-color: orange; 
    width: 28.3333%; 
    } 
} 
/********************************** 
ABOUT 
***********************************/ 

.profile-photo { 
    float: left; 
    margin: 0 5% 80px 0; 
} 

@media screen and (min-width: 660px) { 
/********************************** 
HEADER 
***********************************/ 
    nav { 
    background: none; 
    float: right; 
    font-size: 1.125em; 
    margin-right: right; 
    width: 45%; 
    } 

    #logo { 
    float: left; 
    margin-left: 5%; 
    text-align: left; 
    width: 45%; 
    } 

    h1 { 
    font-size: 2.5em; 
    } 

    h2 { 
    font-size: 0.25em; 
    margin-bottom: 20px; 
    } 

    header { 
    border-bottom: 5px solid #599868; 
    margin-bottom: 60px; 
    } 
}

출처

2014-06-13 Cherry_Developer

부트 스트랩을 사용하여 – sakir

휴대 전화에서 웹 사이트를 보려고 했습니까? 아니면 브라우저의 크기를 조정 했습니까? 귀하의 웹 사이트를 볼 때 귀하의 미디어 쿼리가 정상적으로 작동했습니다. :) – lindsay

모두 감사합니다! 문제가 해결되었습니다. –

당신은 responsive.css 자신이 미디어 쿼리를 추가해야합니다. firefox를 사용하고 (shift + ctrl + M)을 누른 다음 480 * 320을 선택하고 새 스타일이 해당 해상도로 적용되는지보십시오. 그리고 또한 웹 페이지 CSS의 끝 부분에 미디어 쿼리를 추가해야합니다

출처

2014-06-13 05:32:56

내 웹 사이트에서 응답하지 않는 문제가 발생했습니다.

답변

관련 문제