Question

我希望从现实的角度来看具有固定尺寸的元素 - 例如6 x 3 cm - 适用于正在观看它的人。所以我将其设置为400 X 200 px - 然后围绕此元素更改我的布局（对于较小的显示器等单列显示）。

当我更改桌面浏览器的大小时这很好用 - 元素看起来相同，但布局发生了变化 - 但是当我打开开发工具并模拟移动设备时，元素看起来要小得多。

有没有简单的方法可以跨设备修复元素的（真实世界）大小？

我真的坚持这一点（我确定非常简单），所以任何帮助都会非常感激！

例如：

Answer 1

在你的css中添加这个

height

}

注意：这个是针对特定设备的最大值为480px，您也可以添加其他大小相似的方式。并且不要忘记改变{{1}}＆amp;的价值。 {{1}}根据您的要求。

Answer 2

编辑/更改答案（看到您添加的图像后）：

首先，将其放入HTML代码的<head>标记中：

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

如果添加页面，页面将不会缩小到视口（即移动屏幕）的大小。

然后阅读有关如何使用媒体查询......

Answer 3

您有两种方法可以解决此问题：

了解如何编写自己的媒体查询 http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
使用像bootstrap http://getbootstrap.com/这样的框架并管理可见性类

<button type="submit" class="btn btn-primary btn-sm btn-block visible-xs">My button</button>
<button type="submit" class="btn btn-primary btn-lg btn-block visible-sm visible-md visible-lg">My button</button>

如何跨设备修复元素的大小

3 个答案: