vue 全局css 路由刷新后不生效

html-css038

vue 全局css 路由刷新后不生效,第1张

可能是因为浏览器缓存了样式文件导致。

可以在css文件引用的末尾随便加个请求参数，如：main.css?v=201804091834，浏览器就以为是个新文件，然后从服务器重新下载该文件。

vue2.0 + webpack做移动端项目，如果在项目中使用了CSS3 animation动画属性，会发现在ios上完全没问题，但是在安卓手机上依然失效，尽管把animation在五大浏览器各种兼容都写了还是不行，原因其实很简答。其实在 vue-cli脚手架package.json配置文件里面就有对浏览器的版本做css的前缀处理"browserslist": [">1%","last 2 versions","not ie <= 8"]意思是 只兼容主流浏览器的最新两个版本。如果我们要兼容所有的就必须把这改成"browserslist": [">1%","last 5 versions","Android >= 4.0","not ie <= 8"]就可以了。CSS部分我们也需要做好兼容写法，优雅降级和渐进增强都可以。.audio-play-show {-webkit-animation: say 12s linear infinite-moz-animation: say 12s linear infinite-ms-animation: say 12s linear infinite-o-animation: say 12s linear infiniteanimation: say 12s linear infinite}@-webkit-keyframes say {0% {}100% {-webkit-transform: rotateZ(360deg)}}@-moz-keyframes say {0% {}100% {-moz-transform: rotateZ(360deg)}}@-ms-keyframes say {0% {}100% {-ms-transform: rotateZ(360deg)}}@-o-transforms say {0% {}100% {-o-transform: rotateZ(360deg)}}@keyframes say {0% {}100% {transform: rotateZ(360deg)}}

<style type="text/css">

#outside{width:200pxheight:100pxborder:1px solid #ccc}

#inside{width:80%height:80%border:1px solid #c00}

</style>

<div id="outside"><div id="inside">sdf</div></div>

<script src='jquery.min.js'></script>

<script>

alert(parseInt($('#inside').css('width'))*100/parseInt($('#outside').css('width'))+"%")

</script>