如何在CSS中使相同的网页可用于具有不同屏幕分辨率的不同设备[重复]答案

【问题标题】：How to make same webpage available for different devices with different screen resolution in CSS [duplicate]如何在CSS中使相同的网页可用于具有不同屏幕分辨率的不同设备[重复]
【发布时间】：2020-03-11 23:54:16
【问题描述】：

我正在尝试制作网页，但不知道如何使其同时兼容不同的屏幕分辨率，例如电脑和手机。

有官方的方法可以做到吗？

或者我应该只需要玩弄以下数字： Top: vh; 和 left: vw; 使其工作。

如果有更好的选择，请告诉我。处理所有这些数字真的很困难。

【问题讨论】：

标签： html css

【解决方案1】：

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

https://getbootstrap.com/

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您可以通过这种格式的媒体查询来做到这一点

// 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】：

您可以针对不同的屏幕使用媒体查询。例如

For mobile screen you can use:
@media screen only(max-width:576px){ //Your css code//}
And For Medium screens:
@media screen only(max-width:768px){ //Your css code//}

【讨论】：

【解决方案5】：

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

/* 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 &amp; 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 */
}

还可以点击以下链接了解更多信息： Media query for standard devices.

【讨论】：