调整大小后如何使我的网站正确缩放？

时间：2019-03-24 21:32:04

标签： html css flexbox media-queries 

body {
  padding: 0;
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  box-sizing: border-box !important;
}

a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

a:hover,
a:link,
a:active {
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  position: relative;
}

.main-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 50px 100px;
  transition: transform .3s ease;
}

.header {
  width: 100%;
  height: 56px;
  background: black;
}

.header-container {
  height: 100%;
  padding: 0 40px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.bottom, .right {
    position: fixed;
    background: black;
}

.right {
  top: 0; bottom: 0;
  width: 56px;
  right: 0;
}

.bottom {
  left: 0; right: 0;
  height: 3.5vh;
  bottom: 0;
}

.logo {
  width: 10%;
}

.nav-bar {
  display: flex;
  flex-direction: row;
  width: 90%;
  align-items: center;
  align-self: stretch;
}

@media screen and (max-width: 600px) {
  .nav-bar {
    position: absolute;
    top: 56px;
    left: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    background-color: black;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    z-index: 8888;
    transition: height .3s .1s ease;
  }
}
.nav-list {
  list-style: none;
  padding: 100px;
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

@media screen and (max-width: 600px) {
  .nav-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: space-evenly;
    height: 80%;
    /*
      Initially list will be hidden and will reappear once the
      nav-bar is opened
    */
    visibility: hidden;
    opacity: 0;
    transition: visibility .2s ease, opacity .2s ease;
  }
}
.nav-list-item {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  right: 75.5vw;
  left: -23.5vw;
  transition: color .3s ease;
  color: #989797;
}

.nav-list-item:not(:last-child) {
  margin-right: 99px;
}

@media screen and (max-width: 600px) {
  a {
    justify-content: flex-start;
  }

  .nav-list-item {
    margin: 0px auto 0px auto !important;
    border-bottom: 1px solid #989797;
    width: 80%;
    justify-content: left;
    padding: 15px 0;
  }
}
.sub-list-container {
  overflow: hidden;
  position: absolute;
  top: 56px;
  left: 10%;
  transform: translateX(-50%);
  /* If we need show/hide feature */
  height: inherit;
  visibility: hidden;
  opacity: 0;
  transition: all .3s ease;
}

@media screen and (max-width: 600px) {
  .sub-list-container {
    display: none;
  }
}
.sub-list {
  width: 200px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: black;
}

.sub-item {
  color: #989797;
  font-size: 16px;
  padding: 10px;
  position: relative;
  align-self: stretch;
  text-align: center;
  z-index: 2;
  transition: color .3s ease;
}

.sub-item:hover {
  color: white;
}

.sub-item::before {
  z-index: 1;
}

.nav-list-item:hover {
  cursor: pointer;
  color: white;
}

.nav-list-item:hover .sub-list-container {
  /* For show/hide feature */
  visibility: visible;
  opacity: 1;
}

.toggle-nav {
  display: none;
}

.toggle-nav-off {
  display: none;
}

@media screen and (max-width: 600px) {
  .toggle-nav {
    display: block;
  }

  .toggle-nav-off {
    display: block;
    background: white;
    border-radius: 50%;
    height: 30px;
    width: 30px;
  }

  :target {
    /* Defining the height of the shutter effect */
    height: calc(100vh - 56px);
  }

  :target .nav-list {
    visibility: visible;
    opacity: 1;
    transition: visibility .2s .2s ease, opacity .2s .2s ease;
  }
}
/* Code for the side-bar starts here */
.side-bar {
  position: absolute;
  top: 56px;
  left: 0;
  width: 60px;
  /* Initial width according to size of image */
  height: calc(100% - 56px);
  background: black;
  color: white;
  overflow: hidden;
  /* Imp to give as the List is having width larger than the initial width of the side-bar */
  transition: all .3s ease;
}

.side-bar {
  width: 8vw;
}

.side-bar-left {
    position: absolute;
    top: 56px;
    right: 10px;
    width: 60px;
    /* Initial width according to size of image */
    height: calc(100% - 56px);
    background: black;
    color: white;
    overflow: hidden;
    /* Imp to give as the List is having width larger than the initial width of the side-bar */
    transition: all .3s ease;
    width: 250px;
  }


.item-list {
  list-style: none;
  width: 250px;
  left: -3.2vw;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 10;
}

.item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  align-self: stretch;
  padding: 3.85vh .3vw;
  transition: all .5s ease;
  position: relative;
  color: #989797;
}

.item:not(:last-child) {
  margin-bottom: 5px;
}

.item:hover {
  color: white;
  cursor: pointer;
}

.item-img {
  margin-right: 10px;
  width: 10px;
  height: 5px;
  padding: 0 10px;
  transition: all .3s ease;
}

.item #dribble, .item #behance, .item #flickr {
  width: 3.5vw;
  height: 7vh;
}

.item #instagram {
  width: 3vw;
  height: 6vh;
  margin-left: .5vw;
}
.item #etsy {
  width: 6vw;
  height: 7vh;
  margin-left: -2.1vw;
}

.item #behance {
  margin-left: .3vw;
}

.item #flickr{
  margin-left: -.5vw;
}

.item #dribble {
  margin-left: .2vw;
}
.item #pinterest {
  width: 3.5vw;
  height: 7vh;
  margin-left: .4vw;
}

/* Code for the HOVER effect on the list items */
.item::before {
  transform: scaleY(0);
  width: 3px;
  transition: transform .2s ease, width .3s .2s ease;
}

.sub-item::before {
  width: 0px;
  transition: transform .1s ease, width .2s .1s ease;
}

