css - 如何调整任何屏幕尺寸的 div 和内容？

Question

我正在 ryan.tylerdetmers.com/cmd 上工作

我想让中间的 div 调整大小以适应人们的屏幕尺寸。因此，无论您使用的是 iPhone 还是台式机，它都非常适合。我还希望该 div 中的内容可以调整大小。

我不确定我是否必须对每个单独的作品做些什么，或者是否有什么东西可以以更简单的方式为我做这件事。

请帮忙。

谢谢

Answer 1

这称为响应式设计。有了这个，您的网站会根据打开它的设备调整它的大小。

首先你必须在你的 HTML 中包含这个:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

更多关于 viewport here.

在您的 CSS 中，一些常见的媒体查询:

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Here you should set what size you want your div to be 
when viewed on smartphone */
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

媒体查询的完整列表 here