|
<!DOCTYPE html> |
|
<html lang="en"> |
|
|
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> |
|
<title>Document</title> |
|
<style> |
|
body { |
|
min-width: 320px; |
|
} |
|
|
|
* { |
|
margin: 0px; |
|
padding: 0px; |
|
box-sizing: border-box; |
|
} |
|
|
|
nav ul { |
|
display: flex; |
|
flex-wrap: wrap; |
|
} |
|
|
|
nav li { |
|
list-style: none; |
|
width: 2.5rem; |
|
height: 2.5rem; |
|
} |
|
|
|
nav li a { |
|
display: block; |
|
color: #666; |
|
text-align: center; |
|
text-decoration: none; |
|
} |
|
|
|
nav li a img { |
|
width: 1.0133333333333334rem; |
|
height: 1.0133333333333334rem; |
|
} |
|
|
|
nav li a p { |
|
font-size: 0.3466666666666667rem; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body> |
|
<nav> |
|
<ul> |
|
<li> |
|
<a href="#"> |
|
<img src="images/nav8.png" alt=""> |
|
<p>原创</p> |
|
</a> |
|
</li> |
|
<li> |
|
<a href="#"> |
|
<img src="images/nav1.png" alt=""> |
|
<p>原创</p> |
|
</a> |
|
</li> |
|
<li> |
|
<a href="#"> |
|
<img src="images/nav2.png" alt=""> |
|
<p>原创</p> |
|
</a> |
|
</li> |
|
<li> |
|
<a href="#"> |
|
<img src="images/nav3.png" alt=""> |
|
<p>原创</p> |
|
</a> |
|
</li> |
|
<li> |
|
<a href="#"> |
|
<img src="images/nav4.png" alt=""> |
|
<p>原创</p> |
|
</a> |
|
</li> |
|
<li> |
|
<a href="#"> |
|
<img src="images/nav5.png" alt=""> |
|
<p>原创</p> |
|
</a> |
|
</li> |
|
<li> |
|
<a href="#"> |
|
<img src="images/nav6.png" alt=""> |
|
<p>原创</p> |
|
</a> |
|
</li> |
|
<li> |
|
<a href="#"> |
|
<img src="images/nav7.png" alt=""> |
|
<p>原创</p> |
|
</a> |
|
</li> |
|
</ul> |
|
</nav> |
|
<script> |
|
// 1. 使用JS来获取屏幕的宽度来计算设置当前屏幕需要设置的html字体大小 |
|
// 当前html的字体是页面宽度的1/10 |
|
// html字体大小 = 屏幕宽度/10 |
|
rem(); |
|
|
|
function rem() { |
|
setHtmlFontSize(); |
|
|
|
function setHtmlFontSize() { |
|
var windowWidth = document.body.offsetWidth; |
|
var htmlFontSize = windowWidth / 10; |
|
//获取html设置当前计算的字体大小 带单位 |
|
document.querySelector('html').style.fontSize = htmlFontSize + 'px'; |
|
} |
|
window.addEventListener('resize', setHtmlFontSize); |
|
} |
|
</script> |
|
</body> |
|
|
|
</html> |
|
|