css HTML Page is different on移动的browser [关闭]

kx5bkwkv  于 2023-03-24  发布在  其他
关注(0)|答案(1)|浏览(120)

**已关闭。**此问题需要debugging details。当前不接受答案。

编辑问题以包含desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将有助于其他人回答问题。
昨天关门了。
Improve this question
我正在接近Web开发的世界。我正在完成一个非常简单的项目，让我可以玩一下JavaScript。然而，我遇到了这个问题：当我从电脑浏览器中查看页面时，所有元素的位置都是正确的，而如果我从手机浏览器中打开它，元素之间的比例不正确。
以下是Web视图：Web View
这是移动的View：12
在这里，您可以找到所有HTML，CSS和JavaScript文件的存储库：Rock-Paper-Scissors Repo
我希望手机版是电脑版的一个重新缩放的视图。我已经看到了几个类似于我的项目，从移动显示正确。
HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta charset="UTF-8">
    <title>Rock Paper Scissor</title>
    <script src="rockpaperscissors.js" defer></script>
    <link rel="stylesheet" type="text/css" href="rockpaperscissors.css">
    <link rel="icon" href="rock-paper-scissors-icon.png">
</head>
<!--<body background="nnnoise.svg">-->
    <body>
    <div class="header">
        <div>Rock Paper Scissors</div> 
    </div>
    <div class="infoLine">
        <div></div>
        <div class="infoContainer">
             <div class="chooseText" id="whoWon">Choose your weapon!</div>
             <div class="gameInfo" id="explanation">First one to score 5 points wins the game. Good Luck!</div>
        </div>
        <div id="roundCounter">Round: 0</div>
    </div>
    
    
    <div id="choiceAndPoints">
        <div class="lastPlayerChoice">
            <div class="lastChoice-image" id="playerSign">?</div>
            <div class="lastChoice-points" id="playerPoints">Player: 0</div>
        </div>
        <div class="lastComputerChoice">
            <div class="lastChoice-image" id="computerSign">?</div>
            <div class="lastChoice-points" id="computerPoints">Computer: 0</div>
        </div>
    </div>
    <div id="choicebox">
            <div class="vertcalDiv">
                <button id="rock-button" class="weapon-button">✊</button>
                <div class="imageDesc">Rock</div>
            </div>
            <div class="verticalDiv">
                <button id="paper-button" class=" weapon-button">🖐</button>
                <div class="imageDesc">Paper</div>
            </div>
            <div class="vertcalDiv">
                <button id="scissors-button" class=" weapon-button">✌️</button>
                <div class="imageDesc">Scissors</div>
            </div>
            
    </div>
    <div id="footer">
        Rock Paper Scissors Project - Andrea Casaluci -> <a href="https://github.com/AndreaCasaluci" target="_blank">GitHub</a>
    </div>
</body>
</html>

CSS代码：

