每个分辨率都有设计中断 - 我想我可能会错误地定位

时间:2018-01-14 17:11:09

标签: html css

好的,所以我在我有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>
&#13;
&#13;
&#13;

我接近精神崩溃。在@media查询1.5k行后(是的,我知道这很糟糕,在做完之后我意识到它不行,我甚至不得不使用!对某些人来说很重要。)它& #39;仍然没有回应。我应该使用bootstrap。这些是媒体查询。 (我无法将其发布为代码段,因为代码太多了)https://pastebin.com/rN1ty6vm 我现在很生气。我觉得主要的css不好,这就是为什么它如此容易打破。你能帮我解决一下吗?

2 个答案:

答案 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