Heim > Artikel > Web-Frontend > 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:244814Durchsuche

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!

css

Stellungnahme：

Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：CSS, um einen coolen, rechts schwebenden Menüleisteneffekt zu erzielen (Codebeispiel)Nächster Artikel：CSS, um einen coolen, rechts schwebenden Menüleisteneffekt zu erzielen (Codebeispiel)

In Verbindung stehende Artikel

Mehr sehen