2016-04-27 9 views
-4

Ich würde wissen, ob es möglich ist, eine Website zu erstellen, die zu 100% ohne Flexbox oder Medienabfragen reagiert. Ich verwerfe die Möglichkeit der Verwendung von Position, Breite, Höhe und px. Ich habe probiert Prozent%, Marge, Padding und Spaltenanzahl und arbeiten, aber nicht zu 100%. Wie Sie sehen können, mit einer Auflösung wie 1440 x 629 die Box in der Höhe einschränken und den Text ändern. Wie kann ich es ohne Medienabfragen oder Flexbox beheben?Es ist möglich, eine Responsive Site 100% ohne Mediaabfragen oder Flexbox zu machen?

body { 
 
    background-color: #fff; 
 
} 
 
main { 
 
    background-color: #000; 
 
    -webkit-border-radius: 3px; 
 
    -moz-border-radius: 3px; 
 
    border-radius: 3px; 
 
    padding: 3%; 
 
} 
 
main > * { 
 
    color: #fff; 
 
} 
 
section.navigation-bar { 
 
    background-color: #fff; 
 
    padding: 1%; 
 
} 
 
section.navigation-bar > ul { 
 
    list-style-type: none; 
 
} 
 
section.navigation-bar ul li { 
 
    display: inline; 
 
} 
 
section.navigation-bar ul li a { 
 
    text-decoration: none; 
 
    color: #000; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -ms-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 
section.navigation-bar ul li a:hover { 
 
    color: #abc; 
 
} 
 
section.columns-area { 
 
    -webkit-column-count: 2; 
 
    -moz-column-count: 2; 
 
    column-count: 2; 
 
    margin-top: 20px; 
 
} 
 
section.columns-area > aside { 
 
    background-color: #fff; 
 
    padding: 20px; 
 
    color: #000; 
 
} 
 
section.footer { 
 
    background-color: #fff; 
 
} 
 
p.footer-text { 
 
    color: #000; 
 
    padding: 1%; 
 
    text-align: center; 
 
    margin-bottom: 1%; 
 
} 
 
p.footer-text > a { 
 
    color: #444; 
 
    text-decoration: none; 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Site Test</title> 
 
    <link rel="stylesheet" style="text/css" media="all" href="style.css"> 
 
</head> 
 

 
<body> 
 
    <main> 
 
    <section class="navigation-bar"> 
 
     <nav> 
 
     <ul> 
 
      <li><a href="#">Home</a> 
 
      </li> 
 
      <li><a href="#">About</a> 
 
      </li> 
 
      <li><a href="#">Contact</a> 
 
      </li> 
 
      <li><a href="#">Other</a> 
 
      </li> 
 
     </ul> 
 
     </nav> 
 
    </section> 
 
    <section class="columns-area"> 
 
     <aside>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex sed pariatur corporis quo illo ad cum itaque, deserunt, fugiat repudiandae iure maxime sapiente id dolores? Ipsam soluta est sed aliquid.Lorem ipsum dolor sit amet, consectetur adipisicing 
 
     elit. Amet asperiores officia vitae saepe ullam, voluptates vero excepturi repudiandae. Maxime repudiandae mollitia perspiciatis explicabo eaque eum distinctio adipisci minus quod nesciunt.</aside> 
 
    </section> 
 
    <section class="footer"> 
 
     <p class="footer-text">Site created by <a href="#">Mattew</a> 
 
     </p> 
 
    </section> 
 
    </main> 
 
</body> 
 

 
</html>

+1

Warum? Was wäre der Vorteil davon? Sie könnten Prozentbreiten verwenden, aber schließlich wollen Sie, dass diese beiden Spalten eins werden, was js eingreifen würde, wenn Sie keine Medienabfragen verwenden. –

+0

Was haben Sie gegen Flexbox- und Medienabfragen? – amflare

+2

_Ich wüsste, ob es möglich ist, eine Website zu erstellen, die auf 100% ohne flexbox oder Medienabfragen reagiert_ Gibt es einen bestimmten Grund dafür, oder genießt du einfach diese bizarre Herausforderung? –

Antwort

0

Sie könnten versuchen:

max-width: 100%