Question

这里的二年级IT学生。正如你所看到的，我在这里制作了两个gif图像，这样你就可以很容易地确定我的问题是什么:)无论如何，第一个gif图像是我为我们学校制作的html网站项目，不幸的是当我在浏览器上打开项目时并调整大小，所有内容螺丝:(但是，所有的位置都固定在CSS上，我几乎尝试了CSS上的所有类型的位置，但它仍然赢得了工作:( 将其与第二个gif图像进行比较，这是一个应用程序功能的网站，调整大小不会搞乱网站内容，无论我如何调整浏览器的大小，所有内容都在自己的位置不变，我真的没有确定如果在浏览器调整大小或在不同监视器上查看时，网站上添加的代码是什么，以维护其内容位置。

Project Site

Website 对不起，语法不好，非常感谢我的理解！顺便说一句，这是我的CSS代码：

@font-face{
font-family: 'robotocondensed-bold-webfont';
src: url('fonts/robotocondensed-bold-webfont.eot');
src: url('fonts/robotocondensed-bold-webfont.eot?#iefix') format('eot'),
url('fonts/robotocondensed-bold-webfont.woff') format('woff'),
url('fonts/robotocondensed-bold-webfont.ttf') format('truetype'),
url('fonts/robotocondensed-bold-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'robotocondensed-bold-webfont';
src: url('fonts/robotocondensed-bold-webfont.svg') format('svg');
}
}
@font-face{
font-family: 'roboto-regular-webfont';
src: url('fonts/roboto-regular-webfont.eot');
src: url('fonts/roboto-regular-webfont.eot?#iefix') format('eot'),
url('fonts/roboto-regular-webfont.woff') format('woff'),
url('fonts/roboto-regular-webfont.ttf') format('truetype'),
url('fonts/roboto-regular-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'roboto-regular-webfont';
src: url('fonts/roboto-regular-webfont.svg') format('svg');
}
}
@font-face{
font-family: 'roboto-bold-webfont';
src: url('fonts/roboto-bold-webfont.eot');
src: url('fonts/roboto-bold-webfont.eot?#iefix') format('eot'),
url('fonts/roboto-bold-webfont.woff') format('woff'),
url('fonts/roboto-bold-webfont.ttf') format('truetype'),
url('fonts/roboto-bold-webfont.svg') format('svg');
font-weight: bold;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'roboto-bold-webfont';
src: url('fonts/roboto-bold-webfont.svg') format('svg');
}
}
@font-face{
font-family: 'catull-webfont';
src: url('fonts/catull-webfont.eot');
src: url('fonts/catull-webfont.eot?#iefix') format('eot'),
url('fonts/catull-webfont.woff') format('woff'),
url('fonts/catull-webfont.ttf') format('truetype'),
url('fonts/catull-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'catull-webfont';
src: url('fonts/catull-webfont.svg') format('svg');
}
}
@font-face{
font-family: 'opensans-regular-webfont';
src: url('fonts/opensans-regular-webfont.eot');
src: url('fonts/opensans-regular-webfont.eot?#iefix') format('eot'),
url('fonts/opensans-regular-webfont.woff') format('woff'),
url('fonts/opensans-regular-webfont.ttf') format('truetype'),
url('fonts/opensans-regular-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'opensans-regular-webfont';
src: url('fonts/opensans-regular-webfont.svg') format('svg');
}
}
@font-face{
font-family: 'opensans-light-webfont';
src: url('fonts/opensans-light-webfont.eot');
src: url('fonts/opensans-light-webfont.eot?#iefix') format('eot'),
url('fonts/opensans-light-webfont.woff') format('woff'),
url('fonts/opensans-light-webfont.ttf') format('truetype'),
url('fonts/opensans-light-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'opensans-regular-webfont';
src: url('fonts/opensans-regular-webfont.svg') format('svg');
}
}
@font-face{
font-family: 'opensans-bold-webfont';
src: url('fonts/opensans-bold-webfont.eot');
src: url('fonts/opensans-bold-webfont.eot?#iefix') format('eot'),
url('fonts/opensans-bold-webfont.woff') format('woff'),
url('fonts/opensans-bold-webfont.ttf') format('truetype'),
url('fonts/opensans-bold-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'opensans-regular-webfont';
src: url('fonts/opensans-regular-webfont.svg') format('svg');
}
}
@font-face{
font-family: 'roboto-black-webfont';
src: url('fonts/roboto-black-webfont.eot');
src: url('fonts/roboto-black-webfont.eot?#iefix') format('eot'),
url('fonts/roboto-black-webfont.woff') format('woff'),
url('fonts/roboto-black-webfont.ttf') format('truetype'),
url('fonts/roboto-black-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'roboto-black-webfont';
src: url('fonts/roboto-black-webfont.svg') format('svg');
}
}
@font-face{
font-family: 'roboto-light-webfont';
src: url('fonts/roboto-light-webfont.eot');
src: url('fonts/roboto-light-webfont.eot?#iefix') format('eot'),
url('fonts/roboto-light-webfont.woff') format('woff'),
url('fonts/roboto-light-webfont.ttf') format('truetype'),
url('fonts/roboto-light-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'roboto-light-webfont';
src: url('fonts/roboto-light-webfont.svg') format('svg');
}
#bg-topbottom {
background-color: #0E7AE0;
height: 125%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#bg-bottom {
background-color: #FFDE85;
position: absolute;
height: 100%;
top: 125%;
bottom: 0;
left: 0;
right: 0;
}
#bg-bottom-first {
background-color: #00A76B;
position: absolute;
height: 130%;
top: 225%;
bottom: 0;
left: 0;
right: 0;
}
#bg-bottom-second {
background-color: #FFDE85;
position: absolute;
height: 50%;
top: 353.5%;
bottom: 0;
left: 0;
right: 0;
}
#bg-bottom-third {
background-color: #ffffff;
position: absolute;
height: 130%;
top: 403.5%;
bottom: 0;
left: 0;
right: 0;
}
#bg-bottom-fourth{
background-color: #0E7AE0;
position: absolute;
height: 105%;
top: 508.8%;
bottom: 0;
left: 0;
right: 0;
}
#bg-bottom-fifth{
background-color: #EBEAEB;
position: absolute;
height: 20%;
top: 613%;
left: 0;
right: 0;
bottom: 0;
}
.features a{
font-family: 'roboto-bold-webfont';
position: absolute;
font-size: 85%;
top: 5%;
left: 73%;
    color: #0A559C;
    text-decoration:none;
    text-shadow: 0 1px #0A559C;
    font-weight: bold;
}
.features a:before {
    color: #fff;
    content: attr(data-hover);
    position: absolute;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
}
.features a:hover:before,
.features a:focus:before {
    -webkit-transform: scale(0.9);
    opacity: 0;
}
.signup a{
font-family: 'roboto-bold-webfont';
font-size: 85%;
position: absolute;
top: 5%;
left: 79%;
right: 0;
    color: #0A559C;
    font-weight: 700;
    text-decoration:none;
    text-shadow: 0 1px #0A559C;
    font-weight: bold;
}
.signup a:before {
    color: #fff;
    content: attr(data-hover);
    position: absolute;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
}
.signup a:hover:before,
.signup a:focus:before {
    -webkit-transform: scale(0.9);
    opacity: 0;
}
.about a{
font-family: 'roboto-bold-webfont';
font-size: 85%;
position: absolute;
top: 5%;
left: 84.5%;
right: 0;
    color: #0A559C;
    font-weight: bold;
    text-shadow: 0 1px #0A559C;
    text-decoration:none;
}
.about a:before {
    color: #fff;
    content: attr(data-hover);
    position: absolute;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
}
.about a:hover:before,
.about a:focus:before {
    -webkit-transform: scale(0.9);
    opacity: 0;
}
.content-matters{
font-family: 'roboto-regular-webfont';
color: #ffffff;
font-size: 180%;
position: absolute;
top: 35%;
left: 38.5%;
}
.content-kitkat{
font-family: 'roboto-light-webfont';
color: #ffffff;
font-size: 130%;
position: absolute;
top: 42%;
left: 30%;
}
.Nexus5{
position: absolute;
top: 20%;
left: 23%;
}
#cursor-down.floating{
position: absolute;
top: 100%;
left: 46.4%;
    -webkit-animation-name: floating;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes floating {
    0% {
        -webkit-transform: translateY(0%);  
    }
    50% {
        -webkit-transform: translateY(15%); 
    }   
    100% {
        -webkit-transform: translateY(0%);
    }           
}
#logo {
position: absolute;
top: 4.5%;
left: 20%;
}
.cam-animation{
position: absolute;
top: 251.7%;
left: 21.7%;
}
.nexus-cam{
position: absolute;
top: 253%;
left: 81.6%;
}
.overlay-cam{
position: absolute;
top: 237.5%;
left: 11.3%;
}
.video-animation{
position: absolute;
top: 287%;
left: 60%;
}
.cam-animation-one{
position: absolute;
top: 292.3%;
left: 63.4%;
clip: rect(1px, 360px, 290px, 8px);
}
.cam-kit{
position: absolute;
top: 287%;
left: 60%;
}
#nexus-info {
position: absolute;
top: 139.5%;
left: 29.3%;
}
#ngif {
position: absolute;
top: 146.5%;
left: 31.1%;
}
#nexus-info:hover + #ngif {
    -webkit-animation: crt-on 0.3s 0s 1;
    -webkit-animation-timing-function: ease-out;
    -moz-animation: crt-on 0.3s 0s 1;
    -moz-animation-timing-function: ease-out;
    opacity: 1.0;
}
#ngif {
    -webkit-animation: crt-off 0.3s 0s 1;
    -webkit-animation-timing-function: ease-out;
    -moz-animation: crt-off 0.3s 0s 1;
    -moz-animation-timing-function: ease-out;

    opacity: 0.0;
}
@-webkit-keyframes crt-on {
    0% {
        opacity: 0.0;
        -webkit-transform: scale(0.5, 0.005);
        -webkit-box-shadow: inset 0 9999px 0 rgba(255,255,255,1.0);
    }
    40% {
        opacity: 1.0;
    }
    70% {
        -webkit-transform: scale(1.0, 0.005);
        -webkit-box-shadow: inset 0 9999px 0 rgba(255,255,255,1.0);
    }
    100% {
        -webkit-transform: scale(1.0, 1.0);
    }
}
@-webkit-keyframes crt-off {
    0% {
        -webkit-transform: scale(1.0, 1.0);
        opacity: 1.0;
    }
    40% {
        -webkit-transform: scale(1.0, 0.005);
        -webkit-box-shadow: inset 0 9999px 0 rgba(255,255,255,1.0);
    }
    70% {
        opacity: 1.0;
    }
    100% {
        opacity: 0.0;
        -webkit-transform: scale(0.5, 0.005);
        -webkit-box-shadow: inset 0 9999px 0 rgba(255,255,255,1.0);
    }
}
.first-content{
position: absolute;
top: 158%;
left: 52%;
}
.three-features{
position: absolute;
top: 360%;
left: 17%;
}
.button-pricetag {
position: absolute;
top: 185%;
left: 52.9%;
margin-top: 10px;
margin-right: 10px;
padding: 14px 26px;
font-size: 14px;
color: #ffffff;
vertical-align: middle;
text-align: center;
font-weight: bold;
-webkit-transition: background 0.2s ease-in-out;
text-shadow: 0 1px #0A559C;
color: #ffffff;
-webkit-border-radius: 3px;
font-family: Roboto-Condensed, sans-serif;
}
.button-pricetag:active {
    padding-top: 15px;
    margin-bottom: -1px;
}
.button-pricetag, .button-pricetag:hover .button-pricetag:active{
outline: 0 none;
    text-decoration: none;
    color: #ffffff;
}
.button {
    background-color: #0E7AE0;
    box-shadow: 0px 3px 0px 0px #0A559C;
}
.button:hover {
    background-color: #2570B7;
}
.button:active {
    box-shadow: 0px 1px 0px 0px #0E7AE0;
}
.popup-dialer{
position: absolute;
top: 369.3%;
bottom: 0;
left: 27.4%;
right: 0;
opacity: 0;
transition: all 0.3s ease;
}
.popup-dialer:hover{
opacity: 1;
}
.button-cam {
position: absolute;
top: 338%;
left: 18.5%;
margin-top: 10px;
margin-right: 10px;
padding: 14px 26px;
font-size: 14px;
color: #ffffff;
vertical-align: middle;
text-align: center;
font-weight: bold;
-webkit-transition: background 0.2s ease-in-out;
text-shadow: 0 1px #0A559C;
color: #ffffff;
-webkit-border-radius: 3px;
font-family: Roboto-Condensed, sans-serif;
}
.button-cam:active {
    padding-top: 15px;
    margin-bottom: -1px;
}
.button-cam, .button-cam:hover .button-cam:active{
outline: 0 none;
    text-decoration: none;
    color: #ffffff;
}
.button-second {
    background-color: #0E7AE0;
    box-shadow: 0px 3px 0px 0px #0A559C;
}
.button-second:hover {
    background-color: #2570B7;
}
.button-second:active {
    box-shadow: 0px 1px 0px 0px #0E7AE0;
}
}
.form-control:-moz-placeholder {
  color: #b2bcc5;
}
.form-control::-moz-placeholder {
  color: #b2bcc5;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #b2bcc5;
}
.form-control::-webkit-input-placeholder {
  color: #b2bcc5;
}
.form-control.placeholder {
  color: #b2bcc5;
}
.form-control {
position: absolute;
left: 43.5%;
top: 478%;
  border: 2px solid #bdc3c7;
  color: #34495e;
  font-family: 'roboto-bold-webfont';
  font-size: 15px;
  line-height: 1.467;
  padding: 8px 12px;
  height: 42px;
  -webkit-appearance: none;
  border-radius: 6px;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
  transition: border .25s linear, color .25s linear, background-color .25s linear;
}
.form-group.focus .form-control,
.form-control:focus {
  border-color: #1abc9c;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.form-control-one:-moz-placeholder {
  color: #b2bcc5;
}
.form-control-one::-moz-placeholder {
  color: #b2bcc5;
  opacity: 1;
}
.form-control-one:-ms-input-placeholder {
  color: #b2bcc5;
}
.form-control-one::-webkit-input-placeholder {
  color: #b2bcc5;
}
.form-control-one.placeholder {
  color: #b2bcc5;
}
.form-control-one {
position: absolute;
left: 43.5%;
top: 485%;
  border: 2px solid #bdc3c7;
  color: #34495e;
  font-family: 'roboto-bold-webfont';
  font-size: 15px;
  line-height: 1.467;
  padding: 8px 12px;
  height: 42px;
  -webkit-appearance: none;
  border-radius: 6px;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
  transition: border .25s linear, color .25s linear, background-color .25s linear;
}
.form-group.focus .form-control-one,
.form-control-one:focus {
  border-color: #1abc9c;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.n5-signup{
position: absolute;
left: 35%;
top: 420%;
}
input[type=checkbox] {display:none;}
.container {
position: absolute;
top: 492%;
left: 43.7%;
}
span {
background-color:#BBBBBB;
-webkit-border-radius:4px;
border-radius:4px;
color:#FFF;
font-size:100%;
text-decoration:none;
font-family:'roboto-bold-webfont';
text-align:center;
width:212px;
height:40px;
line-height:40px;
cursor:pointer;
display:block;
-webkit-transition:background-color 150ms ease-in;
-moz-transition:background-color 150ms ease-in;
-ms-transition:background-color 150ms ease-in;
-o-transition:background-color 150ms ease-in;
transition:background-color 150ms ease-in;
}
span:hover {
background-color:#E74C3C;
}
input[type=checkbox]:checked + span {
background-color:#E74C3C;
text-decoration:none;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
background:#E74C3C url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX9JREFUeNpi+P//PwMNsS4QbwBiLnQ5WlqqAsRP/0PARiBmoYfFkkB8+z8qWALEjLS0mB+IL/3HDibSymJQXB7/jx/UgNSCvU4lwAbEG4DYkwi1WUxUspQZiOcRaSkIWOAKMk0Sg3jaf+IBOIVjMyQWiH8DsR+RljaTYOkBWJ5GNwRk2R+ooh9A7ETA0jwSLL0ATfEYqRpkyVc0xR+A2AyHpdFA/I9IS0F5WhRbAWIEtQQbeAXE6lhC5jeRlj4GYgVsRaYK1HBCmmWgmuyxhAwu8BpaXjNgs/gYkYbcAGIXPCGDDkCOM8eVPkCEFhE+JhX8BGJnfAkTxgC57BOVLAXlihBC2RA9Vf+k0FJQKk8nJv+jCwQi5WNyQAWxpR02wRQS8icy6CKlmMUlUUGipfOQK3lKLAbhdhIKfWZS6258kiAfzCZg6V4gZiOn0UBIAcgn63BYehK50Ke2xQxQH+3FUoqJUtJMIlYhLxAfxVJu09xiWENuMxCrUaNhCBBgAOAVfjALa5TLAAAAAElFTkSuQmCC) no-repeat 7% center;
background-size:15px 13px;
}
input[type=checkbox]:checked:hover + span {
background-color:#dd5244;
color:rgba(255,255,255,0.5);
text-decoration:none;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
background:#dd5244 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAS5JREFUeNq8110OgjAMAGBGvIY3VESjt9jPg95PT+LccBIZ7dYOWJPGB+g+Ymg3hLW2QeLkcu/y2pSFdvl0eQevehjI3uXbfkMh96TShFq/xhG6J4faAtxEtSBOQTm4QWpnOBWl4CZT69fuYpiCpnBDrB1xLhrjgoFO8F1oGcFslUv4bV32zFoxmOHJta0XMn65dC0UaiddA8UGiN4axeC1cUkdmWviEls/NwL1FqjPNtNvoimPdC3yRCUTiTXbt0R/oSnw2iiK10BBvBY6w2uiE3xJr8oFtcrvxy/fVcyeVdGx98yotcOxN/znHeMUIhdMOG8c4reagssF43VEoT5O4ZJwvNUUFJtcEE5BMXyGpnanf5yDxjiI+hSJj7YunEBvhbuTCh9tD+jiR4ABAJ0SrJgNr1UAAAAAAElFTkSuQmCC) no-repeat 7% center;
background-size:15px 15px;
}
.button-login {
position: absolute;
top: 497.2%;
left: 43.7%;
height: 15px;
width: 160px;
margin-top: 10px;
margin-right: 10px;
padding: 14px 26px;
font-size: 15px;
color: #ffffff;
text-align: center;
font-weight: bold;
-webkit-transition: background 0.2s ease-in-out;
color: #ffffff;
-webkit-border-radius: 3px;
font-family: Roboto-Condensed, sans-serif;
}
.button-login:active {
    padding-top: 15px;
    margin-bottom: -1px;
}
.button-login, .button-login:hover .button-login:active{
outline: 0 none;
    text-decoration: none;
    color: #ffffff;
}
.button-third {
    background-color: #0E7AE0;
    box-shadow: 0px 3px 0px 0px #0A559C;
}
.button-third:hover {
    background-color: #2570B7;
}
.button-third:active {
    box-shadow: 0px 1px 0px 0px #0E7AE0;
}
.about-nexus{
position: absolute;
top: 515%;
left: 10%;
}
#google-logo{
font-family: 'catull-webfont';
font-size: 200%;
color: #C5C4C3;
position: absolute;
text-decoration: none;
top: 621%;
left: 48.5%;
}

