RESPONSIVE WEBSITE Responsive website Website yang tampilannya bisa
RESPONSIVE WEBSITE
Responsive website Website yang tampilannya bisa menyesuaikan perangkat yang dipakai oleh pengguna Pengembangan responsive website memakai HTML dan CSS. Pengembangan responsive website bisa dibangun sendiri dari awal atau memanfaatkan framework seperti Bootstrap.
Viewport Area suatu website yang dapat dilihat oleh pengguna. HTML 5 mengenalkan metode untuk mengendalikan viewport melalui tag <meta>. <meta name="viewport" content="width=device-width, initial-scale=1. 0"> Elemen viewport memberikan instruksi kepada peramban web bagaimana untuk mengendalikan dimensi halaman. width=device-width mengatur lebar halaman web agar menyesuaikan perangkat yang digunakan initial-scale=1. 0 mengatur tingkat zoom awal saat halaman web pertama kali terbuka.
Responsive Images CSS property width diatur 100%, Gambar akan responsive keatas atau kebawah Skala gambar dapat melebihi dari ukuran asli <img src="img_girl. jpg" stye="width: 100%; "> Sesuai ukuran gambar asli <img src="img_girl. jpg" style="maxwidth: 100%; height: auto; ">
Menampilkan Gambar berdasarkan Lebar Browser Element <picture> memungkinkan mengatur tampilan gambar berbeda untuk ukuran window berbeda <picture> <source srcset="img_smallflower. jpg" media="(max-width: 600 px)"> <source srcset="img_flowers. jpg" media="(maxwidth: 1500 px)"> <source srcset="flowers. jpg"> <img src="img_smallflower. jpg" alt="Flowers"> </picture>
Responsive Text Size Text size dapat diatur dengan "vw" unit, yang berarti "viewport width". <h 1 style="font-size: 10 vw">Hello World</h 1>
Media Queries Media queries you can define completely different styles for different browser sizes Example: resize the browser window to see that the three div elements below will display horizontally on large screens and stacked vertically on small screens: <!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1. 0"> <style>. left, . right { float: left; width: 20%; /* The width is 20%, by default */ }. main { float: left; width: 60%; /* The width is 60%, by default */ } /* Use a media query to add a breakpoint at 800 px: */ @media screen and (max-width: 800 px) {. left, . main, . right { width: 100%; /* The width is 100%, when the viewport is 800 px or smaller */ } } </style> </head>
Media Queries <body> <h 2>Media Queries</h 2> <p>Resize the browser window. </p> <p>Make sure you reach the breakpoint at 800 px when resizing this frame. </p> <div class="left"> <p>Left Menu</p> </div> <div class="main"> <p>Main Content</p> </div> <div class="right"> <p>Right Content</p> </div> </body> </html>
Responsive Web Page - Full Example Try it
Tugas Modifikasi tugas web personal anda agar menjadi web responsive
- Slides: 10