首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么我的CSS链接需要?vh=#才能在我的网站上更新?

在网站开发中,CSS链接需要添加?vh=#参数是为了解决浏览器缓存的问题。浏览器在加载网页时会将静态资源如CSS文件进行缓存,以提高网页加载速度。然而,当我们对CSS文件进行更新时,浏览器可能仍然使用缓存中的旧版本,导致网页显示不出最新的样式。

为了解决这个问题,可以通过在CSS链接后添加?vh=#参数的方式来强制浏览器重新加载CSS文件。这个参数可以是任意字符串,通常使用时间戳或版本号等唯一标识符,确保每次更新CSS文件时参数值都不同。

例如,假设原始的CSS链接为:

代码语言:txt
复制
<link rel="stylesheet" href="styles.css">

添加?vh=#参数后的链接为:

代码语言:txt
复制
<link rel="stylesheet" href="styles.css?v=1">

当你更新CSS文件时,只需要修改?v=1为?v=2或其他不同的值,浏览器会认为这是一个新的链接,从而重新加载最新的CSS文件。

这种方式的优势是简单易用,不需要修改CSS文件的内容,只需修改链接即可。同时,它也适用于各种网站和应用场景。

腾讯云提供了丰富的云计算产品,其中与网站开发相关的产品包括云服务器、云存储、内容分发网络(CDN)等。你可以根据具体需求选择适合的产品来搭建和优化你的网站。

  • 腾讯云服务器(云主机):提供高性能、可扩展的云服务器实例,适用于网站托管、应用部署等场景。了解更多:腾讯云服务器
  • 腾讯云对象存储(COS):提供安全可靠的云端存储服务,适用于存储和管理网站的静态资源、图片、视频等。了解更多:腾讯云对象存储
  • 腾讯云内容分发网络(CDN):加速网站内容分发,提高用户访问速度和体验。了解更多:腾讯云内容分发网络

通过使用腾讯云的相关产品,你可以更好地管理和优化你的网站,提供更好的用户体验。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

你不应该依赖CSS 100vh,这就是原因!

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及系列文章。...图片 为什么100vh问题会发生在移动设备上? 对这个问题进行了一番调查,发现了其中原因。简短答案是,浏览器工具栏高度没有被考虑在内。...如果你想深入了解为什么会发生这种情况,Stack Overflow这个帖子很有帮助。 如何修复移动设备上100vh问题? 第一个建议是尽量少用 vh。...仅使用 CSS 在移动设备上修复 100VH 问题 时,使用 vh 目的是为了简单地创建与视口高度相等部分。例如,当你在建立登陆页面时,这很常见。...所以,下面的CSS规则就不会生效: min-height: calc(-webkit-fill-available / 2); 例如,如果需要在元素上有一半可用高度,必须使用JavaScript。

1.2K40

弹指间,重温几个设置满屏小技巧

不妨了解一下 vh定义法 vh:css3新单位,view height简写,是指可视窗口高度,1vh=视窗高度1%; 既然讲到CSS单位了,麻烦各位再脑补下这个问题: CSS单位都有哪些?...产生了我们此时所看到效果图。 为什么会是这样呢,Apple官方开发人员回应说"that it wasn’t a bug, it’s a feature." 原来,这是别具匠心艺术品。...滚动时可见区域会动态变化,如果我们相应地更新CSS视口高度,则需要在滚动过程中更新布局。为了达到更好用户体验,使用较大视图尺寸是最好折衷方案。..., `${vh}px`); 这样就成功在:root中创建了--vhcss变量 为了防止旋转屏幕功能使用,我们需要监听窗口调整大小事件来更新我们创建--vh值 window.addEventListener...很明显这样代价还是有点大,一旦更新--vh值,我们界面将发生重绘,体验是十分不好,应该尽量避免此类骚操作。

1.1K20

熬夜开发了一款简约实用、支持多平台Markdown在线编辑器(开源)

