html - 对所有设备保持相同的大小。 HTML & CSS

标签 html css sizing

我想知道如何在所有设备上保持元素(例如立方体)的大小。当您调整浏览器窗口大小时,元素将保持相同的“形式”,但会变小。我的意思是,当您水平调整浏览器窗口大小时,元素(f.ex 立方体)将保持相同的“形式”。所以它不会比高更宽。

我知道我必须在宽度和高度上使用百分比而不是像素。但是当我这样做时,元素当然仍然是当前设备或屏幕的百分比。我非常不擅长描述,所以我要举一个例子:当我在学校用 HTML 和 CSS 制作一个计算器时,它完美地适合屏幕。但是学校的屏幕是正方形的(宽度与高度相同)。家里的屏幕是矩形的(宽度和高度不一样)。所以家里的计算器太宽了。你现在明白了吗?如果你没有,请告诉我。

这是它在我的屏幕主页上的样子的图片:Full sized browser window home窗口宽度缩小:Smaller in width browser window at home

抱歉描述不当..和英语。

最佳答案

我不知道我是否明白你的意思,但如果你的意思是“保持纵横比”,你应该试试 this . 将您的元素包裹在另一个容器中,在容器底部使用填充,让您的元素占据它的所有空间。

关于html - 对所有设备保持相同的大小。 HTML & CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41901569/

相关文章:

html - CSS 中的 Font Awesome 边框

css - -ms-flex-positive 不是已知的 CSS 属性

asp.net - 如何使模态弹出窗口随页面滚动其内容?

css - 如何调整没有内容的相对div的大小?

Swift - 自动布局 - UIView - 内部尺寸混淆

html - tcpdf (html2pdf) 未正确生成表格边框

javascript - 获取 <TD> 的内容并使用 jQuery/JS 对其进行相应的乘法/除法

HTML CSS - 输入 radio 居中和垂直对齐

css - 在创建 react 应用程序中扩展 Bootstrap

html - 下拉列表中的元素不可点击