清除浏览器CSS缓存通过javascript调整大小
问题描述：
我只是想知道，如果可以通过任何方式清除CSS缓存，每次浏览器调整大小而不重新加载页面？清除浏览器CSS缓存通过javascript调整大小
我问这个问题的原因是因为我有一个响应式页面。 因此，在表格视图中，我的导航菜单变为汉堡菜单。如果任何菜单项在导航菜单中展开，那么在浏览器上重新调整大小到桌面视图时，它似乎有时会从平板电脑视图显示CSS缓存。
发生这种情况，尽管使用媒体查询。 如何清除css缓存而不重新加载浏览器调整页面的页面？
在此先感谢！
编辑CSS：
.global-header *,
.global-header *:after,
.global-header *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.burger,
.search,
.profile {
padding: 0;
border: 0;
outline: 0;
cursor: pointer
}
.burger {
margin: 0 33px 0 25px
}
.global-header {
position: fixed;
z-index: 9999;
width: 100%;
background-color: #1a205a;
height: 64px;
color: #fff;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-font-smoothing: antialiased;
border-bottom: 1px solid #f2f2f2
}
.burger {
-webkit-box-ordinal-group: 0;
-moz-box-ordinal-group: 0;
-ms-flex-order: 0;
-webkit-order: 0;
order: 0;
background: #1a1f5a
}
.burger-menu,
.burger-menu::before,
.burger-menu::after {
display: block;
width: 16px;
height: 2px;
background: #fff
}
.burger[aria-expanded="true"] .burger-menu::before,
.burger[aria-expanded="true"] .burger-menu::after {
display: block;
width: 20px;
height: 2px;
background: #fff;
margin-left: -2px
}
.burger-menu {
margin: 0 auto;
position: relative
}
.burger-menu::before,
.burger-menu::after {
position: absolute;
content: "";
-webkit-transition: all .25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all .25s cubic-bezier(0.175, 0.885, 0.32, 1.275)
}
.burger-menu::before {
top: 7px
}
.burger-menu::after {
bottom: 7px
}
.burger[aria-expanded="true"] .burger-menu {
background: transparent
}
.burger[aria-expanded="true"] .burger-menu::after {
bottom: 0
}
.burger[aria-expanded="true"] .burger-menu::before {
top: 0
}
.search[aria-expanded="true"] ~ .burger,
.search[aria-expanded="true"] ~ .logo {
display: none
}
.nav-menubar {
margin-left: 23px
}
.global-header .nav {
display: none;
position: fixed;
top: 64px;
left: 0;
padding-top: 20px;
padding-bottom: 30px;
height: 488px;
background: #fff;
overflow-y: scroll;
text-align: left
}
.burger[aria-expanded="true"] ~ .nav {
display: block
}
.groups-links a.group-title.mobile {
text-decoration: none
}
.burger[aria-expanded="true"] .burger-menu::before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg)
}
.burger[aria-expanded="true"] .burger-menu::after {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg)
}
.burger-menu {
-webkit-animation: bounce .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation: bounce .3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
}
.hiding-div .hide-in-mobile {
display: none
}
.hiding-div .hide-in-mobile.hide-in-tablet {
display: none
}
.hiding-div .hide-in-mobile.hide-in-desktop {
display: none
}
.hiding-div .hide-in-tablet.hide-in-desktop {
display: block
}
.hiding-div .hide-in-tablet,
.hide-in-desktop {
display: block
}
.hiding-div .hide-in-mobile.hide-in-tablet.hide-in-desktop {
display: none
}
.nav-overlay {
display: block;
opacity: 0;
visibility: hidden;
position: fixed;
z-index: 999;
background: rgba(0, 0, 0, .5);
width: 100%;
height: 100%;
-webkit-transition: opacity .1s linear;
transition: opacity .1s linear
}
.nav-center {
display: block
}
.nav-center a.main-link {
float: none
}
.main-link.nav-weather {
text-align: right;
margin-top: 40px;
font-size: 22px
}
.navMenu::-webkit-scrollbar {
-webkit-appearance: none
}
.navMenu::-webkit-scrollbar:vertical {
height: 19.51%!important;
width: 1.25%
}
.navMenu::-webkit-scrollbar-thumb {
background-color: #0a68c2
}
.navMenu::-webkit-scrollbar-track {
height: 84.36%;
width: 1.56%;
background-color: #fff
}
@media only screen and (max-width: 767px) {
.global-header .nav {
display: none;
position: fixed;
top: 64px;
left: 0;
padding-top: 20px;
padding-bottom: 30px;
height: 488px;
width: 100%!important;
background: #fff;
overflow-y: scroll;
text-align: left
}
}
@media only screen and (min-width: 768px) {
.burger {
margin: 0 25px 5px 25px
}
.fade-overlay .nav-overlay {
opacity: 1;
visibility: visible
}
.global-header .nav {
display: none;
position: fixed;
top: 64px;
left: 0;
padding-top: 20px;
padding-bottom: 30px;
height: 960px;
width: 42.45%;
background: #fff;
overflow-y: scroll;
text-align: left
}
.hiding-div .hide-in-mobile,
.hiding-div .hide-in-desktop {
display: block
}
.hiding-div .hide-in-mobile.hide-in-tablet {
display: none
}
.hiding-div .hide-in-mobile.hide-in-desktop {
display: block
}
.hiding-div .hide-in-tablet.hide-in-desktop {
display: none
}
.hiding-div .hide-in-tablet {
display: none
}
}
@media(max-width:1319px) {
.main-link {
display: none;
line-height: 33px;
font-size: 13px;
font-weight: 600;
font-family: "Myriad W01 Lt", Arial, sans-serif;
margin-left: 27px;
margin-right: 32px;
padding: 0
}
.main-link.mobile {
display: block;
color: #003ea9;
list-style: none
}
.childMenu,
.subChildMenu {
list-style: none;
padding: 0
}
.childMenu {
margin-top: -5px;
margin-bottom: -15px
}
.childMenu li a,
.childMenu li span.pageTitle,
.subChildMenu li a {
display: inline-block;
line-height: 42px;
font-size: 13px;
font-weight: 300;
font-family: "Myriad W01 Lt", Arial, sans-serif;
margin-right: 32px;
padding: 0
}
.childMenu li a,
.childMenu li span.pageTitle {
margin-left: 27px
}
.subChildMenu li a {
margin-left: 46px
}
.viewMobile {
margin-bottom: 21px
}
.downIcon,
.upIcon {
color: #adadad;
float: right;
margin-top: 10px
}
.childIconDown,
.childIconUp {
color: #adadad;
font-size: .55em;
float: right;
margin-top: 15px;
margin-right: 32px
}
.group-links {
display: none
}
.group-title[aria-expanded="true"]+.group-links {
display: block
}
.prev-link {
position: relative;
display: flex;
align-items: flex-end;
line-height: 80px;
height: 112px;
padding-left: 70px;
font-size: 28px;
color: #999
}
.group-title {
display: block;
color: #013ea9;
border-top: 1px solid #e3e3e3;
font-size: 20px;
line-height: 66px;
margin: 0 45px 0 40px
}
.farm-links .groups-links:nth-child(2) .group-title {
border-top: 0
}
.navMenu::scrollbar element {
width: 50px
}
.group-links {
padding: 0;
list-style: none
}
.group-links a {
padding-left: 92px;
line-height: 34px;
display: block
}
.farm-links {
display: none
}
.navMenu::-webkit-scrollbar {
-webkit-appearance: none
}
.navMenu::-webkit-scrollbar:vertical {
height: 19.51%!important;
width: 1.25%
}
.navMenu::-webkit-scrollbar-thumb {
background-color: #0a68c2
}
.navMenu::-webkit-scrollbar-track {
height: 84.36%;
width: 1.56%;
background-color: #fff
}
.burger:hover {
cursor: pointer;
height: 50px
}
.global-header .nav {
display: none;
position: fixed;
top: 64px;
left: 0;
padding-top: 20px;
padding-bottom: 30px;
height: 530px;
width: 33%;
background: #fff;
overflow-y: scroll;
text-align: left
}
}
@media only screen and (min-width: 1080px) {
.global-header {
padding-left: 35px
}
.hiding-div .hide-in-mobile,
.hiding-div .hide-in-tablet {
display: inline-block
}
.hiding-div .hide-in-mobile.hide-in-tablet {
display: inline-block
}
.hiding-div .hide-in-mobile.hide-in-desktop {
display: none
}
.hiding-div .hide-in-tablet.hide-in-desktop {
display: none
}
.hiding-div .hide-in-desktop {
display: none
}
.hiding-div .second-link.hide-in-mobile,
.hiding-div .second-link.hide-in-tablet {
display: list-item
}
.hiding-div .second-link.hide-in-mobile.hide-in-tablet {
display: list-item
}
.group-title.mobile {
display: none
}
.farm-links {
width: 100vw;
padding: 23px 32px;
position: absolute;
top: 63px;
left: -53.4%;
text-align: left;
background: #fafafa;
border-top: 1px solid rgba(153, 153, 153, .2)
}
.farm-links,
.profile-flyout,
.search-results {
z-index: 1000
}
.prev-link {
display: none
}
.groups-links {
display: inline-block;
vertical-align: top;
text-align: left;
width: 24.7%
}
.group-title {
line-height: 34px;
display: block;
color: #5c5c5c!important;
text-transform: uppercase;
padding-bottom: 3px
}
.group-links {
list-style: none;
padding: 0;
margin-bottom: 57px
}
}
@media only screen and (min-width: 1320px) {
.burger {
display: none
}
.global-header {
width: 1320px;
margin-left: calc((100% - 1320px)/2);
margin-right: calc((100% - 1320px)/2)
}
.farm-links {
position: fixed;
left: 0
}
.footer-wrapper {
max-width: 1320px!important
}
#toTop {
right: 0!important;
bottom: 0!important
}
.nav-center {
display: inline-block
}
.nav-center a.main-link {
float: left
}
.main-link.mobile {
display: none
}
.global-header .nav {
overflow: visible;
display: block;
position: relative;
line-height: 10px;
text-align: left;
height: 100%;
width: 53%;
margin-left: -20px;
padding: 0;
background: #1a205a;
top: 0
}
}
答
您可以使用@media的屏幕。
例如@media screen and (min-width: 768px) and (max-width: 1024px) {
//you css
}
注
：如果您有位置absolutefixed浏览器马努元素可能没有管理/与重绘计算。您必须查看代码。 在css中切换您的块并查看重绘您的浏览器。
没有像CSS缓存这样的事情。只有正常的客户端资源浏览器缓存。更可能的是您的媒体查询设置不正确。发布您的代码。 –
页面没有CSS缓存，只有错误的CSS使用。 – Amit
我已经添加了CSS代码。我的导航菜单样式是'.nav'和'.global-header'。 PLease忽略不相关的样式。我不确定，什么可能会导致问题，因此我包括了一切。 – Sunny