H5頁面項目的思路整理

時間 2019-12-07

標籤 h5 頁面項目思路整理简体版

原文原文鏈接

這是H5項目完成後的一些整理，有些理解不能很是準確，但願你們能幫忙指出。css

移動端的適配

一些名詞解釋vue

visual viewport 可視視圖
layout viewport 佈局視圖
vm 可視視圖的寬度，最大爲100.相似一個百分比的值
vh 可視視圖的高度
points 獨立像素點。抽象的單位，在數學的座標空間纔有意義
dpr = 物理像素/獨立像素點。
display zoom 在蘋果設置中顯示有標準和放大。
rendered Pixels = points*dpr
physical pixels 物理像素，在display zoom 模式下設備的分辨率可能會更低。
PPI 每英寸上的像素個數。這裏的像素是 rendered pixels 邏輯像素。
DIPs or dp device independent pixel 設備無關的獨立像素，好比css 的px單位

圖片來源 githubusercontentwebpack

咱們採用的是淘寶的 lib-flexible 方案，該方案的整體思路爲模擬vm和vh。git

好比750*1334的設計圖經過插件webpack px2rem(remUnit:75px) 來模擬vm。這樣1rem就等於1vm.github

好比代碼web

.selector {
    width: 150px;
    height: 64px; /*px*/
    font-size: 28px; /*px*/
    border: 1px solid #ddd; /*no*/
}

px2rem處理後算法

.selector {
    width: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    height: 32px;
    font-size: 14px;
}
[data-dpr="2"] .selector {
    height: 64px;
    font-size: 28px;
}
[data-dpr="3"] .selector {
    height: 96px;
    font-size: 42px;
}

樣式

引用normalize.css
肯定變量

/*背景色*/
    $body-bg: #fff;
    $component-bg:#ddd;
    
    /*經常使用灰色*/
    $gray-darker: #222;
    $gray-dark: #333;
    $gray:#666;
    $gray-light:#999;
    $gray-lighter:#ccc;
    $gray-lightest: #eee;
    
    /*主色調*/
    $brand-primary: #c71628;
    $brand-xxx:#ddd;//其餘的顏色
    
    /*行高*/
    line-height-base: 2; // 行高/字體
    line-height-large:2.4; //更高
    
    /*字體*/
    $font-size: 28px;
    $font-size-large: 34px;
    $font-size-small: 24px;
    
    /*... 其餘項目涉及的變量*/

mixins

由於我日常有蒐集一些不錯的mixins，好比：ide

--buttons
生成buttons，focus、hover都對應的背景色的改變佈局

@mixin button-variant($color, $background, $border) {
  color: $color;
  background-color: $background;
  border-color: $border;

  &:focus,
  &.focus {
    color: $color;
    background-color: darken($background, 10%);
        border-color: darken($border, 25%);
  }
  &:hover {
    color: $color;
    background-color: darken($background, 10%);
        border-color: darken($border, 12%);
  }
  &:active,
  &.active{
    color: $color;
    background-color: darken($background, 10%);
        border-color: darken($border, 12%);

    &:hover,
    &:focus,
    &.focus {
      color: $color;
      background-color: darken($background, 17%);
          border-color: darken($border, 25%);
    }
  }
  &:active,
  &.active{
    background-image: none;
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &:hover,
    &:focus,
    &.focus {
      background-color: $background;
          border-color: $border;
    }
  }
}

--brightness
經過背景色獲取字體顏色post

// Brightness math based on:
//   http://www.nbdtech.com/Blog/archive/2008/04/27/Calculating-the-Perceived-Brightness-of-a-Color.aspx

$red-magic-number: 241;
$green-magic-number: 691;
$blue-magic-number: 68;
$brightness-divisor: $red-magic-number + $green-magic-number + $blue-magic-number;
@function sqrt($r) {
  $x0: 1; // initial value
  $solution: false;

  @for $i from 1 through 10 {
    @if abs(2 * $x0) < 0,00000000000001 { // Don't want to divide by a number smaller than this
  $solution: false;
  }

  $x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0) !global;

  @if ( abs($x1 - $x0) / abs($x1)) < 0,0000001 { // 7 digit accuracy is desired
  $solution: true;
  }

  $x0: $x1;
  }

  @if $solution == true {
    // If $r is negative, then the output will be multiplied with <a href="http://en.wikipedia.org/wiki/Imaginary_number">i = √-1</a>
    // (√xy = √x√y) => √-$r = √-1√$r
    @if $r < 0 {
      @return $x1 #{i};
    }
    @else {
      @return $x1;
    }
  }
  @else {
    @return "No solution";
  }
}
@function brightness($color) {
  // Extract color components
  $red-component: red($color);
  $green-component: green($color);
  $blue-component: blue($color);

  // Calculate a brightness value in 3d color space between 0 and 255
  $number: sqrt((($red-component * $red-component * $red-magic-number) + ($green-component * $green-component * $green-magic-number) + ($blue-component * $blue-component * $blue-magic-number)) / $brightness-divisor);

  // Convert to percentage and return
  @return $number / 255 * 100%;
}

@function contrasting-color($color, $light, $dark) {
  @if brightness($color) < 65% {
    @return $light;
  } @else {
    @return $dark;
  }
}

等等mixins 方便

寫基礎的scss 代碼

body{
    font-size:$font-base;/*px*/ 啓動post-css px2rem
    color: $gray; //基礎字體顏色
     background: $body-bg;
}
/*字體顏色*/
.gray-darker{
    color:$gray-darker;
}
.gray-dark{
  color: $gray-dark;
}

.gray{
  color: $gray;
}
.gray-light{
  color: $gray-light;
}
.gray-lighter{
    color:$gray-lighter
}

/*字體*/
.text-base{
    font-size:$font-size;
}
.text-large{
    font-size:$font-size-large
}
.text-small{
    font-size:$font-size-small
}
/*按鈕*/


/*helper*/
.pull-right{
  float: right;
}
.pull-left{
  float: left;
}
.clearfix{
    @include clearfix();
}