Use CSS Media Queries

You can use CSS Media Query to create layout for different devices and screen sizes. 
<html>
<head>
	<style>
	/** Gear, Gear 2 and Gear 2 Neo **/
	@media all and (min-width: 320px) and (max-width: 320px) {
		#clock {
			position: absolute;
			top: 10px;
			left: 10px;
			width: 300px;
			height: 100px;
			background: #ff0000;
		}
	}
	/** Gear S **/
	@media all and (min-width: 360px) and (max-width: 360px) {
		#clock {
			position: absolute;
			top: 10px;
			left: 10px;
			width: 340px;
			height: 150px;
			background: #ff0000;
		}
	}
	</style>
</head>
<body>

	<div id="clock"></div>

</body>
</html>
List

Responses

0 Replies