CSS視口寬度

好的，所以此刻我忙於學習響應式CSS。這可能對你很簡單，但我不明白如何實現這一點：CSS視口寬度

我正在玩一個'網格'。我已經將所有類設置爲寬度和高度的百分比，所以這不應該是問題。但是，當我調整視口（窗口）的大小時，它不會動態增長或縮小。

參見：here

目前使用下面的HTML：

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

<div id="wrapper"> 
<div id="header"> 
<a href="" title="FavoriteFM" class="top-logo-container"></a> 
</div> 
<div id="presenter"> 
<a href="" title="FavoriteFM" class="presenter-one"></a> 
<a href="" title="FavoriteFM" class="presenter-two"></a> 
<a href="" title="FavoriteFM" class="presenter-three"></a> 
<a href="" title="FavoriteFM" class="presenter-four"></a> 
<a href="" title="FavoriteFM" class="presenter-five"></a> 

</div> 

<div id="main"> 


</div>

使用下面的CSS：

<style> 

/* Theme */ 
html { 
margin-top: 0px !important; 
} 

/* DO NOT EDIT OR MONKEYS WILL BITE YOU */ 
.frame_holder { 
position: absolute; 
top: 8px; 
bottom: 50px; 
/* left: 50px; */ 
right: 150px; 
background: #ffffff; 
} 

.my_frame { 
width: 149%; 
height: 108%; 
/* border: 1px solid #e0e0e0; */ 
} 

body { 
    background-color: #f0ede9; 
    margin-top: 0px; 
    position: relative; 
    background-repeat: no-repeat; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

} 


.clearfix { 
clear: both; 
} 

p { 
font-family: Roboto; 
padding: 1px; 
} 



#body.layout-1 { 
background: #f0ede9 url(../images/border.gif) 640px top repeat-y scroll; 
background-color: #f0ede9; 
background-image: url(../images/border.gif), url(../images/border-2.gif); 
background-repeat: repeat-y, repeat-y; 
background-position: 640px top, 0px top; 
} 

a:hover, a:visited, a:link, a:active { 
text-decoration: none; 
color: #bababa; 
font-family: Roboto; 
} 

#wrapper { 
width: 965px; 
margin: 0 auto; 
overflow: hidden; 
} 

#header { 
width: 100%; 
height: 80px; 
background: #2a2727; 
margin-top: 20px; 
color: #fff; 
} 

.top-logo-container { 
    display: block; 
    height: 100px; 
    width: 100px; 
    text-indent: -9999px; 
    background: url(http://favoritefm.com/wp-content/themes/FavClear/img/logo.png) 5% 50% no-repeat scroll; 
    margin: 0 auto; 
    position: relative; 
    float: left; 
    background-color: #000; 
    margin-top: -10px; 
    background-size: 100px; 
} 



#main { 
margin-left: 2px; 
overflow: hidden; 
} 

#presenter { 
margin-top: 40px; 
width: 100%; 
height: 40%; 
overflow: hidden; 
} 

.presenter-one { 
    display: block; 
    height: 100%; 
    width: 50%; 
    text-indent: -9999px; 
    background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll; 
    margin: 0 auto; 
    position: relative; 
    float: left; 
    background-color: #000; 
    margin-top: -10px; 
    background-size: 100% 100%; 
    } 



    .presenter-two { 
    float: left; 
    position: relative; 
    display: block; 
    height: 50%; 
    width: 25%; 
    text-indent: -9999px; 
    background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll; 
    margin: 0 auto; 
    position: relative; 
    float: left; 
    background-color: #000; 
    margin-top: -10px; 
    background-size: 266px 300px; 
    } 

    .presenter-three { 
    position: relative; 
    display: block; 
    height: 50%; 
    width: 25%; 
    text-indent: -9999px; 
    background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll; 
    margin: 0 auto; 
    position: relative; 
    float: left; 
    background-color: #000; 
    margin-top: -10px; 
    background-size: 266px 310px; 
    } 

     .presenter-four { 
    position: relative; 
    display: block; 
    height: 52%; 
    width: 25%; 
    text-indent: -9999px; 
    background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll; 
    margin: 0 auto; 
    position: relative; 
    float: left; 
    background-color: #000; 
    margin-top: -10px; 
    background-size: 266px 300px; 
    } 

     .presenter-five { 
    position: relative; 
    display: block; 
    height: 52%; 
    width: 25%; 
    text-indent: -9999px; 
    background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll; 
    margin: 0 auto; 
    position: relative; 
    float: left; 
    background-color: #000; 
    margin-top: -10px; 
    background-size: 266px 300px; 
    } 

    @media screen and (max-width: 965px) { 
    body { 
     width: 50%; 
    } 

    #main { 
    width: 50% 
    } 


