-2
我只是想知道，如果可以通過任何方式清除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
}
}
沒有像CSS緩存這樣的事情。只有正常的客戶端資源瀏覽器緩存。更可能的是您的媒體查詢設置不正確。發佈您的代碼。 –
頁面沒有CSS緩存，只有錯誤的CSS使用。 – Amit
我已經添加了CSS代碼。我的導航菜單樣式是'.nav'和'.global-header'。 PLease忽略不相關的樣式。我不確定，什麼可能會導致問題，因此我包括了一切。 – Sunny