CSS3 Media Query,即CSS3媒體查詢,是用于實現響應式設計的重要工具。通過媒體查詢,可以根據不同屏幕尺寸和設備類型,動態地為網頁應用不同樣式,從而讓網頁更加適應不同的終端設備。
/* 使用媒體查詢添加樣式 */ @media screen and (max-width: 768px) { /* 在屏幕寬度小于等于768px時生效 */ body { background-color: #f7f7f7; } } @media screen and (min-width: 769px) and (max-width: 1024px) { /* 在屏幕寬度為769px到1024px之間時生效 */ body { background-color: #f0f0f0; } } @media screen and (min-width: 1025px) { /* 在屏幕寬度大于等于1025px時生效 */ body { background-color: #e5e5e5; } }
上述代碼展示了如何使用媒體查詢為不同屏幕尺寸設置不同的背景顏色。通過設置合適的媒體查詢,我們可以實現更加精細化的響應式設計,讓用戶在不同設備上都能獲得最佳的網頁瀏覽體驗。
上一篇php oss上傳
下一篇php outlook