CSS3 Conception Web Responsive
Une
conception web conviviale offre une expérience optimale, une lecture facile et
une navigation facile avec un minimum de redimensionnement sur différents
périphériques tels que les ordinateurs de bureau, les téléphones mobiles et les
onglets)
Responsive structure :
L'image
ci-dessous montre la structure réactive des pages Web.
<html>
<head>
</head>
<style>
body {
font: 600 14px/24px "Open Sans", "HelveticaNeue-Light",
"Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial,
"Lucida Grande", Sans-Serif;
}
h1 {
color: #9799a7;
font-size: 14px;
font-weight: bold;
margin-bottom: 6px;
}
.container:before, .container:after {
content: "";
display: table;
}
.container:after {
clear: both;
}
.container {
background: #eaeaed;
margin-bottom: 24px;
*zoom: 1;
}
.container-75 {
width: 75%;
}
.container-50 {
margin-bottom: 0;
width: 50%;
}
.container, section, aside {
border-radius: 6px;
}
section, aside {
background: #2db34a;
color: #fff;
margin: 1.858736059%;
padding: 20px 0;
text-align: center;
}
section {
float: left;
width: 63.197026%;
}
aside {
float: right;
width: 29.3680297%;
}
</style>
<body>
<h1>100% du largeur </h1>
<div class="container">
<section>Section</section>
<aside>Aside</aside>
</div>
<h1>75% du largeur</h1>
<div class="container container-75">
<section>Section</section>
<aside>Aside</aside>
</div>
<h1>50% du largeur</h1>
<div class="container container-50">
<section>Section</section>
<aside>Aside</aside>
</div>
</body>
</html>
Media queries
Les
requêtes multimédias concernent les règles de style différentes pour les
périphériques de taille différente tels que les mobiles, les ordinateurs de
bureau, etc.,
<html>
<head>
<style>
body {
background-color: lightpink;
}
@media screen and (max-width: 420px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p> Si la taille de l'écran est inférieure à 420px,
alors il affichera une couleur bleu clair, sinon il affichera
une couleur rose clair </p>
</body>
</html>
Si la taille de l'écran est inférieure à 420px, alors il affichera
une couleur bleu clair :
sinon il affichera une couleur rose clair :
Bootstrap responsive
web design :
Bootstrap est la structure de conception web
la plus populaire basée sur HTML, CSS et script Java et il vous aide à concevoir
des pages Web de manière réactive pour tous les périphériques
Pour voir les tuto de Bootstrap, nous vous
invite de voir ces sites :
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean. 
Leave a Comment