好吧，我现在有 500 行 css 和另外 1500 行用于媒体查询，但它仍然没有响应。它打破了特定的决议。顺便说一下，这是我正在构建的第一个网站。
我使用 CSS 定位错误了吗？我怎样才能让它不会那么容易坏掉？ 我认为我应该每次都使用其他东西而不是 position: absolute。
html {
font-family: 'Proxima Nova';
font-weight: 200;
font-size: 10px;
max-height: 100%;
}
body {
width: 100%;
color: #fff;
background-color: #00000f;
text-rendering: optimizeLegibility;
font-family: 'Proxima Nova';
font-weight: 200;
font-size: 10px;
overflow-x: hidden;
}
#use-portrait {
color: #fff;
visibility: hidden;
display: block;
font-size: 2rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
#container {
width: 100%;
margin: 0 auto;
text-rendering: optimizeLegibility;
}
/*Header Start*/
header {
width: 100%;
font-weight: 400;
position: absolute;
top: 0;
}
::selection {
color: #77dff1;
}
/*Navigation Start*/
#bara-wrap {
max-width:1000px;
margin: 0 auto;
}
#bara {
max-width: 1000px;
margin: 0 auto;
}
.logo {
width: 10%;
float: left;
}
#bara ul {
display: inline-block;
text-align: center;
position: absolute;
top: 50%;
left: 50.5%;
transform: translate(-50%, -50%);
}
#bara li{
display: inline;
padding: 0 2em;
}
#bara a:hover {
transition: all 0.5s;
border-bottom: 1px solid #77dff1;
color: #77dff1;
}
#bara a {
color: #eeede7;
font-weight: 600;
font-size: 1.8rem;
text-decoration: none;
}
#social {
float: right;
display: inline-block;
}
ul.social {
text-align: center;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
}
#social li {
display: inline;
color: #eeede7;
margin: 8px;
}
a.xx1 {
color: #eeede7;
text-decoration: none;
font-size: 2.5rem;
}
a.xx1:hover {
transition: ease 0.4s;
color: #77dff1;
}
#active {
color: #77dff1 !important;
border-bottom: 1px solid #77dff1;
}
/*Continut centru*/
#central {
margin-top: 11vw;
font-family: 'Roboto Condensed', sans-serif;
user-select: none;
position: relative;
display: table;
width: 100%;
}
#intro-wrap {
display: table-cell;
vertical-align: middle;
max-width: 710px;
width: 100%;
}
#intro {
text-transform: uppercase;
color: #77dff1;
font-size: 30rem;
text-align: center;
}
.intro {
font-size: 2.4rem;
text-align: center;
margin: 0 auto;
max-width: 710px;
line-height: 35px;
color: #eeede7;
}
/*Buton MORE*/
#button-wrap {
postion: relative;
text-align: center;
margin-top: 2.5vw;
}
#more {
font-family: 'Proxima Nova';
font-weight: 600;
background-color: transparent;
text-align: center;
text-decoration: none;
font-size: 2.5rem;
color: #fff;
cursor: pointer;
border: 2px solid #77dff1;
padding: 15px;
margin: 0 auto;
}
#more:hover {
font-weight: 100;
color: #00000f;
background: #77dff1;
}
/*Minge*/
#hr {
position: absolute;
bottom: 10%;
width: 100%;
margin: 0 auto;
}
hr {
border-color: #77dff1;
max-width: 90%;
}
/*ABOUT.html*/
#central-about {
margin: 0 auto;
max-width: 1000px;
margin-top: 15vw;
display: flex;
font-family: 'Roboto Condensed', sans-serif;
}
#dreamer {
margin-left: 4rem;
}
.dumbbell {
width: 12rem;
position: relative;
bottom: 20%;
}
#gym {
margin-left: 4rem;
}
#football {
margin-left: 4rem;
}
#health {
margin-left: 4rem;
}
#code {
margin-left: 4rem;
}
#tech {
margin-left: 4rem;
}
#camera {
margin-left: 4rem;
}
#perfectionist {
margin-left: 4rem;
}
#hover {
position: absolute;
left: 44%;
top: 42%;
}
.description1,
.description2,
.description3,
.description4,
.description5,
.description6,
.description7,
.description8 {
color: #77dff1;
display: none;
font-size: 3.5rem;
margin: 0 auto;
position: absolute;
top: 70%;
text-align: center;
left: 5%;
max-width: 90%;
line-height: 3.5rem;
}
.color {
color: #77dff1;
}
.hov {
width: 12rem;
position: relative;
bottom: 20%;
display: none;
}
#about {
font-family: 'Roboto Condensed';
width: 100%;
font-weight: bold;
position: absolute;
text-align: center;
top: 20%;
display: none;
font-size: 2.4rem;
color: #77dff1;
}
/*SKILLS.HTML*/
#canvas {
position: absolute;
bottom: 62%;
left: 35%;
width: 600px;
height: 250px;
margin: 0 auto;
}
#central-skills {
margin: 0 auto;
max-width: 1300px;
margin-top: 15vw;
font-family: 'Roboto Condensed', sans-serif;
user-select: none;
font-weight: bold;
font-size: 2.4rem;
}
.trying {
text-align: center;
}
#website ul {
margin-top: 2rem;
list-style-type: none;
}
#websites li:before {
content: "\2714\0020";
}
#websites {
position: absolute;
top: 50%;
max-width: 100%;
font-size: 0 !important;
}
.trying {
position: absolute;
top: 20%;
left: 35%;
}
.websites {
text-align: center;
position: absolute;
left: 35%;
bottom: 43%;
}
#websites {
position: absolute;
top: 55%;
margin-left: 10rem;
}
#websites ul {
margin-top: 5rem;
}
#websites li {
font-size: 2.4rem;
}
.list-adv {
display: inline-block;
border: 2px solid #77dff1;
padding: 6rem;
margin: 0;
color: #77dff1;
}
.scratch {
padding: 6rem 5.5rem 6rem 5.6rem;
}
.mobile-skills {
visibility: hidden;
}
#icons {
font-size: 10rem;
max-width: 1000px;
margin: 0 auto;
margin-top: 6vw;
}
.fa-html5 {
float: left;
}
.fa-js-square {
position: absolute;
left: 50%;
-ms-transform: translate(-50%);
transform: translate(-50%);
}
.fa-css3-alt {
float: right;
}
.canvas {
width: 600px;
}
/*CONTACT.HTML*/
#contact {
margin: 0 auto;
margin-top: 11vw;
max-width: 1040px;
}
#social-contact-wrap {
max-width: 1000px;
margin: 0 auto;
}
.contactx {
font-size: 2.4rem;
text-align: center;
margin: 0 auto;
max-width: 710px;
line-height: 3.5rem;
color: #eeede7;
font-family: 'Roboto Condensed';
}
.communicate {
font-size: 3.5rem;
text-align: center;
margin: 0 auto;
margin-top: 2vw;
max-width: 710px;
line-height: 3.5rem;
color: #77dff1;
font-family: 'Roboto Condensed';
}
.social-contact {
margin: 0 auto;
width: 1000px;
position: absolute;
top: 65%;
display: inline-block;
}
.social-contact > li {
display: inline;
cursor: pointer;
}
.snapchat {
float: right;
}
.facebook {
float: left;
}
.email {
position: relative;
left: 35%;
}index.html
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="use-portrait">
<h6>To use this website you must use a portrait orientation!</h6>
<h6>If you are using a computer and encountering this error, make the window bigger.</h6>
</div>
<div id="container">
<header id="header" style="display:none;">
<div id="bara-wrap">
<img src="img/logo.png" alt="LOGO" class="logo" />
<nav id="social">
<ul class="social">
<li class="x1"><a href="" target="_blank" title="Only for contact, message me there!" class="xx1"><i class="fab fa-facebook-f"></i></a></li>
<li class="x1 x2 x3"><a href="" title="Contact me via email!" class="xx1 xx2"><i class="far fa-envelope"></i></a></li>
</ul>
</nav>
<nav id="bara">
<ul class="butoane">
<li class="btn"><a href="index.html" id="active" class="home x1">home</a></li>
<li class="btn"><a href="about.html" class="about x1">about</a></li>
<li class="btn"><a href="skills.html" class="skills x1">skills</a></li>
<li class="btn"><a href="contact.html" class="contact x1">contact</a></li>
</ul>
</nav>
</div>
</header>
<div id="central">
<div id="intro-wrap">
<h1 id="intro" style="display:none;">hi</h1>
<h6 class="intro" style="display:none;">This is a small step to achieve one of my dreams. A small place on the internet where people get to know me. Creative and functional, built with passion and hard work.</h6>
<div id="button-wrap">
<button type="button" id="more" style="display:none;">Learn more</button>
</div>
</div>
</div>
<div id="hr" style="display: none;">
<hr />
</div>
</div>
skills.html
<body>
<div id="use-portrait">
<h6>To use this website you must use a portrait orientation!</h6>
<h6>If you are using a computer and encountering this error, make the window bigger and refresh the page.</h6>
</div>
<div id="container">
<header id="header" style="display: none;">
<div id="bara-wrap">
<img src="img/logo.png" alt="LOGO" class="logo" />
<nav id="social">
<ul class="social">
<li class="x1"><a href="" target="_blank" title="Only for contact, message me there!" class="xx1"><i class="fab fa-facebook-f"></i></a></li>
<li class="x1 x2 x3"><a href="" title="Contact me via email!" class="xx1 xx2"><i class="far fa-envelope"></i></a></li>
</ul>
</nav>
<nav id="bara">
<ul class="butoane">
<li class="btn"><a href="index.html" class="home x1">home</a></li>
<li class="btn"><a href="about.html" class="about x1">about</a></li>
<li class="btn"><a href="skills.html" id="active" class="skills x1">skills</a></li>
<li class="btn"><a href="contact.html" class="contact x1">contact</a></li>
</ul>
</nav>
</div>
</header>
<div id="central-skills">
<div id="canvas">
<canvas class="canvas"></canvas>
<script src="js/canvas.js"></script>
</div>
<div id="skills" style="display: none;">
<h6 class="trying">Currently I consider myself familiar and comfortable with:</h6>
<h6 class="mobile-skills">html CSS JavaScript jQuery Bootstrap Canvas</h6>
<div id="icons">
<ul>
<li id="html"><i class="fab fa-html5"></i></li>
<li id="js"><i class="fab fa-js-square"></i></li>
<li id="css"><i class="fab fa-css3-alt"></i></li>
</ul>
</div>
<div id="websites">
<ul>
<li class="list-adv 1">Responsive</li>
<li class="list-adv 2">Using a clean and easy to follow code</li>
<li class="list-adv 3">Clean and good-looking</li>
<li class="list-adv 4">Optimized for Search Engines (SEO)</li>
<li class="list-adv scratch">Coded from scratch (unless there is a need of a CMS)</li>
</ul>
</div>
</div>
</div>
</div>
contact.html
<body>
<div id="use-portrait">
<h6>To use this website you must use a portrait orientation!</h6>
<h6>If you are using a computer and encountering this error, make the window bigger.</h6>
</div>
<div id="container">
<header id="header" style="display:none;">
<div id="bara-wrap">
<img src="img/logo.png" alt="LOGO" class="logo" />
<nav id="social">
<ul class="social">
<li class="x1"><a href="" target="_blank" title="Only for contact, message me there!" class="xx1"><i class="fab fa-facebook-f"></i></a></li>
<li class="x1 x2 x3"><a href="" title="Contact me via email!" class="xx1 xx2"><i class="far fa-envelope rg"></i></a></li>
</ul>
</nav>
<nav id="bara">
<ul class="butoane">
<li class="btn"><a href="index.html" class="home x1">home</a></li>
<li class="btn"><a href="about.html" class="about x1">about</a></li>
<li class="btn"><a href="skills.html" class="skills x1">skills</a></li>
<li class="btn"><a href="contact.html" id="active" class="contact x1">contact</a></li>
</ul>
</nav>
</div>
</header>
<div id="contact">
<h6 class="contactx" style="display: none;">Want to contact me?</h6>
<h6 class="communicate" style="display: none;">I love to talk with people. Don't be shy, just do it!</h6>
<div id="social-contact-wrap">
<ul class="social-contact" style="display: none;">
<li class="facebook"><i class="fab fa-facebook fa-10x"></i></li>
<li class="email"><i class="far fa-envelope fa-10x"></i></li>
<li class="snapchat"><i class="fab fa-snapchat fa-10x"></i></li>
</ul>
</div>
</div>
</div>
about.html
<div id="use-portrait">
<h6>To use this website you must use a portrait orientation!</h6>
<h6>If you are using a computer and encountering this error, make the window bigger.</h6>
</div>
<div id="container">
<header id="header" style="display: none;">
<div id="bara-wrap">
<img src="img/logo.png" alt="LOGO" class="logo" />
<nav id="social">
<ul class="social">
<li class="x1"><a href="" target="_blank" title="Only for contact, message me there!" class="xx1"><i class="fab fa-facebook-f"></i></a></li>
<li class="x1 x2 x3"><a href="" title="Contact me via email!" class="xx1 xx2"><i class="far fa-envelope"></i></a></li>
</ul>
</nav>
<nav id="bara">
<ul class="butoane">
<li class="btn"><a href="index.html" class="home x1">home</a></li>
<li class="btn"><a href="about.html" id="active" class="about x1">about</a></li>
<li class="btn"><a href="skills.html" class="skills x1">skills</a></li>
<li class="btn"><a href="contact.html" class="contact x1">contact</a></li>
</ul>
</nav>
</div>
</header>
<h2 id="about">This is the place where you can learn more about me. I've listed the most important things about myself.</h2>
<div id="central-about" style="display: none;">
<h6 id="hover" style="font-weight: italic;">(hover on any of the images to learn more)</h6>
<div id="dreamer">
<i class="fa fa-cloud fa-8x" aria-hidden="true"></i>
<p class="description1">Definitely a dreamer. I see myself succesful in every situation. I don't fear failing, because I always aim high so I can progress.</p>
</div>
<div id="gym">
<img src="img/non.png" alt="dumbbell" class="dumbbell" />
<img src="img/hov.png" alt="hov" class="hov" />
<p class="description2">Addicted to working out. I was skinny my whole life and at some point I've decided to put some muscles. I achieved my dream of having a great physique but I'm still not 100% satisfied so I'm training even harder.</p>
</div>
<div id="football">
<i class="fab fa-dribbble fa-8x" aria-hidden="true"></i>
<p class="description3">I love to play football. I've played it my whole life, and I'm still doing it for a local team. As I'm young, I train hard and I know someday I will achieve what I want.</p>
</div>
<div id="health">
<i class="far fa-heart fa-8x"></i>
<p class="description4">I take a lot of care of my health. Since I've started working out I decided that I have to sleep right, drink enough water and eat a lot of fruits and vegetables, so I will have more energy to code!</p>
</div>
<div id="code">
<i class="fas fa-code fa-8x"></i>
<p class="description5">I love to code. I've started with C++ a long time ago and I'm still studying it at my high school. At some point I met web developing and I instantly fell in love with it.</p>
</div>
<div id="tech">
<i class="fas fa-desktop fa-8x"></i>
<p class="description6">I love technology. Every device, every feature! I love to fix any type of problems about it, and if I can't I always have to find a way to, mostly using Google.</p>
</div>
<div id="camera">
<i class="fas fa-camera fa-8x"></i>
<p class="description7">I enjoy to take photos and show off my results from working out. Yes, I know, pretty arrogant, but it's a nice feeling seeing yourself in great shape!</p>
</div>
<div id="perfectionist">
<i class="fas fa-check fa-8x"></i>
<p class="description8">Perfectionist. Things have to be perfect everytime for me, if they don't the project isn't finished! I always have to be the best, if not it will makes me train/study even more.</p>
</div>
</div>
</div>我的精神快崩溃了。在 1.5k 行 @media 查询之后(是的，我知道这很糟糕，在完成这些查询之后我意识到这不行，我什至不得不使用 !important 来搞笑。)它仍然没有响应。我应该使用 Bootstrap 。这些是媒体查询。 (我无法将其作为片段发布，因为代码太多)https://pastebin.com/rN1ty6vm 我现在很生气。我觉得主要的 css 不好，这就是为什么它很容易坏掉的原因。你能帮我修一下吗？
最佳答案
Position:absolute 是(几乎)从来没有的方式。无论您尝试多少次媒体查询，您都会陷入迷宫中，您将无法摆脱迷宫。
通过将所有内容都设置为 position:absolute，您将从 flow 中删除所有内容，因此基本上使它非常具体。事物应该能够自动将自己定位在其他事物下方(display:block、清除等)或并排( float 、内联 block 、flex、网格等)，而无需重复严格定位left, top 等
大多数情况下，将显示从内联 block 、flex 等切换到 display:block 时，使元素具有响应性很容易。在网格上只是使用自动调整或自动填充，或调整查询中的网格模板列。 Flexbox 通常只是 self 修复，或者几乎不需要更改 flex-basis。
您尝试自己做决定，而不是反复引导，这是一个不错的决定，但是您在不了解正确 CSS 定位的理论的情况下到处都是。所以最好找到 some有关 CSS 定位的文档并重新开始。
同时避免通过 ID 引用元素，这会在尝试修改它们时给您带来相当多的特异性问题。 Here's a great tutorial about it .
并在使用过程中尝试更好地理解盒子模型。
也许试试(测试版)responsive design tutorial at freecodecamp . 当您真正了解 CSS 定位、特异性和框模型时，您几乎不需要几个媒体查询(甚至可以不用)
关于html - 设计在每一个决议中都失败了——我想我可能把事情定位错了，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48252079/