css - 相对于屏幕尺寸的位置
问题描述
在我开始解释我的问题之前,我只是想说即使这个主题已经存在我还没有找到任何有效的解决方案,这个问题现在已经阻塞了 1 周,我真的需要帮助。所以问题是我开始创建一个网站,我在不同的屏幕分辨率上尝试了它,但它只适用于我,不同的元素会变得疯狂并做奇怪的事情,每个都在另一个等等......这是我的代码 :
@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>
感谢帮助 !
解决方案
您使用固定位置。这会引起你的问题。您应该针对不同的屏幕尺寸使用媒体查询。我建议您使用引导程序或类似的具有网格系统的东西。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/
对不起,我的英语不好。
推荐阅读
- forms - 在 Vue JS 中保留输入值以进行验证
- apache-spark - 并行将数据写入 parquet 格式
- python - 如何使用 Regex findall 查找多个模式?
- gnuplot - gnuplot 中的极坐标图
- python - 从 JSON 以编程方式分配类属性的最佳方法
- node.js - 尝试将 Nightmare .type() 与只能通过名称获取的元素一起使用
- android - 在 android 中使用 tensorflow.js 模型
- python - 我试图在两个日期之间获得几天,但它不起作用
- ios - 如何快速密码保护 PDF / 加密 PDF
- python - 删除绘图中不必要的垂直空白