CSS - Media Queries: A Beginner's Guide

Hello, future web developers! Today, we're diving into the exciting world of CSS Media Queries. As your friendly neighborhood computer teacher, I'm here to guide you through this journey, step by step. Don't worry if you've never coded before – we'll start from the basics and work our way up. So, grab a cup of coffee (or tea, if that's your thing), and let's get started!

CSS - Media Queries

What are Media Queries?

Before we jump into the nitty-gritty, let's understand what media queries are. Imagine you're designing a website that looks great on your computer. But what happens when someone views it on their phone? That's where media queries come in handy! They allow your website to adapt to different screen sizes and devices. It's like having a chameleon website that changes its appearance based on its environment.

Syntax

Now, let's look at the basic syntax of a media query:

@media mediatype and (condition) {
/* CSS rules go here */
}

Don't let this intimidate you! We'll break it down:

@media: This tells the browser, "Hey, I'm about to set some conditions!"
mediatype: This specifies what type of media we're targeting (we'll cover these soon).
and: This is how we combine conditions.
(condition): This is where we set our specific conditions.

Media Types

Media types tell the browser what kind of device we're targeting. Here are the main ones:

Media Type	Description
all	Applies to all devices
print	For printers
screen	For computer screens, tablets, and smartphones

Logical Operators

We can use logical operators to create more complex queries:

Operator	Description
and	Combines multiple media features
not	Negates a media query
only	Applies styles only if the entire query matches
,	Combines multiple media queries

CSS Media Type - All

The all media type is like a Swiss Army knife – it works for all devices. Here's an example:

@media all {
body {
background-color: lightblue;
}
}

This sets the background color to light blue for all devices. Simple, right?

CSS Media Type - Print

The print media type is perfect for styling your web pages when someone wants to print them. Let's see it in action:

@media print {
body {
font-size: 12pt;
}
.no-print {
display: none;
}
}

This increases the font size for better readability and hides elements with the class no-print when printing.

CSS Media Type - Screen

The screen media type is probably the one you'll use most often. It's for any screen-based device. Here's an example:

@media screen and (max-width: 600px) {
.menu {
width: 100%;
}
}

This makes the menu take up the full width of the screen when the screen width is 600 pixels or less.

CSS Media Type - With Comma

We can target multiple media types using commas. It's like inviting multiple friends to a party:

@media screen, print {
body {
line-height: 1.5;
}
}

This sets the line height for both screen and print media types.

CSS Media Type - With Only

The only keyword is like a bouncer at a club. It ensures older browsers that don't support media queries don't apply the styles:

@media only screen and (max-width: 600px) {
.container {
width: 100%;
}
}

CSS Media Queries - Range

We can also specify ranges for our conditions:

@media screen and (min-width: 600px) and (max-width: 900px) {
.sidebar {
display: none;
}
}

This hides the sidebar when the screen width is between 600px and 900px.

Media Features

Media features allow us to test specific characteristics of the user's device or browser. Here are some common ones:

Feature	Description
width	Width of the viewport
height	Height of the viewport
aspect-ratio	Ratio between width and height
orientation	Landscape or portrait
resolution	Pixel density of the device

Creating Complex Media Query

Let's put it all together with a more complex example:

@media screen and (min-width: 600px) and (max-width: 900px) and (orientation: landscape) {
.grid {
display: flex;
flex-wrap: wrap;
}
.grid-item {
width: 50%;
}
}

This creates a two-column layout for landscape-oriented screens between 600px and 900px wide.

CSS Media Queries - Combining Multiple Types or Features

We can combine multiple types or features using the and operator:

@media screen and (min-width: 600px) and (max-width: 900px), print and (max-width: 600px) {
.content {
font-size: 14px;
}
}

This applies the style to screens between 600px and 900px wide, or when printing on paper up to 600px wide.

CSS Media Queries - Testing For Multiple Queries

