移动端网页布局实践-CSDN博客

本文链接：https://blog.csdn.net/qq_28020627/article/details/68927805

	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0">
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta content="telephone=no" name="format-detection">
	<meta content="email=no" name="format-detection">
	<title>移动端页面</title>

	<style type="text/css"id="setRem"></style>
	<style>
	@media screen and (min-width: 750px) and (max-width: 1350px) and (-webkit-device-pixel-ratio: 2) {
	div {
	font-size: 24px;
	}
	}
	@media screen and (min-width: 1536px) and (-webkit-device-pixel-ratio: 2) {
	div {
	font-size: 50px;
	}
	}
	@media screen and (min-width: 1242px) and (-webkit-device-pixel-ratio: 3) {
	div {
	font-size: 40px;
	}
	}
	@media screen and (min-width: 1242px) and (-webkit-device-pixel-ratio: 1) {
	div {
	font-size: 14px;
	}
	}
	* {
	margin: 0;
	padding: 0;
	}
	body {
	font-family: "Microsoft YaHei";
	}
	.box {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	padding-top: 0.3rem;
	}
	.test {
	width: 2rem;
	height: 1.35rem;
	border: 1px solid #f00;
	float: left;
	overflow: hidden;
	}
	.test img {
	width: 100%;
	}
	.setimg {
	margin-left: 0.44rem;
	float: left;
	padding-top: 1.33333333rem;
	}
	.setimg img {
	width: 2.66666667rem;
	height: 0.76rem;
	}
	.p2 {
	margin-left: 0.38666667rem;
	float: left;
	padding-top: 1.33333333rem;
	}
	.p2 img {
	width: 2.82666667rem;
	height: 2.09333333rem;
	}
	.sd {
	clear: left;
	width: 5.33333333rem;
	height: 4rem;
	border: solid #f00;
	border-width: 0.01333333rem;
	}
	.sd:before {
	content: "hello";
	display: table-cell;
	}


	</style>
	<script type="text/javascript">
	var clientwidth = document.documentElement.clientWidth;
	var dpr = 1/window.devicePixelRatio;
	document.getElementById("setRem").innerHTML =
	" html{font-size: "+(clientwidth*devicePixelRatio/10)+"px;}";
	document.querySelector('meta[name="viewport"]').setAttribute("content" ,
	"width=device-width,initial-scale="+dpr+",user-scalable=no,maximum-scale="+dpr);
	</script>
	</head>
	<body>
	<div class="box">
	<div class="test"><img src="1_1.jpg"></div>
	<div class="test">abc战三</div>
	<div class="test">abc战三</div>
	<div class="test">abc战三</div>
	</div>
	<div class="box">
	<div class="test">abc战三</div>
	<div class="test">abc战三</div>
	<div class="test">abc战三</div>
	<div class="test">abc战三</div>
	</div>
	<div class="setimg">
	<img src="abc.png">
	</div>
	<div class="p2">
	<img src="hello.png">
	</div>

	<div class="sd"></div>
	</body>
	</html>