@media screen and (max-width: 365px) { 
    body { 
     width: 100%; 
    } 

    #wrapper { 
    width: 100% 
    margin: 0 auto; 
} 

#header { 
width: 100%; 
background: #2a2727; 
color: #fff; 
margin-top: 0px; 
height: 100px; 
} 

.top-logo-container { 
    display: block; 
    height: 120px; 
    width: 120px; 
    text-indent: -9999px; 
    background: url(http://favoritefm.com/wp-content/themes/FavClear/img/logo.png) 5% 50% no-repeat scroll; 
    margin: 0 auto; 
    position: relative; 
    float: left; 
    background-color: #000; 
    margin-top: -10px; 
    background-size: 120px; 
} 

#main { 
margin-left: 2px; 
} 

#presenter { 
margin-top: 40px; 
width: 100%; 
height: 100%; 
} 

.presenter-one { 
    display: block; 
    height: 100%; 
    width: 100%; 
    text-indent: -9999px; 
    background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll; 
    margin: 0 auto; 
    position: relative; 
    float: left; 
    background-color: #000; 
    margin-top: -10px; 
    background-size: 100% 100%; 
} 


.presenter-two { 
    display: block; 
    height: 50%; 
    width: 50%; 
    text-indent: -9999px; 
    background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll; 
    margin: 0 auto; 
    position: relative; 
    float: left; 
    background-color: #000; 
    margin-top: -10px; 
    background-size: 100% 100%; 
} 

.presenter-three { 
    position: relative; 
    display: block; 
    height: 50%; 
    width: 50%; 
    text-indent: -9999px; 
    background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll; 
    margin: 0 auto; 
    position: relative; 
    float: left; 
    background-color: #000; 
    margin-top: -10px; 
    background-size: 100% 100%; 
} 

.presenter-four { 
    position: relative; 
    display: block; 
    height: 50%; 
    width: 50%; 
    text-indent: -9999px; 
    background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll; 
    margin: 0 auto; 
    position: relative; 
    float: left; 
    background-color: #000; 
    margin-top: -10px; 
    background-size: 100% 100%; 
} 

.presenter-five { 
    position: relative; 
    display: block; 
    height: 50%!important; 
    width: 50%; 
    text-indent: -9999px; 
    background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll; 
    margin: 0 auto; 
    position: relative; 
    float: left; 
    background-color: #000; 
    margin-top: -10px; 
    background-size: 100% 100% 
} 




}

來源

2015-06-27 Dennis de Wit

你已經錯過了關閉您@media screen and (max-width: 965px)和設置您的#wrapper到width: 100%;這個斷點。然後它會響應。

@media screen and (max-width: 965px) { 
    body { 
     width: 50%; 
    } 

    #wrapper { 
     width: 100%; 
    } 

    #main { 
     width: 50% 
    } 
}

此外：我不認爲這有什麼意義，在這裏設置的body寬度和#main至50％。

見JSFiddle

來源

2015-06-27 19:50:15 KittMedia

謝謝，我試過了，但現在它沒有反應了。 –

據我可以在你的代碼中看到這個斷點被忽略，因爲缺少'}'。當這個斷點被激活時，你必須將'＃wrapper'設置爲100％才能獲得響應式設計。我在你的網站上試過了，看到這裏：http://jsfiddle.net/KittMedia/ymq8ssw2/ – KittMedia

對不起，但它仍然無法正常工作。它現在在365像素處響應，但它不會調整視口的寬度。它沒有在366 px和964px之間進行媒體查詢。它只是去主要的CSS。請參閱http://responsive.favoritefm.com。它響應迅速，但不會調整。通過查看源代碼查看我的代碼，因爲我無法在此處發佈代碼。 –

回答

相關問題