HTML自动适应所有屏幕

我刚刚完成了一个手机应用程序的界面设计，我使用的大小是 750w乘1334H 问题是它在应用程序测试屏幕上的显示太大了

我需要在不丢失任何分辨率的情况下在所有屏幕上自动调整设计 下面是CSS代码

.username{
背景#397ba5；
边界：无；
宽度：286；
身高：82；
颜色：白色；
字号：24；
}
.密码{
背景#397ba5；
边界：无；
宽度：283；
身高：81；
颜色：白色；
字号：24；
}
.memberlogin{
背景色：#fc4988；
边界：无；
宽度：472；
身高：85；
颜色：白色；
字号:40 ;；
字体：粗体；
}

无标题-1

响应式设计通常是首选，但我认为您可以用它做任何事情

<meta name="viewport" content="width=320" />

其中320是视图中的像素数（与设备无关）

请参见使用CSS规则。在这里，您可以对最小屏幕宽度为X时使用的样式进行编码

@media screen and (min-width: 480px) {
    .username {
        background: #397ba5;
        border: none;
        width: 286;
        height: 82;
        color: white;
        font-size: 24;
    }
    .password {
        background: #397ba5;
        border: none;
        width: 283;
        height: 81;
        color: white;
        font-size: 24;
    }    

    .memberlogin {
        background-color: #fc4988;
        border: none;
        width: 472;
        height: 85;
        color: white;
        font-size: 40;
        font: BOLD;
    }
}

---

为了使您的应用程序针对每个屏幕大小重新缩放，您需要使用媒体查询。媒体查询的一个示例如下：

最小宽度

@media only screen and (min-width: 330px)  {...}

@media only screen and (max-width: 330px)  {...}

这实际上意味着：

“如果

[设备宽度]

大于或等于

[指定的#]

，则执行

{…}

”

因此，如果实际的“

设备宽度

”为

320px

，此条件将返回false

如果

320px

大于或等于

330px

，则执行

{…}

最大宽度

@media only screen and (min-width: 330px)  {...}

@media only screen and (max-width: 330px)  {...}

翻译为：

“如果

[设备宽度]

小于或等于

[指定的#]

，则执行

{…}

”

因此，根据第二个示例，如果“

设备宽度

”为

320px

，则条件为真：

如果

320px

小于或等于

330px

，则执行

{…}

备选方案-使用Twitter引导

我最喜欢的处理开发响应性应用程序的方法是使用

Twitter引导程序

Bootstrap具有即时可用的移动友好性和响应性。Bootstrap是一个免费的开源前端web框架 设计网站和web应用程序。它包含HTML和 基于CSS的排版、表单、按钮和导航设计模板 和其他接口组件，以及可选的JavaScript 扩展

你可以找到

此外，代码没有正确定义高度和宽度。请查看更新的代码

.username {
    background: #397ba5;
    border: none;
    width: 286px;
    height: 82px;
    color: white;
    font-size: 24;
}
.password {
    background: #397ba5;
    border: none;
    width: 283px;
    height: 81px;
    color: white;
    font-size: 24;
}

.memberlogin {
    background-color: #fc4988;
    border: none;
    width: 472px;
    height: 85px;
    color: white;
    font-size: 40;
    font: BOLD;
}

您还可以使用百分比

width: 20%;

好的，我明白了。你没有css的基本知识。我再给你举一个例子。您没有正确执行媒体查询。这里有一个例子

媒体查询不会包装所有css。你制定css规则。然后，当某些规则需要根据不同的屏幕大小进行更改时，您可以创建一个媒体查询，并将需要更改的特定规则放在其中。这里有一个例子

我将更改小于

100px

的屏幕上

div

的宽度，请特别注意

px

。这就是我们指定尺寸的方式。在很多情况下，但并非所有情况下，我们都使用

px

在本例中，请注意，我们创建了

.div1

，然后创建了一个媒体查询，并将类

div1

以不同的宽度放置在其中

.div1 {
  width: 300px;
  background: red;
  color: black;
}

@media only screen and (max-width: 330px)  {
 .div1 {
  width: 100px;
  background: red;
  color: black;
}  
}

此文件的输出

例一。默认css输出，

例二。使用媒体查询

100px

下的屏幕大小。

---

请注意，div的宽度根据屏幕的大小而不同

没有解决问题没有解决问题添加@media screen时CSS停止工作，并且（最小宽度：480px）我将其放在代码中并工作，因此请检查您的错误，并检查如何使用@media。我在回答中放了一个链接，非常感谢，但是如果你看一下HTML代码，除了我使用CSS的输入，每张图片都有自己的宽度和高度。注：我一直在使用adobe Photoshop对指定人员进行剪切。每次我完成设计时，我都会遇到这样的问题：解析力很强，解释力很强，但我是新手，我不知道怎么做。你能用这种方式为我修改代码吗？我知道你是怎么做的？你应该编码并完成这项工作。。不是我们。。。。这不是一个教初学者如何编程的页面。请检查规则。@Nick要让你的应用程序正常运行，有很多事情要做，我们任何人都不可能用一点代码来帮你完成。我们只能回答一些小问题。您没有正确定义元素的宽度和高度。你需要回到基础，花时间去学习。如果您有其他问题，请正确设置格式，我们将帮助您。试着问一些小问题，而不是像如何让我的整个网站以某种方式工作这样广泛的问题。如果我能为你做点什么，请告诉我，伙计。直到那时，接受我的答案，并用它来学习。也可以使用谷歌。要清楚。用一行代码无法解决您的问题。你需要增加很多。所以你必须阅读和学习我从字面上理解了你的css，并在我的答案中添加了正确的宽度和高度。看看我答案中的不同。看看它所说的宽度的任何地方，注意它末尾的px。