HTML/CSS移动兼容性

几天前，我开始在业余时间学习HTML/CSS，并编写自己的测试网站。当我试图用智能手机访问我的网站时，我遇到了一个问题。在这里

在桌面上一切正常，但正如你所见，它已经在移动设备上移动了。我尝试了几种方法，但没有一种能解决问题。因为我刚刚开始，我没有其他想法

我不想发布我所有的代码，所以问题是

---

提前感谢您

如果您向

#banner2

添加一些属性，您可以确保背景不会自动缩放

#横幅2{
…
背景尺寸：封面；
背景位置：中心；
}

---

您带来的问题称为响应性。有很多方法可以让你的网站响应，当我看到你的代码时，首先我注意到，在你的css中，你使用的是“px”值，它们是像素值，意味着它们不会随着屏幕的大小而缩放。您应该熟悉响应性更强的值，如“vw”和“vh”，它们会根据屏幕大小进行缩放

恐怕你的问题不仅仅与手机有关。 这就是浮动时发生的情况，容器元素将丢失其布局。要修复它，您只需将其返回，例如应用

溢出：隐藏

但是我想你还是想把img放在个人数据的右边，因为你必须把图像放在同一个容器中，应用
溢出：隐藏
。
就这样,


/*SCHRIFTART*/
@字体{
字体系列：“Levenim MT”；
字体风格：普通；
字体大小：正常；
src:local（'Levenim MT'）、url（'ufonts.com_Levenim-MT.woff'）格式（'woff'）；
}
/*阿尔格梅因*/
* {
保证金：0；
填充：0；
}
/*内容*/
#画报{
浮动：对；
边缘顶部：6px；
右边距：7.5px；
}
#信息{
溢出：隐藏；
身高：30%；
宽度：98%；
边框：7px，灰色；
背景色：白烟；
字体系列：“Arial圆角MT”；
左侧填充：5px；
颜色：深蓝色；
}
.是{
字体大小：150%；
字号：900；
}
p、 是第一个字母{
颜色：棕色；
字体大小：160%；
}
.是{
字体系列：Arial；
颜色：黑色；
}
.uText{
字体系列：Arial；
背景颜色：象牙色；
字体大小：120%；
}

名称：
多梅尼克马尔兹

更改：
16贾哈尔

格博伦am:

29.04.2002

Wohnort：
柏林

电子邮件
postfach@domenicmalz.de

实际问题是什么？你打算实现什么？