html5移动端适配 rem

介绍

像素密度的提高是现代移动设备中的一个重要话题。这个容易被忽略的问题对于网页设计师和前端开发人员来说至关重要。根据Pew Research Center，71%的美国人拥有至少一款移动设备。因此，一个网站或移动应用程序应该能够自适应各种设备上的不同分辨率。

在过去，只能通过媒体查询和弹性网格系统来处理这个问题。不过，现在HTML5引入了一个新特性，它叫做REM。这个技术提供了一种基于根元素的相对长度单位，因此可以轻松处理不同分辨率和像素密度的问题。

REM的工作原理

REM代表“根元素的字体大小”。事实上，REM单位是相对于根元素的字体大小而不是相对于浏览器默认字体大小的。因此，与EM不同的是，REM是一个固定的单位，可以在整个文档中使用。

浏览器默认的字体大小通常是16像素。因此，如果我们将根元素字体大小设置为16像素，那么1REM就等于1像素。换句话说，如果元素被设置1REM，那么它将相当于设备视口宽度为16像素时的大小。如果我们将根元素字体大小设置为20像素，那么1REM就等于1.25像素。

  
  /* 将根元素字体大小设置为16像素 */ 
  html { font-size: 16px; } 
  
  /* 现在，1rem等于16px */ 
  h1 { font-size: 2rem; } /* 32px */
  p { font-size: 1.5rem; } /* 24px */ 
  

REM的优点

1. 灵活性：由于相对于根元素的字体大小而不是浏览器默认字体大小的，REM单位相对固定。因此，即使浏览器的字体大小或设备的像素密度发生改变，REM单位也不会受到影响。

2. 省时省力：除了必须设置根元素字体的大小外，我们可以在所有其他地方使用REMs。因此，代码更加简洁，而且不需要手动计算尺寸和比例。

3. 兼容性良好：REM单位在大多数浏览器中都有良好的支持。如果有必要在不支持REM的旧设备或浏览器中使用此单位，可以使用JavaScript进行后备处理。