vue-14-less 语法的使用
2018-10-07 19:08
453 查看
vue-15-rem-less
在计算手机端页面的时候, 使用rem和less的方式, 可以方便的设置需要的大小等
1, 在index.html中添加rem的script 代码
在head中添加
<script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if(clientWidth>=750){ docEl.style.fontSize = '100px'; }else{ docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); </script>
2, 安装 less 等
cnpm install --save-dev less less-loader
3, 在 config/webpack.base.conf.js 中添加 less 配置
{ test: /\.less$/, use: [ "style-loader", "css-loader", "less-loader" ] }
4, 安装 stype-loader 和 css-loader
cnpm install --save-dev style-loader css-loader
5, 在 vue页面中, 修改css 为:
<style scoped lang="less"> </style>
6, 就可以通过写less的语法来写css了
<template> <div class="hello"> <div class="box"> <p> 哈哈 </p> </div> </div> </template> <script> export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped lang="less"> /*200 * 300 宽度*/ .box{ width: 200 / 50rem; height: 300 / 50rem; background: dodgerblue; font-size: 16 / 50rem; } </style>
相关文章推荐
- vue中less公共文件的使用
- 14,Objective-C语法之代码块(block)的使用
- vue中使用less
- 自制消消乐 使用学习vue.js 和 es6 class语法 就写了一个这个游戏 源码 可以去 github 上下载
- vue使用less识的scoped属性
- 使用webpack+vue+less开发,使用less-loader,配置全局less变量
- vue-cli less的使用
- 在vue 中使用 less
- 移动WEB布局使用less语法之视网膜屏幕如何来解决图片像素问题
- vuejs使用jsx语法
- Vue- 对象语法 v-bind:class与对象语法的使用(重要)
- 使用vue + less 实现简单换肤功能
- vue-cli 构建的项目中如何使用 Less
- vue-cli构建项目使用 less
- vue中使用less编译css
- vue中如何使用less
- Vue- 对象语法 v-bind:class与对象语法的使用(重要)
- vue中使用less
- vue-cli 构建的项目中使用 Less
- 移动WEB布局使用less语法之header布局