Question

我想知道我应该采取哪些步骤，以便我可以针对不同的浏览器优化此网页。如果你看看我的JSFiddle：https://jsfiddle.net/xpvt214o/137951/

当我的网页缩小时，元素遍布整个地方，一切都只是在全屏显示的正确位置。我该如何解决这个问题？

HTML：

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="jquery-1.10.2.min.js"></script>
  <script src="main.js"></script>
  <title>A'S COFFEE</title>
</head>
<body>
<div id="wrapper">
  <div id="MenuIcon">
    <div id="MenuLine"></div>
  </div>

  <div id="MainMenu">
        <div id="logo">
            <h1 class="logo">A's Coffee</h1>
        </div>
    <ul>
        <li>HOME<div class="line"></div></li>
        <li>MAKE AN ORDER<div class="line"></div></li>
        <li>VIEW ORDERS<div class="line"></div></li>
    </ul>
    <div id="close">
        <P>Click to leave</P>
    </div>
    </div>

    <div id="centeralign">
      <a class="button" id="btn1" href="place.html">Want to Place <br>an Order?</a><br>
      <a class="button" id="btn2" href="#">View Orders?</a>

    </div>

CSS：

body{
  background-color: purple;
}

h1{
  color: #e5b78e;
  font-family: Arial;
  font-size: 100pt;
  padding: 0px;
  margin: 0px;
display: block;
}

.button{
display: inline-block;
background: transparent;
text-transform: uppercase;
font-weight: bold;
font-style: normal;
font-family: Arial;
font-size: 2em;
letter-spacing: 0.2em;
color: rgba(223,190,106,0.7);
border-radius: 0;
padding: 18px 80px 20px;
transition: all 0.7s ease-out;
background: linear-gradient(270deg, rgba(223,190,106,0.8), rgba(146,111,52,0.8), rgba(34,34,34,0), rgba(34,34,34,0));
background-position: 1% 50%;
background-size: 300% 300%;
text-decoration: none;
margin: 0.625rem;
border: none;
border: 1px solid rgba(223,190,106,0.3);
}

.button:hover{
color: #fff;
border: 1px solid rgba(223,190,106,0);
color: $white;
background-position: 99% 50%;
}

#btn1{

  margin-top:30px;
  display: inline-block;
  padding-left: 30px;
  padding-right:30px;

}

#btn2{
  margin-top:30px;
  display: inline-block;
  padding-left: 47px;
  padding-right: 47px;
}

.button:hover{
  opacity: 1;
  transition: opacity .2s ease-in;
}

#centeralign{
  text-align: center;
  top: 20em;
  position: relative;
  transition: all .5s ease-in-out;
}

br{
  padding: 40px;
}

/* NAV */

#MenuIcon{
    height: 25px;
    width: 50px;
    position: fixed;
    top:50;
    right: 50;
}
#MenuIcon:hover{
    cursor: pointer;
}
#MenuLine{
    height: 4px;
    width: 50px;
    background-color: #e5b78e;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: all .3s;
}
#MenuIcon:hover #MenuLine{
    width: 40px;
}
#MenuLine::before{
    content: '';
    height: 4px;
    width: 40px;
    background-color: #e5b78e;
    position: absolute;
    margin-top: 10px;
    transition: all .3s;
}
#MenuIcon:hover #MenuLine::before{
    width: 50px;
}
#MenuLine::after{
    content: '';
    height: 4px;
    width: 40px;
    background-color: #e5b78e;
    position: absolute;
    margin-top: -10px;
    transition: all .3s;
}
#MenuIcon:hover #MenuLine::after{
    width: 50px;
}
#MainMenu{
    height: 100vh;
    width: 300px;
    background-color: #181818;
    -webkit-clip-path:polygon(0 0,100% 0,0% 100%,0% 100%);
    position: fixed;
    top:0;
    left: -300px;
    transition: all .5s ease-in-out;
}
ul{
    list-style: none;
    padding: 0px;
    margin: 0px;
    font-family: arial;
    font-weight: bold;
    color:white;
    text-align: center;
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%,-50%);
}
ul li{
    margin: 20px;
}
ul li:hover{
    cursor: pointer;
}
.line{
    height: 2px;
    width: 150px;
    background-color: white;
    margin-top: 10px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    transition: all .3s;
}
ul li:hover .line{
    width: 180px;
}
#logo{
    position: absolute;
    top:10%;
    left: 50%;
    transform: translate(-50%);
}
#close{
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translate(-50%);
}
#close:hover{
    cursor: pointer;
}

.LOGO{
  font-size: 4.5em;
}

JS：

$(document).ready(function(){
   $("#MenuIcon").click(function(){
        $("#MainMenu").css("left","0px");
        $("#MOVE").css("left","300px");
        function showMenu(){
            $("#MainMenu").css("-webkit-clip-path","polygon(0 0,100% 0,100% 100%,0% 100%)");
            $("#MenuIcon").animate({right:'-100'},300);
        }
        setTimeout(showMenu,100);
   });

    $("#close").click(function(){
            $("#MainMenu").css("-webkit-clip-path","polygon(0 0,0% 0,100% 100%,0% 100%)");
            function hideMenu(){
                    $("#MainMenu").css("left","-300px");
                    $("#MOVE").css("left","0px")
                $("#MenuIcon").animate({right:'50'},300);
            }

        setTimeout(hideMenu,300);

        function originalLayout(){
            $("#MainMenu").css("-webkit-clip-path","polygon(0 0,100% 0,0% 100%,0% 100%)");
        }
        setTimeout(originalLayout,600);
    });
});

Answer 1

在CSS中使用媒体查询来设置不同大小的样式。像这样

@media only screen and (max-width: 767px) {
    html {
        color: #000;
     }
    /* styles to make page responsive */
}

当您的页面宽度<= 767px时，这将使文本变黑。而不是更改颜色更改元素的布局。

您可以根据需要使用多个，因此您可以设置350,500等断点，并使您的页面看起来完美无瑕。希望能让你入手:)

有关详细信息，请查看此链接：https://www.w3schools.com/css/css_rwd_mediaqueries.asp

如何修复所有类型浏览器尺寸的网页布局？

1 个答案: