超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

vue-cli3 + bootstrap3實(shí)現(xiàn)響應(yīng)式布局

2019-5-28    seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

1、用px2rem配合lib-flexible，讓網(wǎng)頁適配。

lib-flexible
作用：讓網(wǎng)頁根據(jù)設(shè)備dpr和寬度，利用viewport和html根元素的font-size配合rem來適配不同尺寸的移動(dòng)端設(shè)備
安裝：

npm install lib-flexible
1
引入：入口文件main.js中：

import "lib-flexible/flexible.js"
1
2、手寫一個(gè)js小工具，省略rem的計(jì)算，加快開發(fā)速度。
在src目錄下增加一個(gè)utils目錄，在里面新建一個(gè)js文件，寫入以下內(nèi)容：

// 基準(zhǔn)大小
const baseSize = 32
// 設(shè)置 rem 函數(shù)
function setRem () {
    // 當(dāng)前頁面寬度相對于 750 寬的縮放比例，可根據(jù)自己需要修改。
    const scale = document.documentElement.clientWidth / 750
    // 設(shè)置頁面根節(jié)點(diǎn)字體大小
    document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時(shí)重新設(shè)置 rem
window.onresize = function () {
    setRem()
}


在main.js中引入改js文件：

import "./utils/rem"
1
然后就可以直接用px寫頁面啦，而不用去計(jì)算rem的值，是不是很舒服呢。

3、使用VW。了解下vw 與 vh單位，以viewport為基準(zhǔn)，1vw 與 1vh分別為window.innerWidth 與 window.innerHeight的百分之一

安裝：

npm i postcss-px-to-viewport -save -dev
1
在package.json中配置如下：

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 32,
        "propList": ["*"]
      }
    },
    "plugins": {
      "autoprefixer": {},
      "postcss-px-to-viewport": {
        "viewportWidth": 750,
        "minPixelValue": 1
      }
    }
  },

4、利用bootstrap實(shí)現(xiàn)響應(yīng)式圖片

在 Bootstrap 版本 3 中，通過為圖片添加 .img-responsive 類可以讓圖片支持響應(yīng)式布局。其實(shí)質(zhì)是為圖片設(shè)置了 max-width: 100%;、 height: auto; 和 display: block; 屬性，從而讓圖片在其父元素中更好的縮放。
對于圖片的大小限制一定要在圖片的父級(jí)元素進(jìn)行限制。

5、利用bootstrap的柵格系統(tǒng)，下面列一下柵格系統(tǒng)的參數(shù)：

超小屏手機(jī) (<768px) 小屏幕平板(>=768px) 中等屏桌面(>=992px) 大屏桌面(>=1200px)
類前綴 .col-xs .col-sm .col-md .col-lg
列數(shù) 12 12 12 12
.container最大寬度 None(自動(dòng)) 750px 970px 1170px
舉個(gè)移動(dòng)設(shè)備和桌面的例子：


<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

還有更多對響應(yīng)式的支持，就不一一列舉了。

分享本文至：

日歷

鏈接

個(gè)人資料

存檔