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 的左上角
好吧，看看你的代码，发现你错过了一个元标记，使你的网站可调整大小，把它添加到你的头标签上
<meta name="viewport" content="width=device-width, initial-scale=1">
这应该可以解决您的问题。