Sometimes, we want to apply styles if any of several queries are true. We use commas for this:

@media (min-width: 600px), (orientation: landscape) {
.header {
position: sticky;
top: 0;
}
}

This makes the header sticky if the screen is at least 600px wide or in landscape orientation.

CSS Media Queries - Inverting a Query's Meaning

The not keyword lets us invert the meaning of a query:

@media not all and (orientation: landscape) {
.sidebar {
float: left;
}
}

This floats the sidebar left unless the device is in landscape orientation.

CSS Media Queries - Improving Compatibility With Older Browsers

For older browsers that don't support media queries, we can provide fallback styles:

.container {
width: 100%; /* Fallback for older browsers */
}

@media screen and (min-width: 600px) {
.container {
width: 80%;
}
}

This ensures a decent layout even on browsers that don't understand media queries.

And there you have it! You've just taken your first steps into the world of responsive web design with CSS Media Queries. Remember, practice makes perfect, so don't be afraid to experiment with these concepts. Happy coding!

Panduan Awal Mengenai Media Queries CSS

Hai, para pengembang web masa depan! Hari ini, kita akan melihat dunia yang menarik dari Media Queries CSS. Sebagai guru komputer tetangga yang ramah, saya disini untuk mengarahkan Anda dalam perjalanan ini, langkah demi langkah. Jangan khawatir jika Anda belum pernah mengoding sebelumnya - kita akan mulai dari dasar dan naik tingkat perlahan-lahan. Jadi, ambil secangkir kopi (atau teh, jika itu hal Anda), dan mari kita mulai!

Apa Itu Media Queries?

Sebelum kita masuk ke hal yang mendalam, mari kita mengerti apa itu media queries. Bayangkan Anda mendesain sebuah website yang terlihat bagus di komputer Anda. Tetapi apa yang terjadi jika seseorang melihatnya di ponselnya? Itu adalah tempat media queries berguna! Mereka memungkinkan website Anda untuk menyesuaikan diri dengan ukuran layar dan perangkat yang berbeda. Itu seperti memiliki website kameleon yang mengubah penampilannya berdasarkan lingkungannya.

Sintaks

Sekarang, mari kita lihat sintaks dasar dari media query:

@media mediatype and (condition) {
/* Aturan CSS dimasukkan disini */
}

Jangan biarkan ini mengintimidasi Anda! Kita akan membongkarannya:

@media: Ini memberitahu browser, "Hey, saya tentang untuk menetapkan beberapa kondisi!"
mediatype: Ini menentukan jenis media yang kita targetkan (kita akan meng cover ini nanti).
and: Ini adalah cara kita menggabungkan kondisi.
(condition): Ini adalah tempat kita menetapkan kondisi khusus.

Jenis Media

Jenis media memberitahu browser jenis perangkat yang kita targetkan. Ini adalah jenis utama:

Jenis Media	Deskripsi
all	Menggunakan untuk semua perangkat
print	Untuk printer
screen	Untuk layar komputer, tablet, dan smartphone

Operator Logis

Kita dapat menggunakan operator logis untuk membuat query yang lebih kompleks:

Operator	Deskripsi
and	Menggabungkan beberapa fitur media
not	Menyebut media query
only	Menggunakan gaya hanya jika seluruh query cocok
,	Menggabungkan beberapa media query

Jenis Media CSS - All

Jenis media all adalah seperti pisau瑞士 Army knife – ia bekerja untuk semua perangkat. Ini adalah contoh:

@media all {
body {
background-color: lightblue;
}
}

Ini menetapkan warna latar belakang menjadi biru muda untuk semua perangkat. Mudah, kan?

Jenis Media CSS - Print

Jenis media print sangat cocok untuk menyiapkan halaman web Anda saat seseorang ingin mencetaknya. Mari kita lihat contohnya:

@media print {
body {
font-size: 12pt;
}
.no-print {
display: none;
}
}

