动态rem

下面是对动态rem的总结。
如何做：

1. 浏览器禁止 980 像素的缩放
2. 设置 html {font-size: 页面宽度 / 10 px}
3. 10 rem == 页面宽度(1rem 等于1/10的页面宽度)
4. 所有单位都用 rem == 所有长度都以页面宽度为基准
5. 页面可以兼容任何手机屏幕

例子

  
  
  
  



  

    
导航1
    
导航2
    
导航3
    
导航4
  

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul,
pl {
  list-style: none;
}
ul {
  display: flex;
}
body {
  font-size: 0.4rem;
}
li {
  border: 1px solid;
  width: 2.5rem;
  line-height: 1.25rem;
  text-align: center;
}
img {
  width: 4rem;
  height: 5rem;
}

效果：

上述实例具体细节：
http://js.jirengu.com/yidur/4/edit
变化大小后点击右上方run with js 运行会改变大小。