我正在使用 Metro UI css 制作一个网站；能够创建图 block 区域并指定各个图 block ，但我在使其响应移动设备时遇到问题，因为当使用较小的设备时，某些图 block 会从屏幕上延伸开。
到目前为止，这是我的代码
<body class="content" id="main">
<div class="tile-area fg-white" style="height: 100%; max-height: 100% !important;">
<h1 class="tile-area-title">HERMA</h1>
<div class="tile-group double">
<div class="tile-container">
<div class="tile-wide bg-green fg-white" data-role="tile">
<div class="tile-content iconic">
</div>
</div>
<div class="tile-wide bg-green fg-white" data-role="tile">
<div class="tile-content iconic">
</div>
</div>
<div class="tile-wide bg-green fg-white" data-role="tile">
<div class="tile-content iconic">
</div>
</div>
</div>
</div>
<!-- ./tile-group double -->
<div class="tile-group double">
<div class="tile-container">
<div class="tile-large bg-green fg-white" data-role="tile">
<div class="tile-content iconic">
</div>
</div>
<div class="tile-wide bg-green fg-white" data-role="tile">
<div class="tile-content iconic">
</div>
</div>
</div>
</div>
<!-- ./tile-group double -->
<div class="tile-group double">
<div class="tile-container">
<div class="tile-wide bg-green fg-white" data-role="tile">
<div class="tile-content iconic">
</div>
</div>
<div class="tile-wide bg-green fg-white" data-role="tile">
<div class="tile-content iconic">
</div>
</div>
<div class="tile-wide bg-green fg-white" data-role="tile">
<div class="tile-content iconic">
</div>
</div>
</div>
</div>
</div>
</body>
和页面的CSS
.content:before
{
content: "";
position: fixed;
left: 0;
right: 0;
z-index: 0;
display: block;
background-image: url("/img/dark-abstract-hd-wallpapers.jpg");
background-size: cover;
data-role: fitImage;
width: 100%;
height: 100%;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.content
{
position: fixed;
left: 0;
right: 0;
z-index: 0;
margin-left: 20px;
margin-right: 20px;
}
#main
{
width: 100%;
position: relative;
margin: 0 auto;
line-height: 1.4em;
}
@media only screen and (max-width: 479px)
{
#main
{
width: 90%;
}
}
有什么方法可以让它响应，这样假设我减小了我的电脑屏幕尺寸或让它响应移动设备，就可以在屏幕上滚动。提前感谢您的帮助。
最佳答案
尝试使用 Chrome 浏览器调试面板中的“切换设备”按钮(左上角)，可以使用 F12 打开，而不是更改整个计算机的屏幕分辨率。然后问题可能会消失。
关于jquery - Metro UI CSS 响应式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39659448/