0
私はMetro UI cssを使ってウェブサイトを作っています。タイル領域を作成して個々のタイルを指定することができましたが、小さなデバイスを使用しているときに、タイルの一部が画面からはみ出してしまうため、モバイルに対応するのに問題があります。ここでメトロとレスポンス
は私のコードは、これまで
<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%;
}
}
ですコンピュータの画面サイズを変更したり、モバイルで応答したりすることができます。事前に助けてくれてありがとう。