首先调研了很多线上热门md编辑器,都很优秀。不为超过他们,主要自己用着舒服点。这篇文章主要是记录下是如何从0到1是完成一款还算拿得出手Markdown编辑器。...凭良心说话,用过Markdown编辑器也有好几款,其中包括:小书匠,Haroopad,Atom等,但Typora是最合心意一款编辑器了,其轻量、快速、易于上手,使用起来简直不要太舒服!!...搭建Vue脚手架 我们会使用VueCLI搭建一个最基础项目,这里暂时不需要Vue-router、Vuex这些插件,所以尽可能轻装。 2....增加功能 首先,开发这个程序初衷是更好地方便自己写文章,所以,定下了这几个需求: 可复制HTML格式文本,方便复制到微信公众号 可复制Markdown文本,方便可以复制到稀土掘金、csdn这些博客网站上发布...','欢迎关注公众号:前端历劫之路','创建了一个技术交流、文章分享群,群里有很多大厂前端大佬,关注公众号后,点击下方菜单了解更多即可加我微信,期待你加入'] }; }, methods

84720

如何使用CSS创建高级动画,这个函数必须掌握

我们每天都在网上摸鱼,作为前端开发人员,网站上微妙细节变化通过比别人会更关注。一直注意到一件事是网站上动画流畅性。动画对于用户体验来说是非常好,有时我们可以一些有趣动画来留住用户。...(注意,链接动画是由黑线表示)。 叠加动画 有很多步骤大动画可以被分解成多个小动画。在 css 中,通过添加animation-delay属性来实现这一点。...我们需要选择一个合适V,使我们动画缓慢地向右移动,但又不能太多,以免占用整个空间。在这种情况下,发现0.55最适合。...为了达到滑动效果,我们需要将P2向Y轴下移(负值),所以P2=(X,-Y)。 Y应该是一个大值。在这种情况下,选择 Y=5000。...循环部分 要在CSS中创建一个圆(循环),我们需要把圆移到循环中心,然后从那里开始做动画。圆半径是100px,所以我们把圆位置改为top: 20vh(30是期望半径(这里是10vh))。

6.8K20

单屏页面响应式适配玩法

首先瞅一下效果图 接着就是思考怎么做,想法如下图。 ?...把公共 页头 、页脚、导航栏、边框 放到最顶层,比方说设置层级为 999,其他每个独立页则放在下面,然后切换页面的时候更新独立页层级以达到效果图效果(当然不能超过最顶层)。...我们不需要考虑更低端浏览器,所以可以使用比较前沿特性,如 pointer-events 等特性。 所以使用 vh 做适配方案,vh 是什么单位详情可以自己查阅一下文档,这里做个简单介绍。...假设浏览器可视区高度为 720px,某个元素宽度为 300px,那应该写成多少 vh 与 300px 相等呢,如下。...PPPS: 是不是有点坑,应该字体属性最小值为 12,而其他属性值没有控制对 所以,如果使用 rem + vh 方案,在界面缩小到一定尺寸后继续缩小,有些值达到最小值固定不变,而有些值仍在变小,UI

2K20

Butterfly 自定义代码高亮字体

blog frame 是基于最新版本 Hexo,theme 用是 Butterfly 3.8.4 如果环境与我不相同,可能会有一些无法避免 bug,需要读者自行去修复 Butterfly...修改 CSS 样式文件 新建好一个接下来要 inject 进 butterfly css 文件(如果不会的话,跟好接下来每一步) 在 Hexo 根目录下打开文件夹 source,在此处新建一个文件夹...,AcWing 等网站都是如此 也就是说,可以基于我接下来实现逻辑,制作一个插件,在各大网站 Code 网站上实现代码字体更改功能 不过有这功夫,相信大家肯定还是更喜欢配置更美化本地开发环境...font-size: 8vh!...important; } ---- 如果觉得上述文章有帮助,欢迎留下你评论,让知道确实帮助到了很多人 ( ^ w ^ ),这也是继续更新博客动力 另外,希望博客互留友链同学,可以到我链接下留下你博客信息

1.1K30

【前端词典】提高幸福感 9 个 CSS 技巧

至于为什么合并个人觉得这和排队取款安全距离有点类似,人与人之间安全距离是 1m,如果安全距离不合并,那么我们在排队时候是不是人与人距离就变成 2m 了。当然很可能不是这个原因。...因为在需要调整字体大小时候,只需修改 font-size 值,而 line-height 已经设置成了相对行高了。 首行缩进两个字符 在存在首行缩进需求,也会使用这个单位。...text-indent: 2em 视口单位 vw | vh vw: 1vw = 视口宽度 1% vh: 1vh = 视口高度 1% 我们知道以 rem 单位设计弹性布局,是需要在头部加载一段脚本来进行监听分辨率变化来动态改变根元素字体大小...合理使用变量 一般设计稿中某一类文字(元素)都是用相同字体大小、颜色、行高等样式属性,所以这些值我们不必每次都重复写,因为当 UI 更新设计方案,你需要地方就很多了。...变量使用语法是:var(); 无论是变量定义和使用只能在声明块 {} 里面 CSS 变量字符限制为: [0-9]、[a-zA-Z]、_、-、中文和韩文等。

