html - 为不同的屏幕分辨率大小重新调整 HTML 网站的大小(学校作业)-6ren

html - 为不同的屏幕分辨率大小重新调整 HTML 网站的大小(学校作业)

转载作者：太空宇宙更新时间：2023-11-04 10:12:07

这是我在这个网站上的第一篇文章，所以我会尝试做正确的事情，但如果我的格式错误或做任何愚蠢的事情，我深表歉意。

我正在做一份 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%);
}

感谢您的帮助。

最佳答案

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

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

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

您还可以使用 bootstrap 进行响应式设计和预制 CSS。它的工作量更少，而且是一个很好的解决方案。

关于html - 为不同的屏幕分辨率大小重新调整 HTML 网站的大小(学校作业)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37519385/

文章推荐： linux - 设置 sensu 时出错 "sensu must be a hash"

文章推荐： linux - 基于 View 选项卡定义要在 Jenkins 管道中运行的阶段

文章推荐： linux - 用其他信号中断信号处理程序？

jquery - 学校 CMS
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 9 年前。 Improve
php - 不要立即看出这背后的意义(php，学校)
我是一名二年级的 ICT 学生。今年之前我从未接触过 PHP，我们的讲师给了我们基础知识，并在学期末给了我们一个项目，该项目将结合我们在他的类(class)和数据库类(class)中学到的知识。我们要
学校 Javascript 和 HTML 基础知识
对于 JS 来说，我确实是个新手，而且我从学校收到了一个我无法理解的问题。我已经了解了一些，但非常感谢一些提示/帮助，因为我完全陷入困境! 它或多或少如下: 使用 HTML5 呈现一个网页，要求用户输
python - 如何访问链接的父模型的数据库模型字段，例如类(class)->学校->用户？
我对编程语言、django 和数据库模型相当陌生。所以我的问题很简单我在 models.py 中有 3 个模型 class UserProfileInfo(models.Model): # creat
javascript - W3 学校 cookie 的删除 cookie 按钮
是的，我知道 W3school，你们都讨厌它。我有时也会这样做，但现在它对我有帮助。如何为他们的网站制作删除 cookie 按钮？他们网站上的 cookie 示例: function setCo

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 为不同的屏幕分辨率大小重新调整 HTML 网站的大小(学校作业)