日志
vue-cli3 + bootstrap3实现响应式布局
2019-06-04 13:31
1、用px2rem配合lib-flexible,让网页适配。
lib-flexible 作用:让网页根据设备dpr和宽度,利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备 安装: npm install lib-flexible 1 引入:入口文件main.js中: import "lib-flexible/flexible.js" 1 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 window.onresize = function () { setRem() } 在main.js中引入改js文件: import "./utils/rem" 1 然后就可以直接用px写页面啦,而不用去计算rem的值,是不是很舒服呢。 3、使用VW。了解下vw 与 vh单位,以viewport为基准,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实现响应式图片 在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性,从而让图片在其父元素中更好的缩放。 对于图片的大小限制一定要在图片的父级元素进行限制。 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框架设置响应式布局