69630

不可思议CSS 实现鼠标跟随效果

而鼠标跟随这种效果属于行为,要实现通常都需要借助 JS。 当然,本文重点,就是介绍如何在不借助 JS 情况下使用 CSS 来模拟实现一些鼠标跟随行为动画效果。...CSS鼠标跟随按钮效果 一开始,在 CodePen 上看到了下面这个效果,使用了 SVG + CSS + JS 实现,就想着,仅用 CSS,能不能 copy 一下: ?...,得到一个稍微好一丢丢丢类似效果: ? Demo 戳,CodePen Demo -- CSS鼠标跟随按钮效果 全屏鼠标跟随动画 OK,继续,下面来点更炫。嗯,就是那种华而不实。 ?...额,看法是也许业务中真的用不上或者应用场景极为有限,但是多了解一些,能在遇到问题时候多点选择,多一些思考空间,更好发散思维,至少是无害吧。...更多你可能想都想不到有趣 CSS 你可以来这里瞧瞧: CSS-Inspiration -- CSS灵感 更多精彩 CSS 技术文章汇总在 Github -- iCSS ,持续更新,欢迎点个 star

4.5K10

Butterfly 自定义代码高亮字体

Github,接着进入该项目目录下:传送门选择你想要代码高亮主题,这里以 vs 为例 (如果是 AcWing 社区同学,应该会比较喜欢这个主题)将 vs.css 文件里内容全部复制下来修改 CSS...,AcWing 等网站都是如此undefined也就是说,可以基于我接下来实现逻辑,制作一个插件,在各大网站 Code 网站上实现代码字体更改功能undefined不过有这功夫,相信大家肯定还是更喜欢配置更美化本地开发环境...: 8vh!...important;}-------------------------如果觉得上述文章有帮助,欢迎留下你评论,让知道确实帮助到了很多人 ( ^ w ^ ),这也是继续更新博客动力另外,希望博客互留友链同学...,可以到我链接下留下你博客信息 传送门

1.3K50

【前端词典】提高幸福感 9 个 CSS 技巧

至于为什么合并个人觉得这和排队安全距离有点类似,人与人之间安全距离是 1m,如果安全距离不合并,那么我们在排队时候是不是人与人距离就变成 2m 了。当然很可能不是这个原因。...text-indent: 2em 视口单位 vw | vh vw: 1vw = 视口宽度 1% vh: 1vh = 视口高度 1% 我们知道以 rem 单位设计弹性布局,是需要在头部加载一段脚本来进行监听分辨率变化来动态改变根元素字体大小...合理使用变量 一般设计稿中某一类文字(元素)都是用相同字体大小、颜色、行高等样式属性,所以这些值我们不必每次都重复写,因为当 UI 更新设计方案,你需要地方就很多了。...变量使用语法是:var(*); 无论是变量定义和使用只能在声明块 {} 里面 CSS 变量字符限制为: [0-9]、[a-zA-Z]、_、-、中文和韩文等。...推荐阅读 公众号能带来什么价值?(文末有送书规则,一定要看) 每个前端工程师都应该了解图片知识(长文建议收藏) 为什么现在面试总是面试造火箭?

84820

BuildAdmin02:前端架构布局和菜单栏折叠实现

前言 上一篇主要讲了学习前端一个经历,以及为什么选择BuildAdmin作为深入前端学习原因.同事也大致聊了一下学习前端需要使用哪些技术栈。...BuildAdmin前端目录如下,只对一级目录进行了粗略标注,详细可以去官看。 在本地需要使用vue-cli脚手架来构建项目,在构建时会有很多选项,包括使用vue版本和各种插件。...上面是从Elementcopy布局代码。...那至于为什么定义成260,接着往下看。 那么,css中这些var里面的--开头变量是哪里来啊? 这些其实就是el和自定义全局变量,在控制台都可以查看到。...所以我们就需要维护一个类似全局变量东西:一个地方修改了一个变量,其他使用这个变量也会立即更新,VueX和Pinia就是干这个。在BuildAdmin中,使用是Pinia。

58641

vite新建vue3项目及安装插件笔记

