堆棧內存溢出
  簡體   English   中英

HTML & CSS 如何使整個頁面對所有人可見而無需縮小

[英]HTML & CSS How do I make it so an entire page is visible to everyone without having to zoom out

 原文  2021-01-27 03:36:44  7   1    javascript/ html/ css

問題描述

所以我為一個網站創建了一個門戶頁面，但我在制作它時遇到了麻煩，因此用戶不必縮小到 80% 來查看所有內容。 這是網站的鏈接： https://www.xenofactions.com/

我現在將在這里向您展示此門戶頁面的代碼。 我試過擺弄高度和寬度等，但我仍然無法弄清楚。 我是 HTML 和 CSS 的新手，今后將不勝感激。 我現在將屬於此門戶頁面的代碼塊放在下面。

[谷歌默認放大100%，所以當一位用戶打開網站時，他們說我認為網站壞了？ 所以我想要它，這樣每個人都可以查看它而不必縮小] 圖片不讓我在這里上傳圖片，出於某種奇怪的原因----> https://imgur.com/a/MmKn5lz

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Barlow:300,400,500,600,700,900" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/sweetalert2/6.6.0/sweetalert2.min.css">
<link rel="icon" href="">
<title>XenoFactions | Welcome</title>
<style>{literal}
html {
    position: relative;
    min-height: 100%;
    overflow: hidden;
}

