HTML / CSS移动兼容性

Question

几天前，我在业余时间开始学习HTML / CSS并编写自己的测试网站。在某些时候，当我尝试在智能手机上访问我的网站时遇到了问题。在这里Here you can see that the Picture is shifted above the border。

桌面上的一切工作正常，但正如您所看到的，它已经移动到移动设备上。我尝试了几种方法，但没有一种能解决问题。自从我刚刚开始，我没有其他想法。

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

先感谢您

Answer 1

你的问题不仅与手机有关，我担心。这就是浮动时发生的情况，容器元素失去其布局。要解决这个问题，你只需要回复申请，例如overflow: hidden。

但我想你仍然希望在个人数据的右边有img，因为你必须将图像放在同一容器中，应用overflow: hidden。像这样：

/*SCHRIFTART*/

@font-face {
	font-family: 'Levenim MT';
	font-style: normal;
	font-weight: normal;
	src: local('Levenim MT'), url('ufonts.com_levenim-mt.woff') format('woff');
}


/*ALLGEMEIN*/


* {
	margin: 0;
	padding: 0;


}

/* CONTENT */

#PB-Bild {
    float: right;
    margin-top: 6px;
    margin-right:7.5px;
}

#Information {
overflow:hidden;
    height: 30%;
    width: 98%;
    border: 7px outset grey;
    background-color:whitesmoke;
    font-family: 'Arial Rounded MT';
    padding-left: 5px;
    color:darkblue;
}

.was {
    font-size: 150%;
    font-weight:900;
}
p.was::first-letter {
    color:brown;
    font-size:160%;
}

.was {
    font-family:Arial;
    color: black;
}

.uText {
    font-family:Arial;
    background-color:ivory;
    font-size:120%;
}

<div id="Information">
<img id="PB-Bild" src="https://fakeimg.pl/300x350">
    <p class="was">Name:</p>
    Domenic Malz <br>
    <p class="was">Alter:</p>
    16 Jahre <br>
    <p class="was">Geboren am:</p>
    29.04.2002  <br>
    <p class="was">Wohnort:</p>
    Berlin <br>
    <p class="was">E-Mail</p>
    [email protected] <br>
</div>

Answer 2

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

Answer 3

如果向#banner2添加一些属性，则可以确保背景不会自动缩放。

#banner2 {
  …
  background-size: cover;
  background-position: center;
}