html{
    position: relative;
    min-height: 100%;
}
body{
    margin:0px;
    padding:0px;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    background-color: black;
}
.header{
    align-items: center;
    text-align: center;
    padding:1%;
    font-size: 60px;
    font-weight:bold;
    background-color: #000000ff;
    color: #7957A8;
    background-image: url("headerbackground.svg");
    border-bottom: 5px solid;
    border-color: #7957A8;
    display: flex;
   /* justify-content: space-between;
   /* align-items: center;*/
}
.header div{
    flex:1;
    flex-direction: row;
    align-items: flex-start;
    width: 33%;
}
div .logo{
    align-content: flex-start;
    align-items: flex-start;
    align-self: flex-start;
    text-align: left;
}
#choicebox{
    color:white;
    margin:auto;
    margin-top: 3%;
    width: fit-content;
    padding: 2%;
    align-items: center;
    text-align: center;
    /*justify-content: space-between;*/
    justify-content: center;
    display:flex;
    /*border: 3px solid #7957A8;
    border-radius: 3px;*/
}
.verticalDiv{
    color:white;
    display: flex;
    flex-direction: column;
}
.imageDesc{
    padding-top:3px;
}
#choicebox button{
    background-color: transparent;
    flex-direction: row;
    color:white;
    font-weight: bold;
    font-size: 80px;
    margin-right: 20px;
    margin-left: 20px;
    text-decoration: none;
    text-align: center;
    border: 2px solid #7957A8;
    border-radius: 10px;
    background-color: #7957A8;
    aspect-ratio: 1/1;
   /* height: 150px;*/
    width: 160px;
    height: 160px;
    
}
#choicebox button:hover{
    cursor: pointer;
  /*  -webkit-transform: scale(1.3);
    transform: scale(1.1);
    transition: all .3s;*/
    font-size: 110px;
    background-color: #9d73d8;
    border-color: #9d73d8;
    transition: all .3s;
}
.roundInformations{
    color:white;
    display: flex;
    font-size: 40px;
    text-align:center;
    justify-content: center;
    margin-top:5%;
}
.winner-info{
 /*   flex:1;
    flex-direction: column;
    display:flex;*/
    border: 3px solid red;
}
.playerScore-info{
/*    flex:1;
    flex-direction: column;
    display:flex; */
    border: 3px solid red;
}
.computerScore-info{
    border:3px solid red;
}
.roundWinner{
   /* flex:1;
    flex-direction: row;*/
    margin-top: 3%;
    color:white;
    font-size: 40px;
    text-align:center;
    padding-left:5px;
}
.chooseText{
    text-align: center;
    align-items: center;
    color:white;
    font-size: 45px;
    font-weight: bold;
    margin-top:20px;
    height: 50px;
    max-height: 50px;
}
.gameInfo{
    text-align: center;
    align-items: center;
    color:white;
    font-size: 25px;
    margin-top:10px;
}

#choiceAndPoints{

    margin-top:35px;
    color:white;
    font-size: 30px;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    text-align: center;
    align-items: center;
    justify-content: center;
    height: 150px;
    max-height: 150px;
}
.lastPlayerChoice{
    margin-right:2%;
}
.lastComputerChoice{
    margin-left:2%;
}
.lastChoice{
    display:flex;
    flex-direction: column;
}
.lastChoice-image{
    font-size: 100px;
}
#playerSign{
    background-color: transparent;
}
#computerSign{
    background-color: transparent;
}
#playerPoints{

}
#computerPoints{

}
#whoWon{

}
#explanation{

}
.infoContainer{
    flex:1;
}
.infoLine{
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    height:150px;
    max-height: 150px;
}
#roundCounter{
    color:white;
    flex:1;
    padding-left: 3%;
    font-size: 20px;
    align-self: flex-end;
    max-width: fit-content;
    padding-right: 20%;
}

#footer{
    position:fixed;
    background-color: black;
    color:beige;
    font-size: 20px;
    font-weight: bold;
    width: 100%;
    left:0;
    bottom: 0;
    text-align: center;
    padding-bottom: 15px;
    padding-top: 15px;
    margin-top: 10px;
}
#footer a{
    text-decoration: none;
    color:#9d73d8;
}
css

1条答案

按热度按时间
pqwbnv8z

pqwbnv8z1#

你所描述的并不一定是一个问题，而是HTML和CSS在不同屏幕尺寸上的行为的副作用。
当你开发一个网站的多种屏幕尺寸（移动的，平板电脑，笔记本电脑，台式机，电视和最近的VR），你需要让你的网站适应不同的屏幕尺寸。这通常被称为responsive，但一些文献也称之为adaptive。这两个术语都被接受。
有两种主要方法可以实现这一点：

  • 为移动的版创建单独的HTML和CSS，
  • 使用media queries

第一种是不言自明的-您为移动的版本创建新的HTML和CSS文件。然而，最近并没有实践，因为管理多个代码库可能是大型项目的合唱团。相反，开发人员倾向于第二种选择。
媒体查询是CSS中的规则块，适用于不同的屏幕尺寸。屏幕尺寸由开发人员定义：

body { bacground: green; }

@media only screen and (min-width: 701px) and (max-width: 1200px) {
    body { background: blue; }
}

@media only screen and (min-width: 300px) and (max-width: 700px) {
    body { background: red; }
}

这实际上是告诉浏览器在默认情况下将主体背景设置为绿色。如果设备宽度福尔斯1200px，则将其设置为蓝色，如果低于700px，则将其设置为红色。

赞(0）分享  回复(0）举报  2023-03-24
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com