我正在嘗試制作一個網頁，但不知道如何使其同時兼容不同的屏幕分辨率，例如電腦和移動設備。有官方的方法可以實現嗎？或者我應該只需要玩弄數字： Top: vh;并left: vw;使其發揮作用。如果有更好的選擇，請告訴我。處理所有這些數字確實很困難。
4 回答
繁花不似錦
TA貢獻1851條經驗 獲得超4個贊
如果您喜歡編寫自己的 CSS，Razu 的解決方案是理想的選擇。
還有一些框架和庫可以為您進行計算（Bootstrap、Flexbox和CSS-grid是一些很好的例子）。
使用它們的缺點是您需要一些 CSS 知識才能根據您的喜好調整它們。
三國紛爭
TA貢獻1804條經驗 獲得超7個贊
您可以使用媒體查詢在不同設備的結果中顯示相同的網頁。這是您可以使用的媒體查詢：
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* STYLES GO HERE */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* STYLES GO HERE */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* STYLES GO HERE */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* STYLES GO HERE */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* STYLES GO HERE */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* STYLES GO HERE */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* STYLES GO HERE */
}
/* iPhone 5 (portrait & landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* STYLES GO HERE */
}
/* iPhone 5 (landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
/* iPhone 5 (portrait)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* STYLES GO HERE */
}
白豬掌柜的
TA貢獻1893條經驗 獲得超10個贊
您可以通過此格式的媒體查詢來完成
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { write css here }
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { write css here }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { write css here }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { write css here }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { write css here }
- 4 回答
- 0 關注
- 210 瀏覽
添加回答
舉報
0/150
提交
取消