rem让手机站自适应如此简单

有css与js两种方式来调整html元素大小的值。

css方式

html { font-size: calc(100vw / 3.75) }

100vw表示设备宽度，除以3.75这里是以iphone6 的宽度375px为标准，为了保证html的字体大小为100px。这样我们在换算的时候，1px 就是0.01rem，就很容易计算。

因为chrome下最小字体大小为12px，所以不能把html的font-size设置成1px或者10px，100px是我们最好的选择。

js方式， 原理与css一样，不过为了避免在一些老旧一点的手机浏览器上不支持calc，vm这些属性，在实际应用中使用js是最好的。

document.documentElement.style.fontSize = $(document.documentElement).width()/3.75 + 'px';
$(window).on('resize', function() {
    document.documentElement.style.fontSize = $(document.documentElement).width()/3.75 + 'px';
})

##### 需要注意的地方

一、rem的适用性很有局限，仅仅只能够用于只在移动端展示的页面。如果你的页面还需要适配到pc端，那么就老老实实的使用px吧。

二、自己只是用来放在移动端的页面，别人却在pc上打开了，因此可以设置一个html的最大宽度与最小宽度。580px就是手机上浏览器的最大宽度。

html {
    max-width: 580px;
    min-height: 320px;
}

三、有的同学可能对web的适配有点误解。web中做适配并不需要考虑什么物理像素啊，dpi等等概念。这些应该仅仅只是Android或者ios原生app才会考虑的问题。这些误会导致许多搞设计的同学在给web app做设计的时候，也丢一张1080 x 1920 的设计稿过来，真是愁死人了。

那么回到这个问题中来，设计稿是750x1500的应该怎么办？其实这个还好，750刚好就是375的2倍，iPhone6的宽度。因此量出来的尺寸直接除以2就行了。如果是1080x1920等很大很大的尺寸呢？1.首先保存整张设计稿.jpg 2.新建一个psd，宽度375px，高度1000px(高度可以高一点，无所谓) 3.将保存的设计稿.jpg丢进去。这样量出来的页面元素的尺寸，就是你需要的尺寸。

ps：最好的方法，就是让设计师用sketch出设计稿。

   

       

       

         

手机认证

         

拥有此图标的用户，已经通过手机认证。

       

   

   

       

       

         

实名认证

         

拥有此图标的用户，已经通过实名认证。

       

   

   

       

       

         

资金认证

         

拥有此图标的用户，已经通过实名认证。

       

   

   

       

       

         

实盘认证

         

拥有此图标的用户，已经通过实盘认证。

       

   

var deviceWidth = document.documentElement.clientWidth;
    if(deviceWidth > 750) deviceWidth = 750;
    document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';