- 博客(11)
- 收藏
- 关注
原创 如何使移动端项目在PC端依然可以良好的展示
前置条件: 移动端适配使用的是如下适配方案, 也就是使用的rem作为适配。html{ font-size: 13.333333vw;}body { font-size: 0.14rem; // 等于 14px}问题现状: 移动端页面在pc端页面显示异常先写一段简单的vue代码,生成4个盒子和一个顶部fixed定位的盒子。<div class="list" v-for="i in 4" style="height: 1rem;border: 1px solid;">
2022-04-22 12:32:23
2573
原创 translate-language-webpack-plugin自动翻译插件
translate-language-webpack-plugin一款用于自动化转换语言的插件,不同于i18n, 无需写多套语言文件, 采用谷歌API进行翻译,只需要编写一种语言,即可转换为其他任意语言简介该插件诞生于中文简体转中文繁体场景下,其他场景未测试,理论上只需要编写匹配对应语言的正则,即可转移成任意其他语言,请尽量不要在开发环境下使用,因为这会频繁的请求谷歌翻译接口,同时开发环境下的注释未去除的情况下,翻译很慢,减慢开发环境下的构建速度。前置工作该插件依赖于谷歌翻译 API,但是谷歌
2022-02-22 23:42:57
1270
原创 移动端rem适配ipad, ipad pro
在inde.html中或者代码中加入以下代码<script> // 适配pad padPro /(pad|pod|iPad|iPod|iOS)/i.test(navigator.userAgent)&&(head=document.getElementsByTagName('head'),viewport=document.createElement('meta'),viewport.name='viewport',viewport.content='targe
2022-02-09 11:14:04
847
原创 解决iOS 上拉边界下拉出现白色空白
起因: 如标题所示,还被运营吐槽了,为什么别人的没有解决:body,html { width: 100%; height: 100%; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden;}需要滚动的地方加overflow-y: auto;其他方案参考...
2022-01-25 14:18:17
3286
原创 vue中弹幕实现及优化
起因: 活动需求需要使用弹幕的形式展示内容解决: 首先是找到一个vue-baberrage然后使用起来看起来也没有什么问题,最后当我打开浏览器rendering的paint flash发现重绘严重最后找到一个vue-danmaku 组件,发现不会频繁重绘定位:弹幕移动使用transform改变位置,并使用will-change进行优化will-change属性通过告诉浏览器什么属性、什么元素将会发生变化,可以对这些操作进行可能性的优化,由此提高CSS动画的执行效率大量的节点动画渲染可以选
2022-01-25 13:51:59
1331
原创 移动端chrome与safria vh高度问题
起因: 中间内容需要减去顶部与底部内容原先使用 100 vh - 245px, 发现pc端浏览器显示正常,移动端除了chrome与safria都显示正常。定位: 排查得知,这两个浏览器得vh包括了搜索栏与,底部便签栏的高度。解决: 采用 vh-checknpm i vh-check -s在vue中main.js引入import vhCheck from "vh-check";vhCheck('browser-address-bar');使用: height: calc(100vh
2022-01-25 13:21:13
1595
1
原创 Vue使用Less注入全局变量
按如下配置即可module.exports = { css: { loaderOptions: { less: { // 若 less-loader 版本小于 6.0,请移除 lessOptions 这一级,直接配置选项。 lessOptions: { modifyVars: { hack: `true; @import "src/assets/css/theme.less";`, },
2022-01-08 14:17:03
703
原创 nginx部署vue history
事情是这样的,一开始本地开发使用hash模式,后来改为history模式,部署到线上一看???, App。vue渲染了,router-view没渲染?什么鬼?看了下vue-router配置const router = new VueRouter({ base:'/haiwai/aa/temp/', mode:'history', routes,});在看下nginx配置location /haiwai/aa/temp { root html/; try_files $uri $
2021-12-28 14:30:32
602
原创 React-router-dom 6.2.1配置
.env设置部署目录前缀REACT_APP_PBLICK_PATH= /testindex.tsBrowserRouter 为history模式,部署到服务器上如果不是根目录需要配置basenameconst basename = process.env.REACT_APP_PBLICK_PATH; <BrowserRouter basename={basename}> <App /> </BrowserRouter>App.tsxfun
2021-12-27 12:21:34
1048
原创 原生JS之Toast弹窗
function fn() { Toast("复制成功", 2000); } function Toast(msg, duration) { duration = isNaN(duration) ? 3000 : duration; var m = document.createElement("div"); m.innerHTML = msg; m.style.cssText = ...
2021-12-22 16:33:42
574
原创 一起上创业网课嘛
那些年一起上的创业网课操作如下图:首先登录创业网课,进入播放视频界面代码如下://移除鼠标离开视频不播放 document.addEventListener("mouseleave", function() { var myvideo = document.querySelector('video'); myvideo.play(); }, false); setIn...
2019-04-16 12:31:24
580
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人