.item::before,
.sub-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(to bottom right, #ff506e, black);
  z-index: -1;
}

.item:hover::before {
  transform: scaleY(1);
}

.item:hover::before,
.sub-item:hover::before {
  width: 100%;
}

.active {
  color: #989797;
  /* background: linear-gradient(to bottom right, #ff506e, black); THIS MAKES THE FIRST BUTTON ALWAYS RED AND HIGHLIGHTED, WHICH WE DON'T WANT */
}

.nav-active {
  color: 989797;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsl(200deg, 50%, 92%);
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: all .3s ease;
}

.modal-item {
  position: absolute;
  width: 500px;
  height: 350px;
  background: url("https://37.media.tumblr.com/53fc4e7e4096cba63c0133167a4b6168/tumblr_n33ukkyWLN1rwhqloo1_500.gif");
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 2px;
  padding: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .3s ease;
}

.toggle-modal {
  position: absolute;
  top: 2vh;
  left: 1.4vw;
}

/* Opening modal using CSS */
:target {
  visibility: visible;
  opacity: 1;
}

:target .modal-item {
  transform: translate(-50%, -50%) scale(1);
}


/* .container {
    display: grid;
    height: 100%;
    overflow: auto;
    background: white;
    
} */

.iframe {
  position: relative;
  margin-left: -41.98vw;
  top:52.09vh;
  height: 92.322vh;
  width: 90vw;
  border: black;

}
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>"Users folio"</title>
  
  
  <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <header class="header">
    <div class="header-container">
      <div class="logo">
          <!-- COMPANY LOGO GOES HERE -->
      </div>
      <nav class="nav-bar" id="nav">
        <ul class="nav-list">
          <li class="nav-list-item nav-active">Home</li>
          <li class="nav-list-item">
            About
            <div class="sub-list-container">
              <ul class="sub-list">
                <li class="sub-item">About Our Company</li>
                <li class="sub-item">Our Mission</li>
                <li class="sub-item">Happy Clients</li>
                <li class="sub-item">Team</li>
              </ul>
            </div>
          </li>


          <li class="nav-list-item">
            <a href="#modal-item">Instructions</a>
          </li>
        </ul>
        <div class="toggle-nav-off">
          <a href="#"><img src="https://icon-icons.com/icons2/1157/PNG/512/1487086345-cross_81577.png" alt="Close Icon" width="30" height="30"></a>
        </div>
      </nav>
      <div class="toggle-nav">
        <a href="#nav"><img src="https://cdn2.iconfinder.com/data/icons/menu-elements/154/menu-round-512.png" alt="Close Icon" width="30" height="30"></a>
    </div>
    <div class="container">
        <!-- 
                Currently just researching which sites are able to have their x-options
                        bypassed in order to allow viewing within an iframe, so disregard the iframe source. 
        -->
        <iframe class="iframe" name="change-website" src="https://www.etsy.com"></iframe>
    </div>
  </header>
  <div class="side-bar">
    <ul class="item-list">
      <li class="item active"><a href="https://www.behance.net" target="change-website"><img id="behance" src="images/behance.png" width="50" height="50" class="item-img" />Behance</a></li>
      <li class="item"><a href="https://www.dribbble.com" target="change-website"><img id="dribble" src="images/dribble3.png" width="50" height="50" class="item-img" />Dribble</a></li>
      <li class="item"><a href="https://www.etsy.com" target="change-website"><img id="etsy" src="images/etsy11.png" width="50" height="50" class="item-img"/>Etsy</a></li>
      <li class="item"><a href="https://www.flickr.com" target="change-website"><img id="flickr" src="images/flick2.png" width="50" height="50" class="item-img" />Flickr</a></li>
      <li class="item"><a href="https://www.instagram.com/onwheez" target="change-website"><img id="instagram" src="images/Instagram_AppIcon_Aug2017.png" width="50" height="50" class="item-img" />Instagram</a></li>
      <li class="item"><a href="https://www.pinterest.com" target="change-website"><img id="pinterest" src="images/pinterest3.png" width="50" height="50" class="item-img" />Pinterest</a></li>
      <!-- <li class="item"><a href="https://www.twitch.com/twitchpresents" target="change-website"><img id="flickr" src="images/twitch3.png" width="50" height="50" class="item-img"/>Twitch</a></li> -->
      
    </ul>
  </div>

  <div class="left-side-bar">
    <p></p>
  </div>
  <div class="main-content">
      <div class="modal" id="modal-item">
        <div class="modal-item">
          <div class="toggle-modal">
            <a href="#"><img src="https://icon-icons.com/icons2/1157/PNG/512/1487086345-cross_81577.png" alt="Close Icon" width="30" height="30"></a>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom"></div>
    <div class="right"></div>
</div>



  
  
<link rel="stylesheet" href="scripts.js">
</body>

</html>

因此，我知道我需要使用媒体查询来适当缩放并针对每个最大宽度等将代码放入不同的媒体查询中。

这是我一直在使用的代码，但是当我更改大小时，即使当我尝试将它们放入不同的媒体查询中并在更改浏览器大小时将它们编码为该比例时，仍然会遇到问题我的iframe和顶部菜单栏之类的东西在移动并且不在正确的位置。

对于前端我还是很陌生，但是我很好奇我可以做些什么来解决这个问题？

浏览器调整大小时，所有内容均应保留在正确的位置。 首页，关于和说明应该从iframe的上方开始，并稍微超过iframe的左上方

1 个答案:

答案 0 :(得分：0)

好吧，看一下代码，发现您错过了使网站可调整大小的meta标签，将其添加到head标签上

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

这应该可以解决您的问题。

相关问题
最新问题