Question

这是我在这个网站上发表的第一篇文章，所以我会尝试做正确的事情，但如果我把事情弄错了或做任何愚蠢的事情，我很抱歉。

我正在为6月2日星期四的学校做作业，所以我真的很想找到一个绝望的答案。我需要我的网站能够针对不同的屏幕分辨率重新调整大小，我在这个网站上查看了其他答案，但大多数是关于制作移动网站。我已经阅读了有关媒体查询规则的内容，但我读到的所有内容都只是关于制作移动网站，但这看起来是一个很好的解决方案。非常感谢我能得到的任何帮助:)，这是我的代码供所有人查看：

HTML：

<!DOCTYPE html>
<html>
<link href='https://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">

<head>
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ann Mockett</title>
    <script src="code.js" type="text/javascript" charset="utf-8"></script>   
    <link href="style.css" rel="stylesheet" type="text/css">

    <!__NEEDS DESCRIPTION__>
    <meta name="description" content="Description of Site">

    <!__NEEDS KEYWORDS__>
    <meta name="keywords" content="Selection of Search Terms">

</head>
<body>

<nav>
    <ul>
      <li><div id="Ann-Nav"><a class="active" href="index.html">Ann Mockett</a></div></li>
      <li class="dropdown">
      <a href="work.html" class="dropbtn">Work</a>
      <div class="dropdown-content">
      <a href="#">TV</a>
      <a href="#">Film</a>
      <a href="#">Other</a>
      </div></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#about">About</a></li>
    </ul>
</nav>

<div class="bodyimg">
    <img src="images/placeholder.png">
</div>

<div class="box"><h3>TV Shows</h3><img src="images/placeholder.png"></div>
<div class="box"><h3>Movies</h3><img src="images/placeholder.png"></div>
<div class="box"><h3>Other Projects</h3><img src="images/placeholder.png"></div>
</body>

CSS：

    html{
    background-color: #fafafa;
}

h3 {
    margin: 0;
    font-size: 25px;
    font-family: font-family: 'Roboto', sans-serif;
}

body{
    width: auto;
    margin: auto;
    text-align: center;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #009688;
    box-shadow: 0px 3px 9px 0px rgba(0,0,0,0.67);
}

li {
    float: left;
}

li a, .dropbtn {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: #004D40;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    background-color: #80CBC4;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #4DB6AC;
}

.dropdown:hover .dropdown-content {
    display: block;
}

#Ann-Nav {
    font-family: 'Raleway', sans-serif;
    font-size: 30px;
}

.bodyimg img{
    height: 390px;
    width: 100%;
    display: block;
    margin-bottom: 16px;
}

.box {
    background-color: #A7FFEB;
    height: 230px;
    width: 32%;
    float: left;
    margin-left: 15px;
    margin-bottom: 12px;
    display: block;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.box img{
    height: 175px;
    width: 95%;
    display: block;
    margin: auto;
    position: relative;
    top: 50%;
    transform: translateY(-63%);
}

感谢您的帮助。

Answer 1

您可能想要使用媒体查询。

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

对于此示例，当屏幕宽度小于480px时，背景颜色变为浅绿色。您可以在W3Schools上找到更多信息！

您还可以使用bootstrap进行响应式设计和预制CSS。这是一项较少的工作和一个很好的解决方案。

Answer 2

由于您在此处提出了问题，我想在一行中回复：使用bootstrap

Answer 3

正如Nitsan，Tawfiq和Danooned所说，你应该研究媒体查询。它们允许您根据不同的设备规格以不同方式设计页面的某些方面。这是一个帮助您入门的链接：

https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=en

**如果你的老师/教授允许你使用bootstrap，我肯定会从那里开始，因为它会为你完成大部分繁重的工作。

Answer 4

我希望这可以满足您的需求。我用它来创建html模板，从零到大约5个响应页面只需20分钟。 http://tools.qixstudio.com/reycss.css

网络示例：http://www.supersukses.net/，http://microsite.detik.com/display/kabar-dpd/，http://microsite.detik.com/display/preview-telkom/。

它还不是一个完美的CSS，但希望可以成为构建响应式网站的捷径。

Answer 5

以下是所有设备的媒体查询。您可以使用它们来使您的网站响应。

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* STYLES GO HERE */
}



/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* STYLES GO HERE */
}



/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* STYLES GO HERE */
}



/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* STYLES GO HERE */
}



/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* STYLES GO HERE */
}



/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* STYLES GO HERE */
}



/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* STYLES GO HERE */
}



/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* STYLES GO HERE */
}

/* iPhone 5 (portrait &amp; landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* STYLES GO HERE */
}



/* iPhone 5 (landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* STYLES GO HERE */
}



/* iPhone 5 (portrait)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* STYLES GO HERE */
}

您也可以访问https://css-tricks.com/css-media-queries/

针对不同的屏幕分辨率大小调整HTML网站大小（学校作业）

5 个答案: