手机端 一个自适应页面的 四叶草 五功能的简单页面
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=320.1,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="apple-touch-startup-image" href="#" sizes="320x460" media="screen and (max-device-width: 320)">
<link rel="apple-touch-startup-image" href="#" sizes="640x920" media="screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)">
<link rel="apple-touch-startup-image" href="#" sizes="768x1004" media="screen and (min-device-width: 481px) and (orientation:portrait)">
<style>
*
{
box-sizing: border-box;
}
body
{
margin: 0px;
}
.taocan
{
position: relative;
overflow: hidden;
}
.taocan div
{
width: 50%;
float: left;
border: 1px #fff solid;
background-color: #52ca64;
padding-bottom: 50%;
background-repeat: no-repeat;
background-position: center 40px;
background-size: auto 30%;
position: relative;
}
.taocan .yuan
{
position: absolute;
background-color: #ffffff;
display: block;
z-index: 999;
width: 40%;
padding-bottom: 40%;
border-radius: 50%;
left: 50%;
margin-left: -20%;
margin-top: 30%;
}
.taocan .aa
{
position: absolute;
border-radius: 50%;
width: 94%;
padding-bottom: 94%;
margin: 3%;
}
.taocan .bb
{
border-radius: 0px 30% 0px 30%;
}
.taocan .cc
{
border-radius: 30% 0px 30% 0px;
}
.taocan .dd
{
border-radius: 30% 0px 30% 0px;
}
.taocan .ee
{
border-radius: 0px 30% 0px 30%;
}
</style>
</head>
<body>
<div class="taocan">
<a href="#" class="yuan">
<div class="aa">
</div>
</a>
<a href="#">
<div class="bb">
</div>
</a>
<a href="#">
<div class="cc">
</div>
</a>
<a href="#">
<div class="dd">
</div>
</a>
<a href="#">
<div class="ee">
</div>
</a>
</div>
</body>
</html>