CSS3中的媒介查詢是一個重要的技術,它可以使我們在不同的設備和屏幕尺寸中調整網站的展示效果。在移動設備時代,媒介查詢越發重要了。 媒介查詢主要通過media規則來定義,可以根據不同的媒介類型和屏幕尺寸設置不同的樣式。其中,常見的媒介類型包括screen、print、speech等。 下面是一個使用媒介查詢的例子,當屏幕寬度小于等于768px時,文字顏色變為紅色。
@media screen and (max-width: 768px) { p { color: red; } }此外,還可以通過媒介查詢來定義不同屏幕尺寸下不同的布局方式。比如,當屏幕寬度小于等于768px時,將兩個塊設置為垂直排列。
@media screen and (max-width: 768px) { .block1 { display: block; } .block2 { display: block; margin-top: 10px; } }通過媒介查詢的靈活應用,我們可以讓網站在不同的設備和屏幕尺寸下呈現不同的效果,提高用戶體驗。同時,也能夠在一定程度上提高網站的適應性和可用性,為用戶帶來更好的訪問體驗。