24-关于flexible的探讨

发表于 | 分类于 |

title: 24-关于flexible的探讨
date: 2018-05-03 10:05:30
categories: 前端-01-切图CSS

tags: 前端-01-切图CSS

首页，先给出原文出处,点击查看

最近看移动端1px的问题，由此联想到项目中使用的rem布局方案，先说说引入手淘flexible要注意的地方。

1. 加不加 viewport 标签

1.1介绍

1
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

对于这个问题，大漠（文章的作者）这样说，
image
查看原图

image
查看原图

加不加viewport，在iPhone6下分别看下他们的情况

1
2
3
<html data-dpr="2" style="font-size: 75px;"><head>
...
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

如果加了viewport 标签

1
2
3
<html data-dpr="1" style="font-size: 37.5px;">
...
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

二者效果我感觉是一致的，因为不加viewport标签下，initial-scale=0.5（缩放0.5），会帮你还原跟<html data-dpr="1" style="font-size: 37.5px;">一样。

文章作者意思好像是为了做到高清。

1.2 ios动态设置dpr带来的问题

由于ios动态设置了dpr，带来了initial-scale的变化，这意味着，如果我们想在css里使用

1
div{width:200px;height:200px}

在苹果下会缩放，

image

查看原图

image

查看原图

我们需要对不同dpr下做适配

1
2
3
4
5
6
7
8
9
10
11
12
div { 
    width:200px;
    height:200px
} 
[data-dpr="2"] div { 
    width:400px;
    height:400px
} 
[data-dpr="3"] div { 
    width:600px;
    height:600px
}

作者给了一个字体设置的sass混合宏，

1
2
3
4
5
6
7
8
9
10
11
@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;
    }
}

1.3分割线

为了避免这样的匹配，==感觉还是加个viewport吧==，不用去匹配[dpr=2][dpr=3]，而且必企的项目里有加，也没产生多大影响，@2x的图片也可以做到高清。==也不用为后面的1px分别匹配。==

注：切图也可以在ps里精准量测，然后转rem，上次估计是效果图原因。

2. 移动端 1px 问题

移动端1px变粗的原因

viewport的设置和屏幕物理分辨率是按比例而不是相同的. 移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长.

也就是罪魁祸首就是设备像素比（window.devicePixelRatio），即：

设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。

例子可看必企底部栏border-top

image

查看原图

image

查看原图

参考网上链接1 网上链接2

我写了个@mixin，仅供参考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
@mixin onepx($position: bottom, $color: #666, $radius: 0) {
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    & {
      border: none;
      position: relative;
      // box-sizing: border-box;
      @if $position=='bottom' {
        &:after {
          content: '';
          position: absolute;
          bottom: 0;
          right:0;
          width: 100%;
          height: 1px;
          background: $color;
          border-radius: $radius;
          -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
          -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
        }
      }
      @else if $position=='top' {
        &:after {
          content: '';
          position: absolute;
          top: 0;
          right:0;
          width: 100%;
          height: 1px;
          background: $color;
          border-radius: $radius;
          -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
          -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
        }
      }
      @else if $position=='right' {
        &:after {
          content: '';
          position: absolute;
          right: 0;
          top: 0;
          bottom:0;
          width: 1px;
          height: 100%;
          background: $color;
          border-radius: $radius;
          -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
          -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
        }
      }
      @else if $position=='left' {
        &:after {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          bottom:0;
          width: 1px;
          height: 100%;
          background: $color;
          border-radius: $radius;
          -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
          -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
        }
      }
      @else if $position=='all' {
        &:after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          border: 1px solid $color;
          // -webkit-box-sizing: border-box;
          // box-sizing: border-box;
          width: 200%;
          height: 200%;
          border-radius: $radius;
          -webkit-transform: scale(0.5);
          transform: scale(0.5);
          -webkit-transform-origin: left top;
          transform-origin: left top;
          pointer-events: none;
        }
      }
    }
  }
}

后话：目前项目还是使用scss为主，如果等以后前端项目成熟了，再考虑换post-css，前端实在折腾~~