media queries

＃什麼是適用於響應式設計的好的 CSS 斷點值？ 我在設計網站時注意到我在使用一些相當隨機的值作為我的 CSS 斷點。有時是像 800 或 1200 這樣的圓整值，有時是一個像 672 這樣具體的像素值。 我搜尋了適合我未來使用的斷點的正確值。 我有一點時間來查找這個，並得出了以下結論。 我們需要擔心的是 5 個主要的設備尺寸： 行動裝置直向（mobile portrait） 行動裝置橫向（mobile landscape） 平板電腦直向（tablet portrait） 平板電腦橫向（tablet landscape） 筆記型電腦（laptop） 這些設備對應到以下像素值： 行動裝置直向：小於 640px 行動裝置橫向：> 640px 平板電腦直向：> 768px 平板電腦橫向：> 1024px 筆記型電腦：> 1280px 我從Tailwind預設取得這些值。 我不是一位設計師，所以我並不每天涉獵最佳慣例，但這一次我決定以行動裝置為先設計。 這意味著我的 CSS，在沒有任何媒體查詢的情況下，將為行動裝置直向進行設計，然後在越來越大的設備上添加斷點，禁止在媒體查詢中使用 max-width。 我想我總是選擇相反的路線：先為較大的屏幕進行設計，這是我最常使用的方法，然後再縮小，但現在似乎最常接受和使用的解決方案是以行動裝置為先設計，並使用 min-width。 這些是我從現在開始要使用的媒體查詢： @media (min-width: 640px) { } @media (min-width: 768px) { } @media (min-width: 1024px) { } @media (min-width: 1280px) { }

如何在CSS中使用媒體查詢來構建響應式網頁 在本篇文章中，我將首先介紹媒體類型和媒體特性描述符，然後解釋媒體查詢。 媒體類型 在媒體查詢和@import聲明中使用的媒體類型，允許我們確定在哪個媒體上加載CSS文件或CSS片段。 我們有以下媒體類型： all表示所有媒體 print用於打印 screen用於在屏幕上顯示頁面 speech用於屏幕閱讀器 screen是默認值。 以前我們有更多的媒體類型，但大多數已被棄用，因為它們被證明不能有效地確定設備需求。 我們可以在@import語句中使用它們，就像這樣： @import url(myfile.css) screen; @import url(myfile-print.css) print; 我們可以在多個媒體類型上加載CSS文件，每個類型之間用逗號隔開： @import url(myfile.css) screen, print; 在HTML的link標籤中也可以這樣使用： <link rel="stylesheet" type="text/css" href="myfile.css" media="screen" /> <link rel="stylesheet" type="text/css" href="another.css" media="screen, print" /> 我們不僅僅可以在media屬性和@import聲明中使用媒體類型。還有更多。 媒體特性描述符 首先，讓我們介紹媒體特性描述符。它們是我們可以將其添加到link的media屬性或@import聲明中的附加關鍵字，以對CSS的加載表示更多的條件。 以下是列表： 寬度（width） 高度（height） 設備寬度（device-width） 設備高度（device-height） 寬高比（aspect-ratio） 設備寬高比（device-aspect-ratio） 顏色（color） 顏色索引（color-index） 黑白顯示（monochrome） 分辨率（resolution） 方向（orientation） 掃描方式（scan） 网格（grid） 每個媒體特性描述符都有對應的min-和max-，例如： min-width和max-width min-device-width和max-device-width 等等。 其中一些接受length值，可以使用px或rem或任何長度值來表示。這就是width、height、device-width和device-height的情況。 例如： @import url(myfile.css) screen and (max-width: 800px); 請注意，我們將每個使用媒體特性描述符的塊都用括號包裹起來。 某些特性描述符接受固定值。orientation用於檢測設備方向，它接受portrait或landscape。 例如： <link rel="stylesheet" type="text/css" href="myfile....