ฉันกำลังสร้างเว็บไซต์โดยใช้ 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%;
}
}
วิธีทำให้มันตอบสนองเพื่อให้สามารถเลื่อนหน้าจอได้โดยสมมติว่าฉันลดขนาดหน้าจอคอมพิวเตอร์หรือทำให้ตอบสนองบนมือถือ ขอบคุณสำหรับความช่วยเหลือล่วงหน้า
