Komentar: Editor artikel ini akan memperkenalkan kepada Anda cara menggunakan HTML5 untuk mencapai dukungan situs web di Windows 8. Jika Anda membutuhkannya, silakan merujuknya
Pertama, mari kita pelajari tentang dukungan aplikasi Metro Windows 8 di Windows 8 dapat membagi layar dengan sangat baik. Angka berikut
Ini memungkinkan pengguna untuk beralih dengan sangat mudah saat digunakan. Sistem ini juga memiliki peraturan yang kaku tentang lampiran. Di sebagian besar dua layar, satu besar dan yang lainnya kecil. Dan lebar layar kecil ditetapkan pada 320 piksel.
Jadi ketika pengguna memposting situs web ke layar kecil, halaman dikurangi secara proporsional secara default. Seperti yang ditunjukkan pada gambar di bawah ini:
Jadi bagaimana kita bisa menyelesaikan masalah seperti itu dengan sangat baik? Bagaimana dengan membuat situs web menunjukkan efek yang sangat ramah di bawah layar kecil Windows 8? Di bawah ini saya punya contoh sederhana
Seperti yang ditunjukkan pada gambar, halaman yang sangat sederhana dan tradisional, termasuk navigasi, konten, dll yang diatur secara horizontal, dll.
Dan hal yang sama berlaku untuk kode tradisional
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<tyle>
.nav {
padding: 5px 0px 5px 0px;
margin: 0px;
Lebar: 100%;
Daftar-gaya-tipe: tidak ada;
Latar Belakang-Color: #CDDCD6;
Tinggi: 28px;
}
.nav li {
margin: 0px 1px 0px 0px;
float: kiri;
latar belakang-warna: #0094ff;
padding: 5px 10px 5px 10px;
}
.dvitem {
Lebar: 100%;
Tinggi: 400px;
latar belakang-warna: #b6ff00;
jelas: keduanya;
}
.utama {
Lebar: 960px;
Margin: 0PX Auto 0PX Auto;
}
</tyle>
</head>
<body>
<div>
<ul>
<li> Rumah </li>
<li> Item1 </li>
<li> Item2 </li>
<li> Item3 </li>
<li> Item4 </li>
</ul>
<div>
</div>
</div>
</body>
</html>
Halaman seperti itu dikurangi dalam efek sticking seperti yang ditunjukkan pada gambar:
Bagaimana cara memodifikasinya? Di halaman tradisional seperti ini, kita hanya perlu menulis CSS berdasarkan karakteristik relai Windows 8. Biarkan halaman kita diletakkan dan ditampilkan pada lebar 320 piksel.
Kode implementasi adalah sebagai berikut: Tambahkan kode gaya berikut ke halaman asli
Layar @Media dan (Max-Width: 320px) {
@-ms-viewport {width: 320px; }
.nav {
padding: 5px 0px 5px 0px;
margin: 0px;
Lebar: 100%; Latar Belakang-Color: #FFF;
}
.nav li {
Lebar: 300px;
jelas: keduanya;
margin: 0px 0px 1px 0px;
latar belakang-warna: #0094ff;
padding: 5px 0px 5px 0px;
}
.dvitem {
Lebar: 95%;
Tinggi: 600px;
Latar Belakang-Color: #FF00A4;
jelas: keduanya;
}
.utama {
Lebar: 320px;
Margin: 0PX Auto 0PX Auto;
}
}
Tidak ada perbedaan antara penelusuran layar penuh dan penelusuran tradisional.
Perbedaannya adalah bahwa efek tampilan jelas ketika Anda menempelkannya ke layar kecil seperti yang ditunjukkan pada gambar berikut.
Kode sampel ini mengunduh/file/risiko/index.rar