vue-cli3+bootstrap3实现响应式布局
1、⽤px2rem配合lib-flexible，让⽹页适配。
lib-flexible
作⽤：让⽹页根据设备dpr和宽度，利⽤viewport和html根元素的font-size配合rem来适配不同尺⼨的移动端设备
安装：
npm install lib-flexible
引⼊：⼊⼝⽂件main.js中：
import "lib-flexible/flexible.js"
2、⼿写⼀个js⼩⼯具，省略rem的计算，加快开发速度。
在src⽬录下增加⼀个utils⽬录，在⾥⾯新建⼀个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
setRem()
}
在main.js中引⼊改js⽂件：
import "./utils/rem"
然后就可以直接⽤px写页⾯啦，⽽不⽤去计算rem的值，是不是很舒服呢。
3、使⽤VW。了解下vw 与 vh单位，以viewport为基准，1vw 与 1vh分别为window.innerWidth 与 window.innerHeight的百分之⼀安装：
npm i postcss-px-to-viewport -save -dev
在package.json中配置如下：
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-pxtorem": {
"rootValue": 32,
"propList": ["*"]
}
},
"plugins": {
"autoprefixer": {},
"postcss-px-to-viewport": {
"viewportWidth": 750,
"minPixelValue": 1
}
}
},
4、利⽤bootstrap实现响应式图⽚
在 Bootstrap 版本 3 中，通过为图⽚添加 .img-responsive 类可以让图⽚⽀持响应式布局。其实质是为图⽚设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从⽽让图⽚在其⽗元素中更好的缩放。
对于图⽚的⼤⼩限制⼀定要在图⽚的⽗级元素进⾏限制。
5、利⽤bootstrap的栅格系统，下⾯列⼀下栅格系统的参数：
超⼩屏⼿机 (<768px)⼩屏幕平板(>=768px)中等屏桌⾯(>=992px)⼤屏桌⾯(>=1200px)类前缀.l-lg
为什么使用bootstrap?列数12121212 .container最⼤宽度None(⾃动)750px970px1170px
举个移动设备和桌⾯的例⼦：
<!-- 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>
还有更多对响应式的⽀持，就不⼀⼀列举了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。