Maison >interface Web >tutoriel CSS >Implémenter une mise en page réactive simple en utilisant CSS3 (code)
Implémenter une mise en page réactive simple en utilisant CSS3 (code)
- PHPzoriginal
- 2017-04-03 15:09:572848parcourir
Cet article explique brièvement comment utiliser CSS3 pour implémenter une mise en page réactive simple :
fichier CSS3 :
*{
margin:0px;
padding: 0px;}.heading,.container,.footing{
margin: 10px auto;}.heading{
height: 100px;
background-color: red;}.left,.right,.main{
height: 300px;
background-color: yellow;}.footing{
height: 100px;
background-color: gray;}
<!--media="only screen and (max-width:640px)" 这句话的意思是:只要当渲染屏幕的宽度不大于640px的时候才会使用这个样式表-->
@media screen and (min-width: 960px){ .heading, .container, .footing{
width:960px;
} .left, .main, .right{
float: left;
height: 500px;
} .left, .right{
width:200px;
} .main{
margin: 0px 5px;
width:550px;
} .container{
height: 500px;
}
}
@media screen and (min-width: 600px) and (max-width: 960px){ .heading, .container, .footing{
width: 600px;
} .left, .main{
float: left;
height:400px;
} .right{
display: none;
} .left{
width: 160px;
} .main{
width: 435px;
margin-left: 5px;
} .container{
height: 400px;
}
}
@media screen and (max-width: 600px){ .heading, .container, .footing{
width: 400px;
} .left, .right{
width: 400px;
height: 100px;
} .main{
margin-top: 10px;
width:400px;
height:200px;
} .right{
margin-top: 10px;
} .container{
height: 420px;
}
}Fichier html5 :
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<meta name ="viewport" content="width = device-width,initial-scale=1">
<title>index01</title>
<link href="style01.css" type="text/css" rel="stylesheet"></head><body>
<p></p>
<p>
<p></p>
<p></p>
<p></p>
</p>
<p></p></body></html>Le code de cet article peut implémenter la même interface et afficher différentes mises en page sous différentes largeurs de rendu.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Adaptation de page web mobile : application de remArticle suivant：Adaptation de page web mobile : application de rem