CSS 视口宽度

Question

好的，所以现在我正在忙着学习响应CSS。这对你来说可能很简单，但我不知道如何实现：

我正在制作 'grid'。我已将所有类设置为宽度和高度的百分比，所以这应该不是问题。但是，当我调整视口大小时 (window)，它不会动态增大或缩小。

参见：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%
}




}

Answer 1

您错过了在此断点中关闭 @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

CSS 视口宽度

CSS viewport width

css

viewport

width