整理知识点（一）屏幕适配相关

一、pc端

功能交互性的页面，会固定中间宽度1100或者1200宽度，左右自适应

通过媒体查询（@media）可以解决大部分pc端屏幕适配问题

二、移动端

h5页面使用rem做屏幕适配 使用手淘方案

手淘方案

1. 拿到设计稿除以10，得到font-size基准值

2. 引入flexible

3. 不要设置meta的viewport缩放值

4. 设计稿px/ font-size基准值，即可换算为rem

5. 使用sass时还需要进行配置，对字体进行设置

@mixin font-dpr($font-size){
  font-size:$font-size;
  [data-dpr = '2'] & {
    font-size: $font-size * 2;
  }
  [data-dpr = '3'] & {
    font-size: $font-size * 3;
  }
}

tips:

1. 移动端有用px的时候吗？

有。当你的页面图片或者某一元素比例要固定，不想进行任何缩放时，rem就不适合了，这时候用px单位，能保证该元素不会因缩放而失真模糊。

2. 1px边框问题

一般是采用伪元素模拟的方式

.scale{  
    position: relative;  border:none;
}
.scale:after{  
    content: ''; 
    position: absolute;
    bottom: 0;
    background: #000;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}