CSS 媒體查詢是一種根據設備屏幕尺寸來適配網站布局的技術。在實際開發中,我們需要針對不同的設備屏幕尺寸來設置不同的樣式,以提供更好的用戶體驗。下面介紹一些常用的 CSS 媒體查詢具體尺寸。
@media (min-width: 320px) { /* 手機屏幕寬度小于等于 320px */ /* 樣式代碼 */ } @media (min-width: 480px) { /* 平板橫屏屏幕寬度大于 480px */ /* 樣式代碼 */ } @media (min-width: 768px) { /* 平板豎屏屏幕寬度大于 768px */ /* 樣式代碼 */ } @media (min-width: 1024px) { /* 筆記本屏幕寬度大于 1024px */ /* 樣式代碼 */ } @media (min-width: 1200px) { /* 大型桌面電腦屏幕寬度大于 1200px */ /* 樣式代碼 */ }
上面是一些常見的媒體查詢尺寸,通過設置不同的屏幕尺寸來適配不同的設備。注意,這里使用了 min-width 屬性,表示僅在大于等于指定尺寸時生效。如果要在小于指定尺寸時生效,可以使用 max-width 屬性。
除了上面的尺寸和屬性,還有其他可用的媒體查詢選項,如設備方向,設備分辨率等。在實際開發中,可以根據需要進行選擇和組合,以實現最優的排版效果。
上一篇mysql的int默認值
下一篇css 子元素布局