Contohnya:
@media (max-width: 768px) {
div {
width: 100%;
float: none;
}
}
Pada contoh di atas, kita menggunakan media query untuk menyesuaikan tampilan halaman web pada layar dengan ukuran maksimal 768px. Selain itu, kita memberikan property pada elemen < div > dengan nilai width 100% dan float none, agar tampilan halaman web pada layar dengan ukuran maksimal 768px menjadi lebih responsif. Dengan menggunakan Responsive Design CSS, halaman web dapat menyesuaikan diri dengan ukuran layar perangkat yang berbeda dan memberikan pengalaman pengguna yang lebih baik.
Dalam prakteknya, penggunaan layout CSS dapat membuat halaman web menjadi lebih responsif dan dapat menyesuaikan diri dengan ukuran layar perangkat yang berbeda. Hal ini membuat tampilan halaman web lebih terstruktur dan mudah diakses oleh pengguna, sehingga dapat meningkatkan pengalaman pengguna dalam menggunakan halaman web tersebut.
Follow us on
