动态REM方案&&border 1px问题

动态REM

• 我们都知道移动端页面在做适配时，媒体查询响应式是一种方法，但是鉴于需要写多套的CSS，考虑多种设备宽度，非常麻烦。

除了使用媒体查询响应式之外，还有另一种更好用的方案就是动态rem。

• 首先我们假设设计稿的基本页面宽度为320px，1个rem指的是1个页面宽度，

获取当前设备视口的宽度和与设计稿基准宽度的比率scale：

var width=document.documentElement.clientWidth;//获取当前视口的宽度

var scale= width/320;  //基本尺寸是320px

然后我们使用JS写入CSS，

 var css=`
    html {
        font-size: ${320*scale/10}px;
    }
    `
    document.write(``)

rem这个单位代表页面的宽度，在原来的CSS中，我们使用的单位都是px，注意这个CSS是以设计稿宽度为320px这个标准下写的。

那么结合320px和CSS中每一个px值的比率，本来：

html {
        font-size: ${320*scale/10}px;
    }

这个CSS片段中，320*scale表示的就是实际的设备页面宽度，我们可以理解为10rem==320*scale，也就是说10个rem代表一个页面

宽度，他是一个动态的值，可以理解为一个比例。现在，以height: 24px为例，它基准设备宽度为320px，也就是说可以转化为

height: (24/320)*10 rem，也就是说height: 0.75rem.

思路简化如下：

1. 浏览器禁止980px像素缩放

2. 设置html{font-size: 页面宽度/10 px}

3. 10rem == 页面宽度

4. 所有单位都使用rem，这样长度以页面宽度为基准

5. 页面可兼容任何手机屏幕

写到这里，我们贴出代码及页面效果：

  
  
 
 
 
  


  

    
    

      标签1
      标签2
      标签3
      标签4
    
  
  

    
文字文字1
    
文字文字2
    
文字文字文字文字文字1
    
文字文字文字文字文字2
  
  

页面效果：

页面效果.jpg

你可以自己在本地尝试，这样可适配任意手机尺寸。

border 1px问题

• 接下来我们来聊一聊手机屏幕中的1px边框问题。我们知道，在普通屏幕中，CSS中的1px就是代表设备中的1px，但是在Retina屏幕下，CSS的

1px它指设备中的2px，iphone就是使用的Retina屏幕，这样的屏幕显示效果会更好当然会比较耗电。在实际的开发过程中，由于设计师的处女情

结，他们会要求即使在retina屏幕下，1px也必须代表设备中的1px（前端默默地竖起中指，女设计师除外）

• 我们想到的解决方法是让border-width: 0.5px,这样就能让在retina屏幕下也代表只有1px的设备像素，但是这样是有兼容性问题的，根本就

不推荐使用。正确的方法是：

1. 页面整体缩放50%，即meta里面设置50%， 然后再将rem设置成原来的2倍。

具体的思路如下：

1. 获取设备像素比(1/2/3)

2. initial-scale = 1/像素比

3. 让rem变为rem*像素比

4. 最后border： 1px solid red

这里我将代码贴出来：

  
  
  
  
  
  


  

    
    

      标签1
      标签2
      标签3
      标签4
    
    
  
  

    
文字文字文字
    
文字文字文字
    
文字文字文字文字文字文字
    
文字文字文字文字文字文字
  
  

页面效果同上。