这是我的HTML代码（对于我的HTML的不合适编码而感到抱歉）

<html>
<body>
<link rel="stylesheet" type="text/css" href="props.css">
<div id="bg-topbottom"></div>
<a name="features"><div id="bg-bottom"></div></a>
<div id="bg-bottom-first"></div>
<div id="bg-bottom-second"></div>
<a name="signup"><div id="bg-bottom-third"></div></a>
<a name="about"><div id="bg-bottom-fourth"></div></a>
<a name="fifth"><div id="bg-bottom-fifth"></div></a>
<div class="features"><a href="#features" data-hover="Features">Features</a></div>
<div class="signup"><a href="#signup" data-hover="Sign Up">Sign Up</a></div>
<div class="about"><a href="#about" data-hover="About">About</a></div>
<div class="Nexus5"><img src="N5-preview.png"></div>
<div id="logo"><img src="logo2.png"></div>
<div id="nexus-info"><img src="nexus5.png"></div>
<div id="ngif"><img src="GELANIM.gif" width="220" height="378"></div>
<div class="first-content"><img src="first-content.png"></div>
<a href="#fifth" div id="cursor-down" class="floating"><img src="player.png"></div></a href>
<a href="#" class="button-pricetag button">Buy Now</a href>
<div class="overlay-cam"><img src="overlay-cam.png"></div>
<div class="cam-animation"><img src="camera.gif"></div>
<div class="video-animation"><img src="n5-video.png"></div>
<div class="cam-animation-one"><img src="camera.gif" width="370"></div>
<div class="cam-kit"><img src="cam-kit.png"></div>
<a href="#" class="button-cam button-second">Explore</a href>
<div class="three-features"><img src="three-features.png"></div>
<div class="n5-signup"><img src="n5-signup.png"></div>
<input type="text" placeholder="Enter your Email" class="form-control" />
<input type="password" placeholder="Enter your Password" class="form-control-one" />
<div class="container">
<label><input type="checkbox" name="Remember me" class="protype1"/><span>Remember me</span></label>
</div>
<a href="http://plus.google.com" class="button-login button-third">Sign in</a href>
<div class="about-nexus"><img src="about-nexus.png"></div>
<div id="google-logo">Google</div>
</body>
</html>

EDITED 无论如何，这是我通过Google Drive

主持的实际网站项目

Answer 1

您的所有尺寸似乎都在使用％，这可能相当棘手。相反，您可以在您的样式中插入断点（类似于您已经拥有的@media），并准确定义您希望站点查看各种宽度的方式。它看起来像这样：

@media (min-width: 400px) {
    body {background-color: blue;}
}

@media (max-width: 1200px) {
    body {background-color: pink;}
}

@media (min-width: 480px) and (max-width: 1200px) {
    body {background-color: yellow;}
}

以上只是示例，它们并没有真正协同工作。它只是为了向您展示基于不断变化的屏幕宽度为您的网站设计样式的语法。 Here's a great list你可以做到这一点。另请考虑使用bootstrap，这样您就可以使用考虑移动设备的类来标记您的页面。（他们用@media来完成这个）。

如何在调整浏览器大小时自动在CSS3中设置网站尺寸？

1 个答案: