如何在CSS中使同一网页可用于具有不同屏幕分辨率的不同设备

Question

我正在尝试制作一个网页，但不知道如何使其同时兼容不同的屏幕分辨率，例如电脑和移动设备。有官方的方法可以实现吗？或者我应该只需要玩弄数字： Top: vh;并left: vw;使其发挥作用。如果有更好的选择，请告诉我。处理所有这些数字确实很困难。

Answer 1

如果您喜欢编写自己的 CSS，Razu 的解决方案是理想的选择。
还有一些框架和库可以为您进行计算（Bootstrap、Flexbox和CSS-grid是一些很好的例子）。

使用它们的缺点是您需要一些 CSS 知识才能根据您的喜好调整它们。

Answer 2

Bootstrap 是构建响应式网页的最佳工具，并且它是开源的。

Answer 3

您可以使用媒体查询在不同设备的结果中显示相同的网页。这是您可以使用的媒体查询：

/* 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 */

}

Answer 4

您可以通过此格式的媒体查询来完成

// 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 }