{"id":49338,"date":"2024-08-23T08:31:00","date_gmt":"2024-08-23T01:31:00","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=49338"},"modified":"2024-09-05T15:04:14","modified_gmt":"2024-09-05T08:04:14","slug":"belajar-css-bagian-9","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/belajar-css-bagian-9\/","title":{"rendered":"Belajar CSS Bagian 9: CSS Media Query Beserta Contohnya"},"content":{"rendered":"\n<p>Setelah belajar <a href=\"https:\/\/www.rumahweb.com\/journal\/belajar-css-bagian-8\/\" target=\"_blank\" rel=\"noopener\" title=\"mengatur element dalam CSS\">mengatur ukuran element<\/a>, pada series belajar CSS kali ini, kami akan membahas tentang media <em>query <\/em>beserta contohnya. Simak informasi berikut ini.<\/p>\n\n\n\n\n\n<p>Media <em>query<\/em> dalam CSS berfungsi untuk membuat tampilan <em>frontend <\/em>website menjadi responsif sehingga dapat diakses dengan baik di berbagai perangkat, seperti mobile, tablet, laptop, dan PC.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Apa itu Media Query?<\/h2>\n\n\n\n<p>Media <em>query <\/em>adalah fitur penting dalam <a href=\"https:\/\/www.rumahweb.com\/journal\/css-adalah\/\" target=\"_blank\" rel=\"noopener\" title=\"css adalah\">CSS<\/a> yang memungkinkan tampilan website menjadi responsif di berbagai perangkat. Dengan media <em>query<\/em>, Anda dapat menyesuaikan tampilan website sesuai dengan karakteristik perangkat pengguna, seperti ukuran dan resolusi layar, sehingga website dapat diakses dengan optimal pada mobile, tablet, dan laptop\/PC.<\/p>\n\n\n\n<p>Sebelum mempelajari lebih lanjut tentang CSS media <em>query<\/em>, pastikan Anda sudah memahami konsep dasar CSS dan memiliki pemahaman dasar tentang tata letak web menggunakan HTML.<\/p>\n\n\n\n<p>Anda dapat balajar HTML dan CSS dasar untuk pemula pada series artikel berikut: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.rumahweb.com\/journal\/tag\/belajar-html\/\" target=\"_blank\" rel=\"noopener\" title=\"belajar html\">Belajar HTML dasar<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.rumahweb.com\/journal\/tag\/belajar-css\/\" target=\"_blank\" rel=\"noopener\" title=\"belajar css\">Belajar CSS dasar<\/a><\/li>\n<\/ul>\n\n\n\n<p>Untuk memulai belajar CSS tentang media query, Anda perlu memahami beberapa sintaks penting yang nantinya akan sering Anda gunakan.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Sintaks CSS Media <em>Query<\/em><\/h2>\n\n\n\n<p>Penulisan CSS media <em>query <\/em>hampir sama seperti penulisan CSS pada umumnya. Penulisan pada <em>script <\/em>CSS cukup menggunakan @media dilengkapi dengan aturan yang akan diterapkan. Berikut contoh kodenya :&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media media-type and (media-feature-rule) {\n  \/* Script kode css *\/\n}<\/code><\/pre>\n\n\n\n<p>Dari <em>script <\/em>tersebut terdiri dari:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>media-type : <\/strong>akan memberitahu <em>browser <\/em>media apa yang akan ditentukan.<\/li>\n\n\n\n<li><strong>media-feature-rule : <\/strong>ekspresi media atau aturan yang perlu diterapkan.<\/li>\n\n\n\n<li><strong>CSS rules : <\/strong>kode CSS jika aturan media type dan media <em>feature <\/em>memiliki nilai benar.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Format Penulisan CSS Media <em>Query<\/em><\/h2>\n\n\n\n<p>Sama halnya seperti membuat <em>script <\/em>CSS pada umumnya, Anda dapat menyisipkan kode CSS media <em>query <\/em>pada file CSS atau pada script CSS yang akan digunakan.<\/p>\n\n\n\n<p>Dari contoh kode diatas, terdiri dari <strong>media-type, media-feature-rule, <\/strong>dan <strong>CSS rules.<\/strong> Mari kita bahas satu persatu.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Media Type<\/h3>\n\n\n\n<p>Media type untuk menentukan aturan untuk perangkat berbeda. Berikut beberapa jenis media yang umum digunakan:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Jenis Media<\/strong><\/td><td><strong>Keterangan<\/strong><\/td><\/tr><tr><td>all<\/td><td>Cocok untuk semua perangkat media.<\/td><\/tr><tr><td>print<\/td><td>Digunakan untuk printer.<\/td><\/tr><tr><td>screen<\/td><td>Ditargetkan pada layar komputer, tablet, ponsel pintar, dll.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Media <em>Feature<\/em><\/h3>\n\n\n\n<p>Setelah menentukan media type, Anda perlu menentukan aturan yang akan diterapkan. Berikut salah satu aturan yang umum digunakan.<\/p>\n\n\n\n<p><strong>Width <\/strong>dan<strong> height: <\/strong>aturan ini akan mendeteksi lebar dan tinggi ukuran layar yang tetap. Selain itu, Anda juga dapat menggunakan max-width dan min-width atau max-height dan min height untuk menentukan ukuran layar sesuai dengan ukuran layar. Berikut contoh kodenya :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media screen and (max-width: 600px) {\n  body {\n    color: blue;\n  }\n}<\/code><\/pre>\n\n\n\n<p><strong>Orientasi: <\/strong>aturan ini akan dapat mendeteksi orientasi ukuran layar apakah dalam bentuk <em>potrait <\/em>atau <em>landscape<\/em>. Berikut contoh kodenya :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media (orientation: landscape) {\n  body {\n    color: blue;\n  }\n}<\/code><\/pre>\n\n\n\n<p><strong>Ranged<\/strong>: aturan ini dapat menentukan kondisi diantara 2 nilai.&nbsp;Berikut contoh kodenya:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media (min-width: 30em) and (max-width: 50em) {\n  body {\n    color: blue;\n  }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Deklarasi CSS rules<\/h3>\n\n\n\n<p>Setelah diterapkan, Anda dapat menentukan kode CSS sesuai dengan media dan aturan yang akan diterapkan. Penulisan aturan kode sama seperti penulisan kode CSS pada umumnya. Berikut contoh <em>script<\/em>nya:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media screen and (max-width: 600px) {\n  \/*ini adalah awal css rules*\/\n  body {\n    color: blue;\n  }\n  \/*ini adalah akhir css rules*\/\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Contoh Script CSS Media Query<\/h2>\n\n\n\n<p>Setelah memahami format penulisan CSS media <em>query<\/em> di atas, berikut akan Kami berikut kami berikan contoh <em>script <\/em>atau query secara full peda website:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n&lt;style&gt;\nbody {\n  background-color: blue;\n}\n\n@media only screen and (max-width: 600px) {\n  body {\n    background-color: red;\n  }\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;p&gt;Perkecil ukuran layar hingga lebar kurang dari 600px, maka warna background akan berganti dari biru menjadi merah&lt;\/p&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>Pada contoh <em>script <\/em>diatas, ketika di akses melalui browser dengan lebar layar lebih dari 600px, maka <em>background <\/em>akan berwarna biru. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/image.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"627\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/image-1024x627.png\" alt=\"Layar lebih dari 600px - Belajar CSS Bagian 9\" class=\"wp-image-49339\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/image-1024x627.png 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/image-300x184.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/image-768x470.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/image-370x227.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/image-270x165.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/image-570x349.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/image-740x453.png 740w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/image.png 1117w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Sedangkan jika diakses menggunakan layar kurang dari 600px maka <em>background <\/em>akan berubah menjadi merah.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/image-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"624\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/image-1-1024x624.png\" alt=\"Layar kurang dari 600px - Belajar CSS Bagian 9\" class=\"wp-image-49340\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/image-1-1024x624.png 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/image-1-300x183.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/image-1-768x468.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/image-1-370x226.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/image-1-270x165.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/image-1-570x348.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/image-1-740x451.png 740w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/08\/image-1.png 1120w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Kesimpulan<\/h2>\n\n\n\n<p>Dengan menggunakan CSS media <em>query<\/em>, Anda dapat membuat website yang responsif terhadap berbagai ukuran layer. Interface website dapat disesuaikan untuk setiap perangkat, sehingga tampilannya berbeda berdasarkan jenis layar atau perangkat yang digunakan.<\/p>\n\n\n\n<p>Hal ini bertujuan untuk memudahkan pengunjung website Anda, serta memastikan bahwa halaman web yang Anda bangun tetap terlihat bagus, menarik, responsif, dan berfungsi dengan baik di semua perangkat.<\/p>\n\n\n\n<p>Demikian series belajar CSS bagian 9 tentang media query. Simak terus series belajar CSS selanjutnya di Rumahweb, agar kemampuan CSS Anda semakin bertambah. Semoga bermanfaat.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Setelah belajar mengatur ukuran element, pada series belajar CSS kali ini, kami akan membahas tentang media query beserta contohnya. Simak informasi berikut ini. Media query dalam CSS berfungsi untuk membuat tampilan frontend website menjadi responsif sehingga dapat diakses dengan baik di berbagai perangkat, seperti mobile, tablet, laptop, dan PC. Apa itu Media Query? Media query [&hellip;]<\/p>\n","protected":false},"author":353,"featured_media":49359,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[1752,1751,2186],"class_list":{"0":"post-49338","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-design","8":"tag-belajar-css","9":"tag-css","10":"tag-tutorial-css"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/49338","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/353"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=49338"}],"version-history":[{"count":0,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/49338\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/49359"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=49338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=49338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=49338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}