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

Answer 2

您可以计算屏幕高度＆amp;宽度并设置DIV的高度和宽度。

//Calculate screen height and width
var winWidth=$( window ).width();

positionFromLeft=(winWidth - divWidth)/2;
positionFromRight=(winWidth - divWidth)/2;

这适用于所有决议。现在你可以从左和右设置div位置。现在你的div将出现在中心。

Answer 3

使用CSS3中指定的视口单元，首先必须设置视口元标记：

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

然后在CSS中（不使用媒体查询）将div的宽度或您拥有的任何元素设置为100vw（即视口宽度的100％），然后您可以将子元素设置为百分比以保持响应性。

Answer 4

制作

style="height:66.67vh;"

调整原始窗口大小时应调整窗口大小。

如何为任何屏幕尺寸调整div和内容的大小？

4 个答案: