Heim >Web-Frontend >CSS-Tutorial >Responsives Layout für verschiedene Bildschirmgrößen auf PC und Mobilgeräten
Responsives Layout für verschiedene Bildschirmgrößen auf PC und Mobilgeräten
- 青灯夜游nach vorne
- 2018-10-11 17:31:244951Durchsuche
Dieser Artikel stellt Ihnen das responsive Layout von PC- und Mobilterminals in verschiedenen Bildschirmgrößen vor. Ich hoffe, dass er Ihnen als Referenz dienen wird.
Zuerst das Rendering:
PC-Effekt: 
Mobileffekt:
Code wie folgt:
<!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>
pc.css Stilcode:
*{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;}mobile.css Stilcode:
*{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;}Der kritische Punkt, den ich festgelegt habe, ist 699px, Sie können ihn anpassen Je nach Projekt Um genaueres CSS für verschiedene Bildschirme festzulegen, sollten Sie im Allgemeinen PC, Pad und Mobiltelefone in Betracht ziehen!
Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter CSS-Video-Tutorial !
Das obige ist der detaillierte Inhalt vonResponsives Layout für verschiedene Bildschirmgrößen auf PC und Mobilgeräten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!