国产日韩综合熟女,日日夜夜黄色网片,久久字幕爆乳一区二区

如何創(chuàng)建基礎(chǔ)的vue項目, 我這邊就不和大家說啦, 今天主要是和大家分享一下, vue 開發(fā) H5 端, 如何做適配.

1. 在 index.html 文件中加入以下代碼:
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">

2.先創(chuàng)建兩個全局的樣式文件 boder.css 和 reset.css 分別在 main.js 中引入

添加boder.css,設(shè)置1像素邊框,防止移動端CSS里面寫了1px，實際上看起來比1px粗的問題出現(xiàn).

  /*移動端1像素邊框*/
@charset "utf-8";
.border,
.border-top,
.border-right,
.border-bottom,
.border-left,
.border-topbottom,
.border-rightleft,
.border-topleft,
.border-rightbottom,
.border-topright,
.border-bottomleft {
  position: relative;
}
 
.border::before,
.border-top::before,
.border-right::before,
.border-bottom::before,
.border-left::before,
.border-topbottom::before,
.border-topbottom::after,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::before,
.border-topleft::after,
.border-rightbottom::before,
.border-rightbottom::after,
.border-topright::before,
.border-topright::after,
.border-bottomleft::before,
.border-bottomleft::after {
  content: "\0020";
  overflow: hidden;
  position: absolute;
}
 
/* border
 * 因，邊框是由偽元素區(qū)域遮蓋在父級
 * 故，子級若有交互，需要對子級設(shè)置
 * 定位 及 z軸
 */
.border::before {
  box-sizing: border-box;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border: 1px solid #eaeaea;
  transform-origin: 0 0;
}
 
.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before {
  left: 0;
  width: 100%;
  height: 1px;
}
 
.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after {
  top: 0;
  width: 1px;
  height: 100%;
}
 
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {
  border-top: 1px solid #eaeaea;
  transform-origin: 0 0;
}
 
.border-right::before,
.border-rightbottom::before,
.border-rightleft::before,
.border-topright::after {
  border-right: 1px solid #eaeaea;
  transform-origin: 100% 0;
}
 
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::before {
  border-bottom: 1px solid #eaeaea;
  transform-origin: 0 100%;
}
 
.border-left::before,
.border-topleft::after,
.border-rightleft::after,
.border-bottomleft::after {
  border-left: 1px solid #eaeaea;
  transform-origin: 0 0;
}
 
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {
  top: 0;
}
 
.border-right::before,
.border-rightleft::after,
.border-rightbottom::before,
.border-topright::after {
  right: 0;
}
 
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::after {
  bottom: 0;
}
 
.border-left::before,
.border-rightleft::before,
.border-topleft::after,
.border-bottomleft::before {
  left: 0;
}
 
@media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {
  /* 默認(rèn)值，無需重置 */
}
 
@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
  .border::before {
    width: 200%;
    height: 200%;
    transform: scale(.5);
  }
 
  .border-top::before,
  .border-bottom::before,
  .border-topbottom::before,
  .border-topbottom::after,
  .border-topleft::before,
  .border-rightbottom::after,
  .border-topright::before,
  .border-bottomleft::before {
    transform: scaleY(.5);
  }
 
  .border-right::before,
  .border-left::before,
  .border-rightleft::before,
  .border-rightleft::after,
  .border-topleft::after,
  .border-rightbottom::before,
  .border-topright::after,
  .border-bottomleft::after {
    transform: scaleX(.5);
  }
}
 
@media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {
  .border::before {
    width: 300%;
    height: 300%;
    transform: scale(.33333);
  }
 
  .border-top::before,
  .border-bottom::before,
  .border-topbottom::before,
  .border-topbottom::after,
  .border-topleft::before,
  .border-rightbottom::after,
  .border-topright::before,
  .border-bottomleft::before {
    transform: scaleY(.33333);
  }
 
  .border-right::before,
  .border-left::before,
  .border-rightleft::before,
  .border-rightleft::after,
  .border-topleft::after,
  .border-rightbottom::before,
  .border-topright::after,
  .border-bottomleft::after {
    transform: scaleX(.33333);
  }
}

