Question

在我开始解释我的问题之前，我只是不想说即使这个主题已经存在我还没有找到任何解决方案，这个问题现在已经阻止了一周，我真的需要帮助。所以问题是我开始创建一个网站，我尝试了不同的屏幕分辨率，但它只适用于我的，不同的元素是疯狂的做奇怪的事情，每个去另一个等... 这是我的代码：

@font-face {
    font-family: Comfortaa;
    src: url(Comfortaa-Regular.ttf);
}
@font-face
{
	font-family: Comfort;
	src: url(ChampEtLimou.ttf);
}
body
{
 background-color : rgb(255,255,255);
}
.titre3
{
	color : #0183c0;
	font-family : Comfortaa;
	position:  fixed;
	font-size :50px;
	z-index:10;	
	left : 43.2%;
	top:-6%;

}
.titre1
{
	color : #6597ed;
	font-family : Comfortaa;
	position:  fixed;
	left : 43.2%;
	top:3%;
	font-size : 30px;
	z-index:10;
}
.bacc
{
	font-family : Comfortaa;
	position : fixed;
	left : 45%;
	top : 12%;
	color:#ffffff;
	-moz-box-shadow:inset 0px 1px 0px 0px #7a8eb9;
	-webkit-box-shadow:inset 0px 1px 0px 0px #7a8eb9;
	box-shadow:inset 0px 1px 0px 0px #7a8eb9;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #196499), color-stop(1, #1a6ba1));
	background:-moz-linear-gradient(top, #196499 5%, #1a6ba1 100%);
	background:-webkit-linear-gradient(top, #196499 5%, #1a6ba1 100%);
	background:-o-linear-gradient(top, #196499 5%, #1a6ba1 100%);
	background:-ms-linear-gradient(top, #196499 5%, #1a6ba1 100%);
	background:linear-gradient(to bottom, #196499 5%, #1a6ba1 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#196499', endColorstr='#1a6ba1',GradientType=0);
	background-color:#196499;
	border:1px solid #314179;
	display:inline-block;
	cursor:pointer;
	font-size:10px;
	font-weight:bold;
	padding:11px 23px;
	z-index:10;
}
.bacc:hover
{
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #1a6ba1), color-stop(1, #196499));
	background:-moz-linear-gradient(top, #1a6ba1 5%, #196499 100%);
	background:-webkit-linear-gradient(top, #1a6ba1 5%, #196499 100%);
	background:-o-linear-gradient(top, #1a6ba1 5%, #196499 100%);
	background:-ms-linear-gradient(top, #1a6ba1 5%, #196499 100%);
	background:linear-gradient(to bottom, #1a6ba1 5%, #196499 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1a6ba1', endColorstr='#196499',GradientType=0);
	background-color:#1a6ba1;
}
.bacc:active
{

}
.ball 
{
	position: fixed;
    width : 2.7%;
	height:5%;
	left:40%;
	top:2%;
	z-index:10;
}
.immenu
{
	position:relative;
	top:15em;
	left:3em;
	width:30%;
	height:30%;
	z-index:2;
	padding: 8px 10px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset rgba(0,0,0,0.35) 3px 3px 13px;
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    transition: all 0.7s;
}
.safalogo
{
	position:fixed;
	top:5%;
	left:5%;
	width:6%;
	height:5%;
	z-index:10;
}
.sanologo
{
	position:fixed;
	top:5%;
	left:12%;
	width:6%;
	height:8%;
	z-index:10;
}
.banner
{
	position:relative;
	top:-7em;
	left:-5em;
	width:100em;
	height:25em;
	z-index:0;
}
.voile
{
	position:relative;
	top:-32.2em;
	left:-1em;
	width:100em;
	height:25em;
	z-index:1;
	opacity:0.5;
}
.speechtitre
{
	color : white;
	font-family : Comfort;
	position:  relative;
	margin-left:0;
	margin-top:0;
	left : -1.7em;
	top:-30em;
	font-size : 30px;
	z-index:1;
	font-weight:bold;
}
.speechtex
{
	color : white;
	font-family : Comfort;
	position:  relative;
	left : 29em;
	top:-45em;
	font-size : 20px;
	z-index:1;
}
.ligne
{
	position:fixed;
	width:100%;
	height:0.2%;
	top:20%;
	left:0%;
	z-index:10;
}
.faceblogo
{
	position:fixed;
	width:3.8%;
	height:6%;
	left:90%;
	top:6%;
	z-index:10;
}
.bfixe
{
	position:fixed;
	width:100%;
	height:20%;
	top:0%;
	left:0%;
	z-index:9;
	opacity:0.75;
}
body
{
	overflow-x: hidden;
	padding:auto;
	border:auto;
}

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Kibera Black Stars</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">
  <link rel="stylesheet" href="Style.css">
  <style type="text/css">a:link{text-decoration:none}</style>
</head>
<body>
	<p class="titre3">Kibera</p>
	<P  class="titre1">BlackStars</P>
	<img src="images/ball.png" alt="ballon" class="ball">
	<a href="Site.html" class="bacc">Accueil</a>
	<img src="images/safalogo.png" alt="safalogo" class="safalogo">
	<img src="images/sanologo.png" alt="sanologo" class="sanologo">
	<img src="images/ligne.jpg" alt="ligne" class="ligne">
	<img src="images/bannierfixe.jpg" alt="bannierfixe" class="bfixe">
	<p><a href="https://www.facebook.com/BLACKSTARSKIBERA" target="_blank"><img src="images/faceblogo.png" alt="faceblogo" class="faceblogo"></a></p>
	<img src="images/immenu.jpg" alt="immenu" class="immenu">
	<img src="images/banner.jpg" alt="banner" class="banner">
	<img src="images/voile.jpg" alt="voile" class="voile">
	<p align="center" class="speechtitre">Faut mettre un titre la !</p>
	<p class="speechtex">Faut mettre un texte ici !</p>
</div>
</body>
</html>

感谢您的帮助！

Answer 1

您使用固定位置。这是你的问题。您应该使用不同屏幕尺寸的媒体查询。我建议你使用bootstrap或类似的东西有一个网格系统。 Bootstrap具有用于xs，xm，md，xl等屏幕尺寸的网格系统。您也可以隐藏一些较小屏幕的元素。

例如，我们想要大屏幕并排四个div。在中型屏幕上，我们想要并排显示其中的三个。

<div class='container'>
  <div class='row'>
    <div class='col-xl-3 col-md-4 col-sm-6'>
      <img src="https://via.placeholder.com/350x150">
    </div>
    <div class='col-xl-3 col-md-4 col-sm-6'>
      <img src="https://via.placeholder.com/350x150">
    </div>
    <div class='col-xl-3 col-md-4 col-sm-6'>
      <img src="https://via.placeholder.com/350x150">
    </div>
    <div class='col-xl-3 col-md-4 col-sm-6'>
      <img src="https://via.placeholder.com/350x150">
    </div>
    <div class='col-xl-3 col-md-4 col-sm-6'>
      <img src="https://via.placeholder.com/350x150">
    </div>
    <div class='col-xl-3 col-md-4 col-sm-6'>
      <img src="https://via.placeholder.com/350x150">
    </div>
  </div>
</div>

JSFiddle演示：

有关详细信息，请访问：https://getbootstrap.com/docs/4.1/layout/overview/

抱歉我的英语不好。

Answer 2

刚刚重新创建了一些基本占位符的布局。也许你可以使用基础结构并在此基础上扩展/构建。

预览JS Fiddle：https://jsfiddle.net/b4vez5qx/

注意：这不是响应，它只是弹性布局。

HTML

<header>
<div class="logo">logo</div>
  site title
  <div class="facebook">FaceBook</div>
</header>
<div class="main">
  <div>
    <div class="imgCont"><img src="via.placeholder.com/250x200/"> </div>
    <div class="headText">
      <h3>Heading</h3>
      <div>
        Dummy text Dummy text Dummy text Dummy text Dummy text
      </div>
    </div>
  </div>
</div>

CSS

*{margin:0; padding:0; font-family:arial}
header{border-bottom:1px solid blue; text-align:center; height:50px; background:#f4f4f4; padding:25px 10px 0 20px;}
header div{display:inline-block;}

.logo{float:left}
.facebook{float:right}
.sitetitle{}

.main{background:#0e1436; height:250px;}
.imgCont{padding:10px;float:left}
.imgCont img{border:8px solid #1b344b}

.headText{padding:10px; color:#fff;}

希望这有帮助

相对于屏幕尺寸的位置

2 个答案: