我如何使我的网页调整其根据屏幕大小?

Question

在我的桌面显示器上，这个网站是完美的，然而，当我在笔记本电脑上查看它时，内容是不合适的

<meta name="viewport" content="width=device-width,initial-scale=1.0" charset="utf-8">

我试过了。

width="100vw" height="100vh"

我也试过了

尝试设置容器的最小和最大宽度/高度。这些都不起作用。有人有解决办法吗?

Answer 1

使用Media查询，或者在框架的情况下使用相关的类

标准媒体查询大小

320px — 480px: Mobile devices.
481px — 768px: iPads, Tablets.
769px — 1024px: Small screens, laptops.
1025px — 1200px: Desktops, large screens.
1201px and more — Extra large screens, TV.

bootstrap框架示例

col-xs for smaller Mobile phone (devices with resolutions < 576px);
col-sm for larger mobile phones (devices with resolutions ≥ 576px);
col-md for tablets (≥768px);
col-lg for laptops (≥992px);
col-xl for desktops (≥1200px)

Answer 2

问题

您声明的meta标签不正确

• charset声明文档的字符编码
• name和content可以一起使用来提供文档元数据

注意:字符编码必须完全位于第一个字符内1024字节的文档。

<标题>解决方案

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

MDN