如何在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 screenand (min-device-width : 320px)and (max-device-width : 480px) {/* STYLES GO HERE */}/* Smartphones (landscape) ----------- */@media only screenand (min-width : 321px) {/* STYLES GO HERE */}/* Smartphones (portrait) ----------- */@media only screenand (max-width : 320px) {/* STYLES GO HERE */}/* iPads (portrait and landscape) ----------- */@media only screenand (min-device-width : 768px)and (max-device-width : 1024px) {/* STYLES GO HERE */}/* iPads (landscape) ----------- */@media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : landscape) {/* STYLES GO HERE */}/* iPads (portrait) ----------- */@media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : portrait) {/* STYLES GO HERE */}/* Desktops and laptops ----------- */@media only screenand (min-width : 1224px) {/* STYLES GO HERE */}/* Large screens ----------- */@media only screenand (min-width : 1824px) {/* STYLES GO HERE */}/* iPhone 5 (portrait & landscape)----------- */@media only screenand (min-device-width : 320px)and (max-device-width : 568px) {/* STYLES GO HERE */}/* iPhone 5 (landscape)----------- */@media only screenand (min-device-width : 320px)and (max-device-width : 568px)and (orientation : landscape) {/* STYLES GO HERE */}/* iPhone 5 (portrait)----------- */@media only screenand (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 }