CSS3 media query based on screen size and device

/* 手機*/ @media screen and (max-width: 480px) { body { font-size: 14px; } } /* 平板*/ @media screen and (min-width: 481px) and (max-width ...

手機*/ @media only screen and (max-width: 480px) { body { font-size: 14px; } } /* 平板*/ @media only screen and (min-width: 481px) and (max- ...

@media (max-width: 767px) { } @media (max-width: 480px) { } @media (min-width: 768px) and (max-width: 979px) { } @media (min-width: 980px) ...

Media queries allow you to apply CSS styles depending on a device's media type (such as print vs. screen) or other features or characteristics.

@media (max-width: 480px) {...} 那時候的寫法是以桌機為主，然後再慢慢往其他更小的裝置尺寸做調整。

// 如果使用者之視窗寬度<= 768px，將會再載入這裡的CSS。 } @media screen and (max-device-width: 480px) { // 如果使用者之裝置寬度<= 480px，將會再載入 ...

max-width 和 min-width 是媒體查詢中最常用的屬性，它們分別控制頁面在不同螢幕寬度下的顯示樣式。 本文將介紹 max-width 和 min-width 的概念和應用，讓 ...

It's limiting the styles defined there to the screen (eg not print or some other media) and is further limiting the scope to viewports which are 1024px or less ...

A max-width media query triggers styles for smaller screens when the viewport or device width is less than a certain number or pixels.

The CSS @media rule is used in media queries to apply different styles for different media types/devices. Media queries can be used to check many things, such ... The @media Rule · Try it Yourself · CSS @namespace Rule