HTML媒體查詢是前端開發中非常重要的一部分。通過使用媒體查詢,我們可以根據不同設備的屏幕大小和分辨率來改變網頁的布局和樣式,以達到更好的用戶體驗。下面是一些常用的HTML媒體查詢代碼。
/* 針對手機橫屏 */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) { /* 在這里寫你的代碼 */ } /* 針對iPhone 4 以上設備的高清屏幕 */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* 在這里寫你的代碼 */ } /* 針對iPad */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* 在這里寫你的代碼 */ } /* 針對大屏幕設備 */ @media only screen and (min-width : 1200px) { /* 在這里寫你的代碼 */ }
以上是一些常用的HTML媒體查詢代碼,可以根據需求進行修改。同時,在編寫媒體查詢時,也需要注意代碼的優化,以保證網頁的性能和響應速度。