| |
<!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> |
| |
* { |
| |
margin: 0px; |
| |
padding: 0px; |
| |
box-sizing: border-box; |
| |
} |
| |
|
| |
html { |
| |
font-size: 75px; |
| |
} |
| |
|
| |
ul { |
| |
display: flex; |
| |
} |
| |
|
| |
nav ul li { |
| |
list-style: none; |
| |
border: 1px solid red; |
| |
width: 2rem; |
| |
height: 2rem; |
| |
font-size: 1rem; |
| |
} |
| |
|
| |
.nav1 ul { |
| |
display: flex; |
| |
} |
| |
|
| |
.nav1 ul li { |
| |
list-style: none; |
| |
border: 1px solid red; |
| |
width: 25%; |
| |
height: auto; |
| |
font-size: 16px; |
| |
} |
| |
</style> |
| |
</head> |
| |
|
| |
<body> |
| |
|
| |
|
| |
|
| |
|
| |
<nav> |
| |
<ul> |
| |
<li>1</li> |
| |
<li>2</li> |
| |
<li>3</li> |
| |
<li>4</li> |
| |
<li>5</li> |
| |
</ul> |
| |
</nav> |
| |
|
| |
<nav class="nav1"> |
| |
<ul> |
| |
<li>1</li> |
| |
<li>2</li> |
| |
<li>3</li> |
| |
<li>4</li> |
| |
<li>5</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> |
| |
|
