个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
这似乎是一个愚蠢的问题，但我对编码还很陌生，所以请多多包涵。
我正在编写一个 Ionic 应用程序，但不知道如何保持 HTML 元素的 CSS 比例。例如，我一直在使用如下代码:
.login-button {
margin-top: 25px;
margin-bottom: 30px;
width: 23px;
height: 20px;
}
我不确定如何编写代码，以便在不同尺寸的手机上使用该应用时所有比例保持不变。
我能做什么？
谢谢!
最佳答案
看这个例子
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Responsive Four Column Layout</h2>
<p><strong>Resize the browser window to see the responsive effect.</strong> On screens that are 992px wide or less, the columns will resize from four columns to two columns. On screens that are 600px wide or less, the columns will stack on top of each other instead of next to eachother.</p>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#ccc;">
<h2>Column 3</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#ddd;">
<h2>Column 4</h2>
<p>Some text..</p>
</div>
</div>
</body>
</html>关于html - 如何在移动应用程序上保持设计比例？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52398685/
26
4
0
关闭。此题需要details or clarity 。目前不接受答案。 想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 7 年前。 Improve th
所以我正在开发一个黑 jack 程序，但我有点卡住了。我会警告大家，我对编程真的很陌生，而且，我正在项目中期......所以有一些松散的结局和未使用的变量，以及一些不必要的逻辑(用于测试)，但这就是我
我正在尝试创建一个可用作 OpenGL 测试工具的示例程序。到目前为止，我的那个似乎可以工作，但似乎忽略了通过统一变量 MVPMatrix 传递的 MVP 矩阵。当我添加代码以读回制服并检查它是否确实
感谢您帮助我，这是有关我的代码的部分。 printf("Thank you, now please enter the logic gate"); scanf("%s", &C); if (C ==
public static void ejemplosString(String palabra){ char[] letras = palabra.toCharArray();
所以，我有一个 php 应用程序，通过 cgi 和 nginx 运行。我有一个 .jar 程序，用于在条形码打印机(Zebra)上打印条形码，猜猜看是什么!。 我的 php 应用程序使用 exec()
我遇到的唯一问题是 getAll() 方法，它似乎在 PersonnelController 类中的位置立即运行。我也曾在其他很多地方尝试过，但都没有成功。 setAll() 方法看起来不错，我已经测
我是一名优秀的程序员,十分优秀！