' 使用 unplugin-element-plus 自动导入,使用 ElMessage、ElLoading 等组件,需要手动导入样式。...使用了 unplugin-auto-import,还可以自动导入 vue、vue-router、element icon 等,需要什么配置什么: imports:["vue"], dts:'src/...Plus 内置 CSS: //新建element.scss @forward 'element-plus/theme-chalk/src/common/var.scss' with ( $colors.../element.scss'; 至于其他方法,想想还是不试了,觉得官方给文档还是不够好,总有一些要去试,也有可能是本人看文档能力不行?...tips:后面安装了一些其他东西,不知道为什么主题色不生效了,被覆盖了,在 main.ts 用 import()定时器引入才有用,没找到是因为配置哪个导致

57220

python最新可视化库,pyvisflow说一切可联动是什么

安装: pip install pyvisflow 更新: pip install pyvisflow --upgrade 这次就简单解答一下 本节内容基于 pyvisflow 0.1.9版本 ---...- 为什么制作 pyvisflow pyvisflow 不是给程序员制作网页服务使用。...比如说 "希望点击图表某个部分,然后页面的表格能够筛选出相关数据" streamlit 并非做不到,只是需要你去编写前端控件 一直以来是使用 excel 制作数据可视化报告,有时候也会使用 powerbi...开始时候是做 server版本,就是类似 dash、streamlit 这种带 web 服务,后来发现做成离线也挺有趣,所以优先发布离线版本 那么,到底 pyvisflow 是用来做什么?...最后 必须说明是,pyvisflow 只是刚起步,还有许多惊喜能在研发中,欢迎大家试用并且反馈。

1.1K30

奇思妙想,动手 DIY 你浏览器主页

虽然火狐、Chrome 默认标签页和一些插件主页也都不错,但是多少都有一些限制,比如不支持切换壁纸、无法自定义快捷链接等。 之前是 KIM 主页铁杆粉丝,但整个主页上默认链接几乎都用不到。...作为一名创作者,更希望自己主页是各种创作平台,比如 CSDN、牛客、GitHub 等。虽然可以登录 KIM 主页来修改快捷链接,但有什么能比自己定制一个主页更灵活呢?...况且本身并不需要很大工作量。 那么要给主页添加哪些功能呢?首先最重要肯定是 搜索、然后是快捷链接,其他功能都是锦上添花。 2....比如要做一个浏览器主页,本身是一个很小前端项目,因此不需要重型(文件较大)框架,可以直接选择原生 HTML + CSS + JavaScript 三件套,搭配 jQuery 库节省代码量。...切换主题 这里定义了两个 CSS 文件,分别作为白底和透明主题样式,切换为透明主题时,只需给最外层 HTML 标签增加一个类名即可,代码如下: /* 白底 CSS 文件 */ .search-wrapper

79640

一个中年girl技能遗忘清单——曾经理解Flex是错误

