html5 的 rem、px、viewport 在页面布局中的作用

viewport

1. 没有 viewport

• 没有设置 viewport 的情况下，不同尺寸下的手机屏幕默认宽度都是980宽；

2. 设置 viewport 为固定的 width

• 设置 后，会使页面在不同设备上显示相同宽度，事例中不管 iPhone 5 或 iPhone 6 页面都会变成 360px 宽；

3. 设置 viewport 为设备的 width

• 设置 后，页面宽度会识别为硬件设备最优的宽度显示，这是使用最广泛的设置方式。

px 布局

1. viewport 为固定宽度下的 px 布局

  
  
  


  

    
1
    
2
    
3
  

• 因为指定了宽度 360 ，页面在任何设备上都可以横向布满3个 .item ;

2. viewport 为设备宽度下的 px 布局

  
  
  


  

    
1
    
2
    
3
  

• 由于 页面在不同设备的宽度不同，导致在 iPhone 5 下为 320px，导致换行，而在 iPhone 6 下为 375px，横放3个框有余；

rem 布局

1. device-width 下的 rem

  
  
  


  

    
1
    
2
    
3
  

• rem 是以 元素的 font-size 为基数转化成的 px 值，例如 标签默认值 font-size: 16px，1rem 即等于 16px；

2. 手动设置 rem 基数

  
  
  


  

    
1
    
2
    
3
  

• 通过媒体查询，我们可以分别为 iPhone 5 和 iPhone 6 设置不同的 rem 基数，实现不同设备宽度下，布局不同；

3. 动态设置 rem 基数

  
  
  
  


  

    
1
    
2
    
3
  

• 当使用 js 动态计算 的 font-size 再加上使用 rem 布局，最终结果就跟 加上 px 布局的效果是一样的，就是不同设备宽度能够显示的页面宽度一样；
• 这段 js 代码的意思是，传入的 750 为设计图总宽度，在任何屏幕宽度内，1rem 等于设计图中的 100px；
• 举例：设计图总宽度为 640px 的情况下，应该在调用该 js 时，把 750 替换成 640，当设计图中有一个 44px * 44px 的按钮，css 应为 width: 0.44rem; height: 0.44rem;

---

总结

1. 能应付大部分 h5 活动页面布局，但不被广泛使用；
2. rem 虽然原理有点繁琐，但被广泛推广使用，这是有原因的，假设一种开发需求：
   
   

• 上面的 banner 需要在不同手机上，等比缩放展示同样的内容，而下面的 text 则需要越大的屏幕，一行显示的文字越多，这种情况下，就需要 px 和 rem 能同时使用在同一页面内。

  
  
  
  


  

  
新闻子站，IT界最新，最权威的新闻播报站点。网站聚焦IT业界，国内外知名厂商，产品以及业内人士的最新动态。关注最前沿科技发展和商业趋势，解读错综复杂的IT业内事件，...