使用rem工具实现rem计算

  <!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>
   
posted @ 2018-07-24 17:22  昆仑小道士  阅读(69)  评论(0)    收藏  举报