Question

基本上，我正在做一个作业，要求我使用HTML和CSS来创建网站（他们根本没有教我们），最终我完全不顾网站的屏幕尺寸和响应方式，因此，每当我在平板电脑等较小的屏幕上浏览时，网站上的所有内容都会完全失真。如何做到这一点，以便我的网站自动调整以适合所有屏幕尺寸和分辨率，例如1024x768萤幕。

这是CSS页面：

body {
    margin: 0;
    background-color: #D2EBF9}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #1D2E51;
    width: 100%;
    min-width: 1024px;
    position: absolute;
    top: 0;
}

li {
    float: left;
    border-right:1px solid #bbb;
}


li a {
    font-family: 'Roboto', sans-serif;
    display: block;
    color: #D2EBF9;
    padding: 18px 35px;
    text-decoration: none;
}

li a:hover {
    background-color: #0E527C;
}

li a:focus {
    background-color: #0E527C;
}

.active {
    background-color: #0E527C;
    text-decoration: underline;
}

.textboxes {
    width: 52.5%;
    height: 350px;
    background-color: whitesmoke;
    margin-top: 50px;
    margin-right: 0px;
    margin-left: 50px;
    margin-bottom: 50px;
    text-align: justify;
}

.textboxes2 {
    width: 52.5%;
    height: 550px;
    background-color: whitesmoke;
    margin-top: 50px;
    margin-right: 0px;
    margin-left: 50px;
    margin-bottom: 50px;
    text-align: justify;
}

.textboxes3 {
    width: 52.5%;
    height: 200px;
    background-color: whitesmoke;
    margin-top: 50px;
    margin-right: 0px;
    margin-left: 500px;
    margin-bottom: 50px;
    text-align: justify;
}

.textboxes4 {
    width: 52.5%;
    height: 700px;
    background-color: whitesmoke;
    margin-top: 50px;
    margin-right: 0px;
    margin-left: 500px;
    margin-bottom: 50px;
    text-align: justify;
}

.textboxes6 {
    width: 52.5%;
    height: 700px;
    background-color: whitesmoke;
    margin-top: 50px;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 50px;
    text-align: justify;
}

.textboxes7 {
    width: 52.5%;
    height: 400px;
    background-color: whitesmoke;
    margin-top: 50px;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 50px;
    text-align: justify;
}

.textboxheading {
    padding: 17px 20px 16px;
    line-height: 17px;
    font-size: 10vw;
    font-weight: bold;
    color: #333;
    border-bottom: 1px solid #e9eff4;
}


span.headings {
    font-family: 'Roboto', sans-serif;
    font-size: 110%;
    color: #D2EBF9;
}

.HTB {
    width:  52.5%;
    height: 35px;
    background-color:#1D2E51;
    margin-left: 50px;
    margin-bottom: -50px;
    margin-top: 50px;
    margin-right: 0px;
    border-bottom: 1px solid black;
}

.HTBtop {
    width:  52.5%;
    height: 35px;
    background-color:#1D2E51;
    margin-left: 50px;
    margin-bottom: -50px;
    margin-top: 100px;
    margin-right: 0px;
    border-bottom: 1px solid black;
}

.HTBtop2 {
    width:  52.5%;
    height: 35px;
    background-color:#1D2E51;
    margin-left: 50px;
    margin-bottom: -50px;
    margin-top: 220px;
    margin-right: 0px;
    border-bottom: 1px solid black;
}

.HTBtop3 {
    width:  52.5%;
    height: 35px;
    background-color:#1D2E51;
    margin-left: 500px;
    margin-bottom: -50px;
    margin-top: 325px;
    margin-right: 0px;
    border-bottom: 1px solid black;
}

.HTBtop4 {
    width:  52.5%;
    height: 35px;
    background-color:#1D2E51;
    margin-left: 500px;
    margin-bottom: -50px;
    margin-top: 100px;
    margin-right: 0px;
    border-bottom: 1px solid black;
}

.HTBtop5 {
    width:  52.5%;
    height: 35px;
    background-color:#1D2E51;
    margin-left: 500px;
    margin-bottom: -50px;
    margin-top: 100px;
    margin-right: 0px;
    border-bottom: 1px solid black;
}

.HTBtop6 {
    width:  52.5%;
    height: 35px;
    background-color:#1D2E51;
    margin-left: 0px;
    margin-bottom: -50px;
    margin-top: 100px;
    margin-right: 0px;
    border-bottom: 1px solid black;
}

.mainheading {
    text-align: center;
    font-size: 40px;
    color: #FFFFFF;
    display: center;
    font-family: 'Luckiest Guy', cursive;
}

p.maintext {
    font-family: Arial, Helvetica, sans-serif;
    text-align: justify;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 160%;
    color: black;
}

pre.maintext1 {
    font-family: Arial, Helvetica, sans-serif;
    text-align: justify;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 160%;
    color: black;
}

img.style {
    margin-left: 1150px;
    margin-bottom: 0px;
    margin-top: 100px;
    position: absolute;
    bottom: 500px;
    height: 350px;
    width: 580px;
    border-style: solid;
    max-width:100%;
}

img.style2 {
    margin-left: 1150px;
    width: 580px;
    height: 350px;
    margin-top: 100px;
    position: absolute;
    bottom: 60px;
    border-style: solid;
}

img.style3 {
    margin-left: 1150px;
    width: 580px;
    height: 250px;
    margin-top: 100px;
    position: absolute;
    bottom: 640px;
    border-style: solid;
}

img.style4 {
    margin-left: 1150px;
    width: 580px;
    height: 250px;
    margin-top: 100px;
    position: absolute;
    bottom: 320px;
    border-style: solid;
}

img.style5 {
    margin-left: 1150px;
    width: 580px;
    height: 250px;
    margin-top: 100px;
    position: absolute;
    bottom: 20px;
    border-style: solid;
}

img.style6 {
    width: 580px;
    height: 300px;
    margin-top: 100px;
    position: absolute;
    bottom: 180px;
    left: 70px;
    border-style: solid;
}

img.style7 {
    width: 580px;
    height: 300px;
    margin-top: 100px;
    position: absolute;
    bottom: 180px;
    left: 670px;
    border-style: solid;
}

img.style8 {
    width: 580px;
    height: 300px;
    margin-top: 100px;
    position: absolute;
    bottom: 180px;
    left: 1270px;
    border-style: solid;
}

Answer 1

为此，我们可以使用媒体查询。例如，此代码仅在<99> px或更小的屏幕上运行

@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

这将适用于您提到的 1024x768屏幕

@media only screen and (min-device-width:768px) and (max-device-width:1024px) {
    body {
      background-color:#ccc;
    }
}

您可以在此link上查看更多信息。并且也检查bootstrap。对于Build响应式，移动优先的项目，这是一个非常好用的库。

如何使该网页适合任何屏幕尺寸或不同尺寸？

1 个答案: