-2
브라우저를 페이지를 다시로드하지 않고 크기를 조정할 때마다 CSS 캐시를 지울 수 있는지 궁금합니다.브라우저에서 CSS 캐시 지우기 javascript를 통해 크기 조정
내가 대답하는 이유는 반응 형 페이지 때문입니다. 그래서 테이블보기에서 내 탐색 메뉴가 burger 메뉴로 바뀝니다. 탐색 메뉴에서 메뉴 항목 중 하나라도 확장 된 경우 브라우저의 크기가 다시 데스크톱보기로 변경되면 태블릿보기에서 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
}
}
s CSS 캐시와 같은 것은 없습니다. 클라이언트 리소스의 일반적인 브라우저 캐시가 있습니다. 미디어 질의가 제대로 설정되지 않았을 가능성이 더 큽니다. 코드를 게시하십시오. –
페이지에 CSS 캐시가없고 잘못된 CSS 만 사용됩니다. – Amit
CSS 코드를 추가했습니다. 내 탐색 메뉴 스타일은 '.nav'및 '.global-header'입니다. 관련성이없는 스타일은 무시하십시오. 확실하지는 않습니다. 문제가 발생할 수있는 부분이 무엇인지 알기 때문에 모든 것을 포함 시켰습니다. – Sunny