在移動(dòng)互聯(lián)網(wǎng)時(shí)代，很多用戶在使用手機(jī)觀看網(wǎng)站的同時(shí)也會(huì)將手機(jī)內(nèi)容投屏至電視或其他更大的屏幕上。這也導(dǎo)致了移動(dòng)端網(wǎng)站需要適配不同的屏幕尺寸，同時(shí)考慮到用戶通過(guò)投屏來(lái)瀏覽網(wǎng)站，那么CSS媒體查詢?cè)谶@種情況下就非常有用。

CSS媒體查詢可以根據(jù)設(shè)備屏幕尺寸或方向判斷并應(yīng)用不同的樣式規(guī)則。因此，在投屏這種情況下，可以利用媒體查詢來(lái)定義投屏后的樣式，以適配更大的屏幕尺寸。

在編寫媒體查詢時(shí)，可以針對(duì)一些常見的分辨率設(shè)置樣式。例如，在分辨率大于等于1920px時(shí)，可以設(shè)置更大的字體、更大的圖片和更寬的容器以適應(yīng)電視屏幕。同時(shí)，在投屏后，盡可能減少對(duì)用戶體驗(yàn)的影響，在樣式調(diào)整后，可盡可能保持主要內(nèi)容的排版結(jié)構(gòu)不變，使用戶感受到更好的一致性。

@media only screen and (min-width: 1920px) {
body {
font-size: 26px;
line-height: 1.5;
background-size: cover;
}
.container {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 50px;
}
.card {
width: 100%;
height: auto;
img {
width: 100%;
}
h3 {
font-size: 28px;
margin: 10px 0;
}
p {
font-size: 24px;
line-height: 1.5;
color: #666;
}
}
}

在這個(gè)示例代碼中，我們通過(guò)媒體查詢判斷設(shè)備寬度是否大于等于1920px，如果是，則調(diào)整頁(yè)面樣式。頁(yè)面字體、行間距和間距等大小相關(guān)樣式全部調(diào)整，并在容器上設(shè)置了網(wǎng)格布局以使內(nèi)容更好的排列。

最后，在進(jìn)行CSS媒體查詢時(shí)，建議采用響應(yīng)式布局來(lái)完成。響應(yīng)式布局可以根據(jù)用戶設(shè)備的屏幕大小，動(dòng)態(tài)的調(diào)整頁(yè)面樣式，以在不同屏幕上呈現(xiàn)最佳的用戶體驗(yàn)。