CSS中的屏幕寬度減指的是使用 CSS Media Queries 時,設置 viewport 的大小減去一定的像素值,從而達到不同屏幕尺寸下的適配效果。
@media screen and (max-width: 768px) { /* 當屏幕寬度小于等于 768px 時,改變樣式 */ }
上述代碼片段中,設置了一個媒體查詢,當屏幕寬度小于等于 768px 時,將改變樣式。這里的 768px 就是屏幕寬度減去的像素值。
通常,我們會根據(jù)當前流行的移動設備的屏幕尺寸設置不同的值,比如:
@media screen and (max-width: 480px) { /* 當屏幕寬度小于等于 480px 時,改變樣式 */ } @media screen and (max-width: 768px) { /* 當屏幕寬度小于等于 768px 時,改變樣式 */ } @media screen and (max-width: 990px) { /* 當屏幕寬度小于等于 990px 時,改變樣式 */ } @media screen and (max-width: 1200px) { /* 當屏幕寬度小于等于 1200px 時,改變樣式 */ }
以上分別是針對屏幕寬度為 480px、768px、990px 和 1200px 的情況進行了媒體查詢,并在對應情況下改變樣式。
當屏幕尺寸發(fā)生變化時,CSS 樣式相應進行了調(diào)整,從而保證了網(wǎng)站的響應式設計,提升了用戶體驗。