Html 当我将浏览器切换到全屏或从全屏切换到全屏时，设计会发生变化_Html_Css

Html 当我将浏览器切换到全屏或从全屏切换到全屏时，设计会发生变化

html css

Html 当我将浏览器切换到全屏或从全屏切换到全屏时，设计会发生变化,html,css,Html,Css,当我在我的浏览器（Google Chrome）中以100%的速度运行这段代码时，一切正常。然而，当我把它最小化时，div就会到处都是。我不确定是否是元标记，是否遗漏了什么，或者是否在代码中包含了一些不应该出现的内容 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html"> <meta http-equiv="cache-control"

当我在我的浏览器（Google Chrome）中以100%的速度运行这段代码时，一切正常。然而，当我把它最小化时，div就会到处都是。我不确定是否是元标记，是否遗漏了什么，或者是否在代码中包含了一些不应该出现的内容

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<meta http-equiv="cache-control" content="public">
<meta http-equiv="pragma" content="cache">
<meta http-equiv="content-language" content="en">
<meta name="description" content="A Website Designed For Young People To Enjoy Themselves Through Irish">
<meta name="keywords" content="Youth Zone, Crios Óige, Irish, Gaeilge, Irish Videos, Fun with Irish">
<meta name="author" content="Edward Leonard">
<meta name="robots" content="index, follow">
<meta name="googlebot" content="archive">
<meta charset="UTF-8">
<title>Crios Óige | Abhaile</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body bgcolor="#009900";>
<div id="divide1">
</div>
<div id="divide2">
</div>
<div id="header">
    <img src="file:///E:/Crios%20Óige/Crios%20Oige%20Images/Logo.png" id="logo">
    <img src="file:///E:/Crios%20Óige/Crios%20Oige%20Images/Title.PNG" id="title">
    <img src="http://www.youtharts.ie/sites/youtharts.ie/files/NYCI%20Logo%20Full%20JPG_2.jpg" id="youthcouncil">
</div>
<div id="toolbar">
    <div id="homebutton">
        <div id="homebuttonlink">
            <b><a href="index.html" id="homebuttonlinkstyle">Abhaile</a></b>
        </div>
    </div>
    <div id="videosbutton">
        <div id="videosbuttonlink">
            <b><a href="videos.html"; id="videosbuttonlinkstyle">Fiseán</a></b>
        </div>
    </div>
    <div id="imagesbutton">
        <div id="imagesbuttonlink">
            <b><a href="images.html"; id="imagesbuttonlinkstyle">Pictiúir Greannmhar</a></b>
        </div>
    </div>
    <div id="gamesbutton">
        <div id="gamesbuttonlink">
            <b><a href="games.html"; id="gamesbuttonlinkstyle">Cluichí</a></b>
        </div>
    </div>
    <div id="sportbutton">
        <div id="sportbuttonlink">
            <b><a href="sport.html"; id="sportbuttonlinkstyle">Spórt</a></b>
        </div>
    </div>
    <div id="contactusbutton">
        <div id="contactusbuttonlink">
            <b><a href="contactus.html"; id="contactusbuttonlinkstyle">Déan teagmháil linn</a></b>
        </div>
    </div>
</div>
<div id="aboutus">
    <div id="aboutustitle">
        <p id="aboutustitlestyle">Maidir Linne</p>
    </div>
    <p id="aboutuscontent">***************************************************************************************************************************************************************************************************************************************************************************************************************************</p>
</div>
</body>
</html>

缺少的一个元标记是视口：

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">

另一个问题是您的设计没有响应性。每次设计中断时，应使用媒体查询添加断点。这基本上意味着你应该开始最小化你的屏幕（你可以对不同的分辨率和移动设备使用awesome Chrome的仿真功能），每次设计开始中断时，你应该添加一个断点（在这个特定的宽度）。在断点内，您将拥有不同的css规则，这些规则将使设计适用于此特定断点

本主题有大量教程，例如：

编辑：

在你们的设计中，我要改变的另一件事是——它在很大程度上取决于元素的相对位置。我会使用

display:inline block

或

float:left/right

将元素放置在彼此相邻的位置。在使用“display:inline block”的地方，您使用的是错误的（在内部div元素中）。您应该在外部div（例如“gamesbutton”元素而不是“gamesbuttonlink”）上使用它。

您已经将许多元素的宽度设置为动态宽度（在css中使用类似于

宽度：27%

的内容）。请记住，每当调整屏幕大小时，这些元素也会按比例调整大小。如果无论屏幕大小如何，都希望元素保持相同的宽度，请使用

width:100px

固定宽度。高度也一样

如果您想要响应式设计，则应使用

@media

查询设置样式。看见只要满足查询的条件，就会应用这些样式。

最小化是指缩小大小吗？也许你应该研究一个响应式的设计：你能把它做成一把小提琴吗？请确认一下，但是你发布的css就是

样式表中包含的css。css

，对吗？这里有一个可以玩的。对不起，我该拿小提琴怎么办？我以前从未见过。所以不要使用百分比和像素。如果你不想在缩小窗口时使div缩小，那么是的。@EdwardLeonard这有助于解决你的问题吗？

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">