<!DOCTYPE html>
<html id="html">
<head>
<meta charset="utf-8">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="format-detection" content="telephone=no" />
<title>Fake Ali</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
font-family: sans-serif;
font-size: 20px;
background: #ccc;
overflow: hidden;
}
img {
width: 100%;
}
at the {
list-style: none;
}
body {
overflow: hidden;
font:15px/1.5 DroidSansFallback,Arial,sans-serif;
}
#content {
position: relative;
width: 16rem;
margin: 0 auto;
}
#banner {
position: relative;
overflow: hidden;
width: 16rem;
height: 5rem;
}
#banner ul {
position: relative;
width: 16rem;
height: 5rem;
}
#banner ul li {
position: relative;
width: 16rem !important;
height: 5rem;
float: left;
}
#box {
margin: 0.5rem 0rem;
width: 16rem;
height: 7.45rem;
background: #fff;
}
.box-down,.box-up {
width: 16rem;
height: 3.4rem;
}
.up-content {
width: 4rem;
height: 3.4rem;
float: left;
}
.cont-img {
margin-top: 0.3rem;
margin-left: 1rem;
width: 2rem;
height: 2rem;
background: url(ali2.png);
background-size: contain;
}
.cont-name {
text-align: center;
font-size: 12px;
color: rgb(102, 102, 102);
margin-bottom: 0.2rem;
width: 4rem;
height: 0.9rem;
line-height: 0.9rem;
}
</style>
</head>
<body>
<div id="content">
<section id="banner">
<ul class="swipe-wrap">
<li>
<a href="#">
<img src="ali1.jpg"/>
</a>
</li>
<li>
<a href="#">
<img src="ali2.png"/>
</a>
</li>
<li>
<a href="#">
<img src="ali1.jpg"/>
</a>
</li>
<li>
<a href="#">
<img src="ali2.png"/>
</a>
</li>
</ul>
</section>
<section id="box">
<div class="box-up">
<div class="up-content">
<div class="cont-img"></div>
<div class="cont-name">navigation one</div>
</div>
<div class="up-content">
<div class="cont-img"></div>
<div class="cont-name">navigation one</div>
</div>
<div class="up-content">
<div class="cont-img"></div>
<div class="cont-name">navigation one</div>
</div>
<div class="up-content">
<div class="cont-img"></div>
<div class="cont-name">navigation one</div>
</div>
</div>
<div class="box-down">
<div class="up-content">
<div class="cont-img"></div>
<div class="cont-name">navigation one</div>
</div>
<div class="up-content">
<div class="cont-img"></div>
<div class="cont-name">navigation one</div>
</div>
<div class="up-content">
<div class="cont-img"></div>
<div class="cont-name">navigation one</div>
</div>
<div class="up-content">
<div class="cont-img"></div>
<div class="cont-name">navigation one</div>
</div>
</div>
</section>
</div>
<script type="text/javascript">
function init() {
var winw = document.body.clientWidth; //Getting the screen width is not compatible here
var html = document.getElementById("html"); // get the html element
var add = 0; //initialize a change value
add = (winw - 320)*0.0625; //After testing, every time the width increases by 1px, the value of font-size increases by 0.0625px
//Subtract 320 from the width of the screen to calculate how much width is greater than 320 and finally get the font-size that needs to be automatically set to
if (add > 13.75) {
add = 13.75;
}
//Make a judgment because the maximum font-size is 33.75px, so here I will directly use 13.75 to judge
html.style.fontSize = 20 + add + 'px';
}
init();
window.onresize = changeWin; //Recalculate every time the screen changes. For example, when the horizontal screen changes to a vertical screen, the PC side dynamically changes the width
function changeWin() {
init();
}
</script>
</body>
</html>
Effect picture: