浏览器上的清除CSS缓存通过javascript调整大小

Question

我只是想知道每次重新调整浏览器时是否可以通过任何方式清除CSS缓存而不重新加载页面？

我问这个的原因是因为我有一个响应式页面。 因此，在表格视图中，我的导航菜单更改为汉堡菜单。如果在导航菜单中展开了任何菜单项，那么在浏览器上再次调整桌面视图时，它似乎有时会从平板电脑视图中显示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
    }
      
}
 

Answer 1

您可以使用@media作为屏幕。

例如

@media screen and (min-width: 768px) and (max-width: 1024px) {
  //you css
}

注意：如果您有位置absolute fixed的manu元素，则浏览器可能无法通过重新绘制进行管理/计算。你必须检查代码。 在css中切换你的块并看到重新绘制你的浏览器。