responsive design

＃什麼是適用於響應式設計的好的 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....

我需要在 React 中，讓側邊欄在大螢幕上呈現一種樣式，而在較小螢幕上呈現另一種樣式，所以我希望能夠在 JSX 中偵測到響應式佈局的變化。 就像這樣： 您可以使用 react-responsive 套件來實現這一點。 npm install react-responsive 然後您可以引入 useMediaQuery 鉤子： import { useMediaQuery } from 'react-responsive' 在您的組件中，您可以像這樣使用它： const isBigScreen = useMediaQuery({ query: '(min-device-width: 1224px)' }) const isSmallScreen = useMediaQuery({ query: '(max-width: 1224px)' }) 這是我在組件主頁上找到的一個簡單的斷點示例，對於我的需求來說效果很好。 我在一個佈局組件中以以下方式使用它： import { useMediaQuery } from 'react-responsive' export default function Layout({ children }) { const isBigScreen = useMediaQuery({ query: '(min-device-width: 1224px)' }) const isSmallScreen = useMediaQuery({ query: '(max-width: 1224px)' }) return ( <div> {isSmallScreen ?...

一種在移動設備上以美觀方式顯示表格的實用方法 幾天前，我通過Google 搜索控制台收到了一個警告。它在我有一個大表格的頁面上檢測到了移動端可用性問題。 這是給我帶來問題的表格： 在移動設備上，它的渲染效果相當差： 這不是一種良好的用戶體驗，也是Google 搜索控制台上的問題。如果有什麼我不希望看到的就是這樣一個錯誤/警告。尤其還是我能解決的問題。 我使用的靜態網站生成器Hugo允許我將特定於單個頁面的CSS代碼注入，只需將<style>標籤添加到Markdown文件中即可。非常方便。 因此，我開始尋找一個很好的方法來使我的表格具有響應性。我找到了這篇非常好的CSS Tricks文章：Responsive Data Tables。它來自2011年，但仍然適用！ 這個技巧是這樣的：我們希望將表格顯示為塊元素，而不是傳統CSS意義上的表格。我們通過將所有表格標題移到視圖之外，然後在表格中插入一個新的塊元素，每行都有自己的標題，就像這樣： 以下是實現上述設計的代碼： @media only screen and (max-width: 1500px) { table, thead, tbody, th, td, tr { display: block; } thead tr { position: absolute; top: -9999px; left: -9999px; } tr { border: 1px solid #ccc; } td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 200px; margin-left: 150px; } td:before { position: absolute; top: 12px; left: 6px; width: 200px; padding-right: 40px; white-space: nowrap; margin-left: -150px; } td:nth-of-type(1):before { content: "Option"; } td:nth-of-type(2):before { content: "Description"; } td:nth-of-type(3):before { content: "Type"; } td:nth-of-type(4):before { content: "Default";} } 你希望自定義的重要部分是最後4行 - 你需要輸入每個“列”的標題，如果有更多列，則需要添加更多行。如果列較少，則可以將它們移除。...