Ini meningkatkan ukuran font untuk kebacaan yang lebih baik dan menyembunyikan elemen dengan kelas no-print saat mencetak.

Jenis Media CSS - Screen

Jenis media screen adalah yang Anda akan gunakan paling sering. Itu untuk semua perangkat berbasis layar. Ini adalah contoh:

@media screen and (max-width: 600px) {
.menu {
width: 100%;
}
}

Ini membuat menu menempati keseluruhan lebar layar saat lebar layar adalah 600 piksel atau kurang.

Jenis Media CSS - Dengan Koma

Kita dapat menargetkan beberapa jenis media menggunakan koma. Itu seperti mengundang beberapa teman ke pesta:

@media screen, print {
body {
line-height: 1.5;
}
}

Ini menetapkan tinggi baris untuk keduanya jenis media layar dan cetak.

Jenis Media CSS - Dengan Only

Kata kunci only adalah seperti penjaga di klub. Itu memastikan bahwa browser lama yang tidak mendukung media query tidak menerapkan gaya:

@media only screen and (max-width: 600px) {
.container {
width: 100%;
}
}

Query Media CSS - Rentang

Kita juga dapat menentukan rentang untuk kondisi kami:

@media screen and (min-width: 600px) and (max-width: 900px) {
.sidebar {
display: none;
}
}

Ini menyembunyikan sidebar saat lebar layar berada antara 600px dan 900px.

Fitur Media

Fitur media memungkinkan kita untuk menguji karakteristik khusus perangkat pengguna atau browser. Ini adalah beberapa yang umum:

Fitur	Deskripsi
width	Lebar viewport
height	Tinggi viewport
aspect-ratio	Rasio antara lebar dan tinggi
orientation	Lanskap atau potret
resolution	Kepadatan piksel perangkat

Membuat Query Media Kompleks

Mari kita gabungkan semua ini dengan contoh yang lebih kompleks:

@media screen and (min-width: 600px) and (max-width: 900px) and (orientation: landscape) {
.grid {
display: flex;
flex-wrap: wrap;
}
.grid-item {
width: 50%;
}
}

Ini membuat susunan dua kolom untuk layar berorientasi landskap antara 600px dan 900px lebar.

Query Media CSS - Menggabungkan Beberapa Jenis atau Fitur

Kita dapat menggabungkan jenis atau fitur media menggunakan operator and:

@media screen and (min-width: 600px) and (max-width: 900px), print and (max-width: 600px) {
.content {
font-size: 14px;
}
}

Ini menerapkan gaya ke layar antara 600px dan 900px lebar, atau saat mencetak hingga 600px lebar.

Query Media CSS - Tes Beberapa Query

kadang-kadang, kita ingin menerapkan gaya jika salah satu dari beberapa query benar. Kita menggunakan koma untuk ini:

@media (min-width: 600px), (orientation: landscape) {
.header {
position: sticky;
top: 0;
}
}

Ini membuat header tetap di atas jika layar setidaknya 600px lebar atau dalam orientasi landskap.

Query Media CSS - Membalikkan Arti Query

Kata kunci not memungkinkan kita untuk membalikkan arti query:

@media not all and (orientation: landscape) {
.sidebar {
float: left;
}
}

Ini membuat sidebar terapung kiri kecuali perangkat dalam orientasi landskap.

Query Media CSS - Menyempurnakan Kompatibilitas Dengan Browser Lama

Untuk browser lama yang tidak mendukung media query, kita dapat menyediakan gaya cadangan:

.container {
width: 100%; /* Cadangan untuk browser lama */
}

@media screen and (min-width: 600px) {
.container {
width: 80%;
}
}

Ini memastikan tata letak yang layak bahkan di browser yang tidak mengerti media query.

Dan itu saja! Anda baru saja mengambil langkah pertama Anda ke dunia desain web responsif dengan CSS Media Queries. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba konsep ini. Selamat coding!

Credits: Image by storyset