Maison > Article > interface Web > Mise en page réactive pour différentes tailles d'écran sur PC et mobile
Mise en page réactive pour différentes tailles d'écran sur PC et mobile
- 青灯夜游avant
- 2018-10-11 17:31:244814parcourir
Cet article vous présentera la disposition réactive des PC et des terminaux mobiles dans différentes tailles d'écran. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.
D'abord le rendu :
Effet PC : 
Effet Mobile :
Code Comme suit :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <title></title> <link rel="stylesheet" href="pc.css" media="screen and (min-width:700px)" /> <link rel="stylesheet" href="mobile.css" media="screen and (max-width:699px)" /> </head> <body> <h1 style="margin-top:20px;text-align:center;">响应式布局</h1> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </body> </html>
code de style pc.css :
*{margin:0;padding:0;}
ul{width:calc(100% - 20px);padding:0 10px;margin:100px auto;height:auto;overflow:hidden;}
ul li{list-style:none;border:1px solid blue;width:calc(25% - 2px);height;100px;float:left;text-align:center;}code de style mobile.css :
*{margin:0;padding:0;}
ul{margin:100px auto;padding:0 5px;height:auto;overflow:hidden;}
ul li{list-style:none;border:1px solid red;width:calc(100% - 2px);height;100px;float:left;text-align:center;}Le point critique que j'ai défini est 699px, le véritable In le projet, vous pouvez définir des CSS plus précis pour différents écrans en fonction des besoins du projet. Généralement, un PC, un Pad et des téléphones portables suffisent !
Résumé : Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo CSS !
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!