追求卓越一諾千金

藍藍設計-_0369万能买法,2011年成立_-_掌上彩票安卓版,主創清華團隊|_168彩票网站返现正规吗,專注軟件和互聯網ui設計開發|_殷世航个人资料。擅長企業信息化管理_|_水产价格、監控||重庆历任书记、大數據軟件UIUE谘詢和設計開發服務_|东北鸡。立足UI|_|柯达广告语,好好學習_||孝义广电传媒,天天進步|-_世纪星光电影城!


vue-cli3 + bootstrap3實現響應式布局

2019-5-28 釋然 前端及開發文章及欣賞


如果您想訂閱本博客內容__云鼎彩票公司,每天自動發到您的郵箱中_-_长城风骏房车2012款, 請點這裏

1|坛缘坊、用px2rem配合lib-flexible-长江大桥有多长,讓網頁適配|隆裕酒号赖茅酒。

lib-flexible
作用-_|银通卡怎么用:讓網頁根據設備dpr和寬度__阴道老化,利用viewport和html根元素的font-size配合rem來適配不同尺寸的移動端設備
安裝_可爱的骨头女主角:

npm install lib-flexible
1
引入---亿鑫彩票:入口文件main.js中-_-111端口漏洞:

import "lib-flexible/flexible.js"
1
2--艾滋门、手寫一個js小工具-|皮带哥张吉勇,省略rem的計算-_-凹凸绕梁三日,加快開發速度_阿里旺旺2009。
在src目錄下增加一個utils目錄-11086移动彩票官网,在裏麵新建一個js文件-|赢彩计划,寫入以下內容__|讫:

// 基準大小
const baseSize = 32
// 設置 rem 函數
function setRem () {
    // 當前頁麵寬度相對於 750 寬的縮放比例|-习水教育科技网,可根據自己需要修改|-东莞一条龙服务流程。
    const scale = document.documentElement.clientWidth / 750
    // 設置頁麵根節點字體大小
    document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時重新設置 rem
window.onresize = function () {
    setRem()
}


在main.js中引入改js文件-_移动彩票app:

import "./utils/rem"
1
然後就可以直接用px寫頁麵啦---衡水热线聊天室,而不用去計算rem的值|_-优选彩票网址,是不是很舒服呢-_|大中电器客服电话。

3|||雷区里的工具、使用VW||塔罗牌占卜大师 tlpnana。了解下vw 與 vh單位-|360彩票全国开奖你,以viewport為基準|--外地牌照车辆过户,1vw 與 1vh分別為window.innerWidth 與 window.innerHeight的百分之一

安裝-_金山毒霸2006:

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實現響應式圖片

在 Bootstrap 版本 3 中-|雪莉露cos,通過為圖片添加 .img-responsive 類可以讓圖片支持響應式布局-_-钱多多手机铃声。其實質是為圖片設置了 max-width: 100%;--|平方米和公顷换算、 height: auto; 和 display: block; 屬性|__众发彩票走势预测,從而讓圖片在其父元素中更好的縮放|_众发彩票害死我了。
對於圖片的大小限製一定要在圖片的父級元素進行限製__注册送白菜网不限制ip。

5_-微锐答题、利用bootstrap的柵格係統__-卓易彩票闪退,下麵列一下柵格係統的參數_--盈盈彩票网可靠吗:

超小屏手機 (<768px) 小屏幕平板(>=768px) 中等屏桌麵(>=992px) 大屏桌麵(>=1200px)
類前綴 .col-xs .col-sm .col-md .col-lg
列數 12 12 12 12
.container最大寬度 None(自動) 750px 970px 1170px
舉個移動設備和桌麵的例子|||长乐市人民政府网:


<!-- 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>

還有更多對響應式的支持|_|二手柴油皮卡车,就不一一列舉了-百立乐奶粉最新事件。


標簽: vue-cli3 + bootstrap3實現響應式布局 « Vue框架設置響應式布局 | 知乎 Redesign 視覺設計»


訂閱Rss