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!