没有用 webpack 以前,计算 font-size 的代码我都是放头部的,立即加载函数里面。现在用了 Vue 全家桶 + webpack,我会把这段计算代码放在 App.vue 的 created 钩子函数中。一直都这样用,没出过问题。但是我觉得这个方法会不会有点笨,想知道会不会有 webpack 的模块能给 html 标签计算 font-size ?但是我搜了好久的确找不到。不知道各位的项目是怎么做的。也是这样把“脏代码”暴露出来吗?px-to-rem 类的模块倒是很多,gulp 也有,但是计算 font-size 确实找不到,而且,用模块的话 font-size 就能写到 css 里而不是标签里了。还有,计算 font-size 的 JavaScript 代码我是拷贝网易的,你们的代码是哪里拷贝的呢,有没有一个公共的项目代码是很多大公司大项目都用到的呢。我只是觉得我这样“在网上随便拷段代码”然后“找个地方粘贴进去能跑就行”的做法不大规范。
1 回答
千万里不及你
TA贡献1784条经验 获得超9个赞
看题主的问题,题主应该是使用了rem适配方案。
什么时候计算:通过js计算html的fontSize的方式唯一依赖的是网页宽度能够获取到的时候,网页一打开,浏览器的窗口信息(clientWidth)就可以通过BOM获取到。所以当然是越早计算越好。
不需要对这段代码打包的话,可以直接script引入head即可,当然需要放到viewport的meta标签后面,缩放会影响fontSize的值。
当然对于webpack的项目来说这样引入有点另类,一般情况下,vue脚手架的项目可以放到入口文件main.js中,这个文件是一个js文件,用来引入vue框架,引入router,vuex等其他插件和实例vue的根节点,这些引入还没有包含任何业务,完全可以需要前置的业务放在这个文件中,比如题主的这个需要计算fontSize的业务。
至于放到App.vue中也没有问题,因为对于vue的脚手架项目来说,App.vue是单文件组件的root节点下的第一个子节点,而且没有兄弟节点,只有子辈节点,父节点也只是用来初始化vue的根节点. 所以id=app的div没有特殊样式的话,其实也是不影响的。
- 1 回答
- 0 关注
- 575 浏览
添加回答
举报
0/150
提交
取消