body {
    background: url("https://i.imgur.com/6eYoGo2.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}
.portal-content li {
    list-style: none;
}

.portal-content {
    text-align: center;
    margin-top: 50px;
}
.portal-content .logo {
    margin-bottom: 10px !important;
    max-width: 485px;
    margin: 0 auto;
}
@media (max-width: 700px) {
   /* PUT CSS HERE TO ALTER WEBSITE TO SINGLE COLUMN */
}

.portal-content .logo img {
    max-width: 100%;
    animation-name: pulse_animation;
    animation-duration: 6500ms;
    transform-origin:70% 70%;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    margin-left: 20px;
}
@keyframes pulse_animation {
    0% { transform: scale(1); }
    10% { transform: scale(1.05); }
    20% { transform: scale(1); }
    30% { transform: scale(1.05); }
    40% { transform: scale(1); }
    50% { transform: scale(1.05); }
    60% { transform: scale(1); }
    70% { transform: scale(1.05); }
    80% { transform: scale(1); }
    100% { transform: scale(1.05); }
}
.portal-content .links > a {
    font-family: 'Barlow', sans-serif;
    display: inline-block;
    text-decoration: none;
    transition: all .10s ease-in-out;
    -moz-transition: all .10s ease-in-out;
    -webkit-transition: all .10s ease-in-out;
}
.portal-content .link-item:hover {
transform:scale(1.05);
}
.portal-content .link-item {
    transform:scale(1.0);
    display: block;
    min-width: 170px;
    margin: 0px 15px;
    transition: all .10s ease-in-out;
    -moz-transition: all .10s ease-in-out;
    -webkit-transition: all .10s ease-in-out;
}
.link-item:Hover .icon {
    bottom:3px;
    transform: rotate(3deg);
}
.link-item .icon {
    transform: rotate(0deg);
    bottom:0;
    position: relative;
    height: 348px;
    width: 217px;
    margin: 0 auto;
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    margin-bottom: 15px;
    transition: all .10s ease-in-out;
    -moz-transition: all .10s ease-in-out;
    -webkit-transition: all .10s ease-in-out;
}

.link-item.home .icon {
    background-image: url(https://cdn.discordapp.com/attachments/514244374453026816/518073251486760983/forums.png);
    background-image: url(https://cdn.discordapp.com/attachments/514244374453026816/518073251486760983/forums.png);
}

.link-item.vote .icon {
    background-image: url(https://cdn.discordapp.com/attachments/514244374453026816/518073137485840389/vote.png);
}

.link-item.store .icon {
    background-image: url(https://cdn.discordapp.com/attachments/514244374453026816/518073101460832260/store.png);
}
.link-item.bans .icon {
    background-image: url(https://cdn.discordapp.com/attachments/514244374453026816/518072933537546250/bans.png);
}
.link-item .text {
    font-size: 26px;
    text-transform: uppercase;
    font-weight: 800;
    color: #ed9b10 !important;
    text-shadow: 0px 0px 15px black, -3px 3px 0px black;
    margin-top: -10px;
    letter-spacing: -1px;
}
div#players > span {
    display: inline-block;
    background-color:rgba(0,0,0,0.5);
    border-bottom:3px solid #7360FF;
    padding: 14px 20px;
    font-size: 18px;
    font-family: 'Barlow', sans-serif;
    color: white;
    margin-bottom: 50px;
    margin-top: 50px;
}
span#live{
     font-weight: 700;   
    }
div#players > span span {
    color: white !important;
    display: inline-block;
}
.portal-content {
    position: relative;
}
.clouds {
    -webkit-animation: clouds linear 90s infinite;
    animation: clouds linear 90s infinite;
    background-image: url(f.png);
    background-position: 0 100px;
    background-repeat: repeat-x;
    height: 100%;
    min-width: 2710px;
    position: absolute;
    width: 200%;
    background-repeat-y: no-repeat;
    margin-left: 8px;
}

@keyframes clouds{
  from   {transform:translateX(-1366px)}
  to {transform:translateX(0)}
}
</style>{/literal}
</head>
<body>
<div class="clouds"></div>
<div class="portal-content">
    <div class="logo">
        <li><img src="https://cdn.discordapp.com/attachments/514244374453026816/514902610390548520/xenonetwork.png"></li>
    </div>
    <div id="players">
        <span class="playerCount"><b><span class="live"><i class="fa fa-cog fa-spin"></i></span></b> Server IP :
        <span><strong>play.xenofactions.com</strong></span >
        </span>
        
    </div>
    <div class="links">
        <a href="http://xenofactions.com/index.php?route=/forum">
            <div class="link-item home">
                <div class="icon"></div>
            </div>
        </a>
        <a href="https://xenofactions.com/index.php?route=/vote/">
            <div class="link-item vote">
                <div class="icon"></div>
            </div>
        </a>
        <a href="http://store.xenofactions.com/">
            <div class="link-item store">
                <div class="icon"></div>
            </div>
        </a>
        <a href="https://xenofactions.com/punishments/index.php">
            <div class="link-item bans">
                <div class="icon"></div>
            </div>
        </a>
    </div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/sweetalert2/6.6.0/sweetalert2.js"></script>
<script src="/resources/js/clipboard.min.js"></script>
<script src="//mcapi.us/scripts/minecraft.js"></script>
{literal}<script>
    function playerUpdate() {        $.ajax({            headers: {"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"},            url: "https://mcapi.ca/query/play.xenofactions.com/players",            dataType: "text",            success: function(data) {                var json = $.parseJSON(data);                if(json.status) {                    $(".live").html(json.players.online);                } else {                    $(".playerCount").html("SERVER OFFLINE");                }            }        })    }
    playerUpdate();
    setInterval(playerUpdate, 10000);
</script>{/literal} 


  [1]: https://i.stack.imgur.com/XzX0K.jpg
  [2]: https://i.stack.imgur.com/5Q10B.jpg

1 個解決方案

解決方案1
 0  2021-01-27 03:57:57

您需要將此添加到 html 的<head>中：

<meta name="viewport" content="width=device-width, initial-scale=1">

沒有這個，瀏覽器將無法很好地理解您網站的規模。

也就是說，您的首頁在水平方向上可以很好地縮放，但在垂直方向上卻不是很好。 這很正常，因為大多數網站都需要您向下滾動才能獲取頁面上的所有內容。 但是您可以嘗試通過在 css 中使用百分比和/或vh （視口高度）單位來指示元素之間的垂直距離、填充、邊距等，使您的內容適應垂直軸。

你可以用你不同的 CSS 類做這樣的事情：用流體百分比值替換你的固定像素值：

div#players > span {
  display: inline-block;
  background-color: rgba(0,0,0,0.5);
  border-bottom: 3px solid #7360FF;
  padding: 4% 8%;
  font-size: 18px;
  font-family: 'Barlow', sans-serif;
  color: white;
  margin: 10% 0;
}

只是一個例子，但如果你添加足夠多的百分比，你的頁面最終將完全靈活並更好地適應越來越小的屏幕。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何使答案循環而不需要刷新頁面？ CSS-將頁腳貼到頁面底部（因此只有在滾動后才可見）而沒有html選擇器？ 如何使用jQuery或CSS縮小整個網站？ HTML CSS：如何使Checkbox僅在懸停或選中時可見 如何使整個表格成為一個按鈕/到另一個HTML頁面的鏈接？ CSS 如何使背景適合整個頁面長度？ 我如何通過jquery ajax對html元素進行永久更改，以使其在刷新頁面后仍保留？ 如何在 html 中制作一個元素而不是整行 ResponsiveSlides如何使圖像的寬度占據整個頁面？ 如何使每個人都在同一時區倒計時？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM