好的，所以我在我有500行css和另外1500行媒体查询的时候，它仍然没有响应。它打破了具体的决议。这是我第一个在此建设的网站。
我使用CSS定位错误吗？我怎样才能让它不那么容易打破？ 我认为我应该使用其他东西而不是位置：绝对每次。
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>
我接近精神崩溃。在@media查询1.5k行后（是的，我知道这很糟糕，在做完之后我意识到它不行，我甚至不得不使用！对某些人来说很重要。）它＆ ＃39;仍然没有回应。我应该使用bootstrap。这些是媒体查询。 （我无法将其发布为代码段，因为代码太多了）https://pastebin.com/rN1ty6vm 我现在很生气。我觉得主要的css不好，这就是为什么它如此容易打破。你能帮我解决一下吗？
答案 0 :(得分：1)
位置：绝对是（几乎）绝不是这样。无论您尝试多少媒体查询，您都会将自己变成一个迷宫，无法离开。
通过将所有内容设置为position:absolute，您可以删除 流程 中的所有内容，因此基本上可以使其具体可笑。事情应该能够自动定位自己与其他人（display:block，清除等）或并排（浮动，内联块，弹性，网格等），而不会重复与left的严格定位，top等。
大多数时候使元素响应很容易，因为将显示从内联块，弹性等切换到显示：块。在网格上只是使用自动调整或自动填充，或调整查询中的网格模板列。 Flexbox通常只是自我修复，或者几乎不需要在flex基础上进行更改。
你自己做了一个很好的决定而没有经常使用bootstrap，但你却不知道正确的CSS定位的理论。因此，最好找到有关CSS定位的some文档，然后重新开始。
还要避免通过ID引用元素，这会在尝试修改它们时遇到一些特殊问题。 Here's a great tutorial about it。
尝试更好地了解盒子模型，而不是它。
也许试试（测试版）responsive design tutorial at freecodecamp。 当你真正理解CSS定位，特异性和盒子模型时，你几乎不需要几个媒体查询（甚至可以在没有的情况下离开）
答案 1 :(得分：0)
圣牛，这是很多媒体查询！我不会试图筛选所有这些内容，但我最好的猜测是，您对媒体查询过于具体，可能会留下间隙或中断，从而导致响应性突破出乎意料。
我通常坚持使用三到四个主要断点，或者为我希望更精确的小东西添加另外五个断点。
我的建议是你废弃当前的媒体查询（残酷，我知道！）并重新开始，试图坚持只有少数几个开始。 Web开发中的一般经验法则是，您希望在必要时成为非特定的;这可以减少您遇到的意外错误。另外，我注意到您在css中使用了任何子选择器;他们很棒！你应该在有机会时查看它们：https://www.w3schools.com/cssref/css_selectors.asp