-2
ページをリロードせずにブラウザのサイズを変更するたびにCSSキャッシュをクリアすることが可能かどうかを知りたいだけですか？ブラウザのCSSキャッシュをクリアするJavaScriptを使ってサイズを変更する
私がこれを求めているのは、応答性の高いページがあるからです。 したがって、テーブルビューでは、ナビゲーションメニューがburgerメニューに変わります。また、メニュー項目のいずれかがナビゲーションメニューで展開されている場合は、再びブラウザのサイズをデスクトップ表示に変更すると、タブレットビューからCSSキャッシュが表示されることがあります。
これは、メディアクエリを使用することの鼓舞されます。 ブラウザのサイズ変更でページを再読み込みせずにCSSキャッシュをクリアするにはどうすればよいですか？
ありがとうございます！あなたは、画面のため@mediaを使用することができ
.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メニューのスタイルは '.nav'と '.global-header'です。関連性のないスタイルは無視してください。私は確信していない、何がおそらく問題を引き起こす可能性があるので、私はすべてを含めた。 – Sunny