添加reset.css,清除不同手機(jī)瀏覽器的初始樣式,使各種瀏覽器的初始樣式都保持一致.

          /*! minireset.css v0.0.2 | MIT License | github.com/jgthms/minireset.css */
    html,
    body,
    p,
    ol,
    ul,
    li,
    dl,
    dt,
    dd,
    blockquote,
    figure,
    fieldset,
    legend,
    textarea,
    pre,
    iframe,
    hr,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin: 0;
      padding: 0;
    }
     
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-size: 100%;
      font-weight: normal;
    }
     
    ul {
      list-style: none;
    }
     
    button,
    input,
    select,
    textarea {
      margin: 0;
    }
     
    html {
      box-sizing: border-box;
    }
     
    * {
      box-sizing: inherit;
    }
    *:before, *:after {
      box-sizing: inherit;
    }
     
    img,
    embed,
    object,
    audio,
    video {
      height: auto;
      max-width: 100%;
    }
     
    iframe {
      border: 0;
    }
     
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }
     
    td,
    th {
      padding: 0;
      text-align: left;
    }

3.移動端項目主要是根據(jù)屏幕大小來動態(tài)設(shè)置元素的尺寸，需要安裝下面兩個插件：
* postcss-pxtorem 用于將 px 轉(zhuǎn)化為 rem npm install postcss postcss-pxtorem@5.0 --save-dev
* lib-flexible用于設(shè)置 rem 基準(zhǔn)值 npm i lib-flexible , 并在 main.js 中引入 import 'lib-flexible'

在package.json項目配置里設(shè)置postcss

"postcss": {
  "plugins": {
    "autoprefixer": {
      "overrideBrowserslist": [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8"
      ]
    },
    "postcss-pxtorem": {
      "rootValue": 37.5,
      "propList": [
        "*"
      ]
    }
  }
}

4.新建 rem.js 文件, 并在 main.js 中引入

    /**
     * 移動端(手機(jī)端)頁面自適應(yīng)解決方案—rem布局
     * @ 轉(zhuǎn)化為px : rem = 37.5 : 1
     */
     (function flexible (window, document) {
      var docEl = document.documentElement
      var dpr = window.devicePixelRatio || 1

      // adjust body font size
      function setBodyFontSize () {
        if (document.body) {
          document.body.style.fontSize = 14 * dpr + 'px'
        } else {
          document.addEventListener('DOMContentLoaded', setBodyFontSize)
        }
      }

      setBodyFontSize()

      // set 1rem = viewWidth / 10
      function setRemUnit () {
        var rem = docEl.clientWidth / 10
        docEl.style.fontSize = rem + 'px'
      }

      setRemUnit()

      // reset rem unit on page resize
      window.addEventListener('resize', setRemUnit)
      window.addEventListener('pageshow', function (e) {
        if (e.persisted) {
          setRemUnit()
        }
      })

      // detect 0.5px supports
      if (dpr >= 2) {
        var fakeBody = document.createElement('body')
        var testElement = document.createElement('div')
        testElement.style.border = '.5px solid transparent'
        fakeBody.appendChild(testElement)
        docEl.appendChild(fakeBody)
        if (testElement.offsetHeight === 1) {
          docEl.classList.add('hairlines')
        }
        docEl.removeChild(fakeBody)
      }
    })(window, document)

最后，樣式中直接用px單位就好了。如果你的設(shè)計稿寬度為750px，那么寫樣式的時候就要把數(shù)字除以2.

Tip 這邊提一個注意事項, 如果是使用的 VantUi 組件, 還需要再加一個配置文件

設(shè)置 postcss 根目錄下的新建 postcss.config.js 文件（如果有這個文件則無需添加）

  module.exports = {
       plugins: {
         // postcss-pxtorem 插件的版本需要 >= 5.0.0
        'postcss-pxtorem': {
           rootValue({ file }) {
              return file.indexOf('vant') !== -1 ? 37.5 : 75;
            },
            propList: ['*'],
        } ,
      },
    };

以上是我在做H5的時候, 參考別人的方法, 做的整理, 如有問題, 歡迎指出!!!

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

vue 開發(fā) H5 如何做適配

vue 開發(fā) H5 如何做適配

如何創(chuàng)建基礎(chǔ)的vue項目, 我這邊就不和大家說啦, 今天主要是和大家分享一下, vue 開發(fā) H5 端, 如何做適配.

Tip 這邊提一個注意事項, 如果是使用的 VantUi 組件, 還需要再加一個配置文件

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

vue 開發(fā) H5 如何做適配

如何創(chuàng)建基礎(chǔ)的vue項目, 我這邊就不和大家說啦, 今天主要是和大家分享一下, vue 開發(fā) H5 端, 如何做適配.

Tip 這邊提一個注意事項, 如果是使用的 VantUi 組件, 還需要再加一個配置文件

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av