CSS視口選擇器常用于響應式網頁設計,可以根據設備屏幕大小來設定不同的樣式。常用的視口選擇器有兩個:
@media screen and (max-width: 768px) { /* 在窗口寬度小于等于768px時生效 */ /* 樣式代碼 */ }
@media screen and (min-width: 768px) { /* 在窗口寬度大于等于768px時生效 */ /* 樣式代碼 */ }
以上兩個選擇器可以結合使用,來達到不同窗口大小時不同的樣式效果。例如:
@media screen and (max-width: 768px) { /* 窗口小于等于768px時生效 */ body { font-size: 16px; } } @media screen and (min-width: 768px) { /* 窗口大于等于768px時生效 */ body { font-size: 18px; } }
上述代碼表示,在窗口小于等于768px時字體大小為16px,在窗口大于等于768px時字體大小為18px。
使用視口選擇器,可以讓網頁在不同設備上顯示出最佳的效果,增加用戶體驗。當然,還有其他視口選擇器可以使用,需要根據實際需求進行選擇。
上一篇css控制圖片圓圈
下一篇css規定img圖片大小