Learn how to use Media queries & Container queries

We’ve rounded up media queries that can be used to target designs for many standard and popular devices that is certainly worth a read. If you’re looking for a comprehensive list of media queries, this repository is a good resource.

Describes how to use media queries in your JavaScript code to determine the state of a device, and to set up listeners that notify your code when the results of media queries change (such as when the user rotates the screen or resizes the browser).

媒體特性（Media Feature）：常用的類型包含 width, height, aspect-ratio, orientation, resolution，這些類型常常需要給定一個區間，像是 min, max, min-width, max-width, min-aspect-ratio, max-aspect-ratio。

A CSS media query is used to apply different styles based on the device's characteristics like screen size, orientation, or resolution. This makes your website responsive, ensuring it looks good on all devices, including desktops, tablets, and smartph

CSS Media Queries allow web pages to adapt their layout and style to different screen sizes, devices, or orientations. They help create responsive designs by applying specific CSS rules based on conditions like width, height, or device type.

在製作 RWD 響應式網頁時，一定會用到的 CSS 語法就是 media，代表的就是針對指定的「媒體」設定樣式，這篇將會對 CSS 的 Media Queries 做個詳細介紹，也幫助自己未來撰寫時，更有個方向與參考。

CSS media queries allow you to apply styles based on the characteristics of a device or the environment displaying the web page. CSS media queries are essential for creating responsive web pages.