| |
<!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.013rem; |
| |
height: 1.013rem; |
| |
} |
| |
nav li a p { |
| |
font-size: 0.346rem; |
| |
} |
| |
</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> |
| |
|