那么肯定用html+css+js写,但是由于我写了大半年小程序,已经忘记了动画怎么写,特效怎么写,甚至连单位布局都忘记了。 于是开始百度/谷歌,像一个初学者一样,一步一个脚印。...写页面的速度慢连我自己都无法想象,一个移动端页面,居然调试了一天。按照以前这个复杂页面需要2小时。 可怜弱小又无助。 所以记录一下技能点,以备不时之需。也许下一次写网页又是半年后了呢。...请与水平垂直这两个方位概念区分开,这是一个方位,如果说当年定义时侯为什么不命名为vertical&horizon??...代码链接点击这里~ 可以参考flex文章: 阮一峰老师 a guide to flexbox CSS 伸缩盒布局模组(W3C) rem计算方式 搞定了布局,开始思考用什么单位。...vw/vh是直接按照屏幕尺寸来,因此可以适配各种屏幕,比如我想要页面height:100%,通常做法是html,body{height:100%},这样设置之后我们可以使用element{height

54120

油猴脚本编写教程

等vagrant更新时候提醒脚本 前段时间了解了vagrant这个东西,感觉很有意思,准备研究一下,但是照着官教程运行时候,第一步就发生了错误。...为了能在更新时候及时获取到提示,需要脚本在所有网站上生效,来检测版本。但是这样做会导致另外一个问题,那就是每次打开一个网页都会运行一次检查vagrant脚本,而这是完全不必要。...所以需要一个额外判断,这就需要利用油猴提供API来保存当前日期,只有每天第一次时候才会执行检查代码。本来很复杂,需要一个日期变量,然后还要额外一个变量保存是否是今天第一次更新。...将文章同步复制到Csdn和思否编辑器脚本 文章一般都是简书首发,然后复制粘贴到Csdn中,但是后来发现每次手动操作太蠢了,为什么不用脚本来自动化呢?所以我又写了个脚本帮忙完成自动化工作。...所以最后就采用了第一种办法。 然后又遇到一个问题,那就是如果编辑器自带了保存和恢复功能,很可能会把复制过去文章给覆盖了,所以需要等页面加载完之后,延迟一段时间进行复制操作。

7.1K10

【译】CSS中存在随机数吗?

CSS允许在网站上创建动态布局和接口,但作为一种语言,它是静态:一旦设置了一个值,就不能更改。随机性概念不在讨论范围之内。在运行时生成随机数是JavaScript领域,而不是CSS领域。...但是这些解决方案不是100%CSS,因为它们需要用JavaScript产生随机数更新CSS变量。...avatar 为什么关心CSS随机数 在过去,曾开发过一些简单只使用CSS应用程序,如益智游戏、Simon游戏和魔术。但是想做一些更复杂事情。...那时做了一件大多数开发人员会做事情:当他们发现他们不能在线搜索到问题答案时,就用StackOverflow向其他开发人员寻求帮助,优秀Temani Afif想出了一个解决方案。...在改掉这些之后,剩下事就是创建一个小界面来绘制一个可点击假骰子,CSS《蛇和梯子》就完成了。 这种方法有一些明显缺陷 它需要用户输入:必须单击一个标签才能触发“随机数生成”。

1.7K20

Firefox扩展开发 (插件开发) Extension开发 入门教程 5步走 五步走

在此推荐3.0,因为最新版3.6或者3.7,那些扩展还没有更新跟进,所以要想安装更多扩展,还是以3.0为好。   2.Firebug,这个不必多说。...虽然只是菜鸟,只是用这个来定位某些xul元素对应什么代码,但帮助不少。...官推荐,当然安装啦。这个是一套Firefox扩展,包括打包xpi功能,预览xul等。   4.Spket IDE。开发扩展IDE,官推荐,比较好用。不过好像不能打包xpi,也不能测试。...,每次要双击了知道是怎么匹配。)      ...7.另外,王青师兄习惯使用eclipse + spket + XULBooster + Firefox (上述工具基本都能在MDC网站上找到链接下载) 第五步: 慢慢学习Javascript,CSS还有一些细节技术

3.4K30

CSS 中calc()完整指南(一)

CSS tricks上有一系列完整指南文章,后面会翻译这些内容,更新不会一下子完成,而是会分成几个,防止自己因看到文章过长而放弃翻译。 CSS有一个特殊calc()函数,用于做基本数学运算。...下面是一个例子: .main-content { /* Subtract 80px from 100vh */ height: calc(100vh - 80px); } 在本指南中,让我们来介绍一下关于这个非常有用功能所需要了解一切...我们会讲到一些数使用注意事项(因为有时你不需要单位),但这是针对数字数学,而不是字符串之类东西。 .el { /* Nope!...您也可以不执行任何计算并且仍然有效: .el { /* Little weird but OK */ width: calc(20px); } 不能在媒体查询中使用 当正确使用calc()时(...不是说你需要这样做,因为浏览器支持很好。但问题是,当你用这种方式混合单位时,必须在浏览器中完成(在 "运行时"),这也是calc()大部分值。 下面是其他一些混合单位例子。

64810

转场动画一

在 WeGame PC 端官首页,有着非常多制作精良基于滚动动画效果。 这里简单截取其中 2 个比较有意思转场动画,大家感受感受。...是不是挺有意思,整个动画衔接是基于滚轮滚动触发猜测是使用了类似 TweenMaxJS 动画库实现。...当然,这两处酷炫有意思转场动画,基于最新 CSS @scroll-timeline 规范,也是可以大致实现。本文就将尝试使用纯 CSS,模拟上述两个转场动画。...这里,要实现整个动画,有一个非常重要场景,就是能够利用 LOGO 元素,切割背景,只看到 LOGO 背后元素,像是得到一张这样图片: 注意,图片白色部分,不是白色,而是需要透明,能够透出背后元素...最后 本文到此结束,希望对你有帮助 更多精彩 CSS 技术文章汇总在 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

58610
领券