{"id":232591,"date":"2021-12-30T10:45:16","date_gmt":"2021-12-30T02:45:16","guid":{"rendered":"https:\/\/lrxjmw.cn\/?p=232591"},"modified":"2021-12-19T19:46:52","modified_gmt":"2021-12-19T11:46:52","slug":"css-when-else","status":"publish","type":"post","link":"https:\/\/lrxjmw.cn\/css-when-else.html","title":{"rendered":"\u5728CSS\u4e2d\u5982\u4f55\u4f7f\u7528 when\/else"},"content":{"rendered":"<table>\n<tbody>\n<tr>\n<td style=\"padding: 5px 12px; width: 25px; font-size: 22px; text-align: center; background: #E8E8E8; line-height: 30px; color: #999;\">\u5bfc\u8bfb<\/td>\n<td style=\"padding: 10px 10px 12px; line-height: 20px;\"><strong>\u5927\u5bb6\u90fd\u77e5\u9053CSS\u5df2\u7ecf\u6709@media\u3001@support \u67e5\u8be2\u5f62\u5f0f\u7684\u6761\u4ef6\uff0c\u53ef\u4ee5\u975e\u5e38\u7075\u6d3b\u5730\u9009\u62e9\u5bf9\u5e94\u7684\u6837\u5f0f\uff0c\u7136\u800c\u8fd8\u6709\u4e00\u4e2a\u65b0\u7684\u63d0\u8bae\u53eb\u505a when\/else\uff0c\u8fd9\u8bed\u6cd5\u4f3c\u4e4e\u770b\u8d77\u6765\u66f4\u52a0\u660e\u4e86\u65b9\u4fbf\u3002<\/strong><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lrxjmw.cn\/wp-content\/uploads\/2018\/12\/css.png\" alt=\"\" width=\"700\" height=\"150\" class=\"alignnone size-full wp-image-130972\" srcset=\"https:\/\/lrxjmw.cn\/wp-content\/uploads\/2018\/12\/css.png 700w, https:\/\/lrxjmw.cn\/wp-content\/uploads\/2018\/12\/css-300x64.png 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>\u5728\u8fd9\u7bc7\u6587\u7ae0\u5b8c\u7a3f\u524d\uff0cwhen[1] \u7684\u63d0\u8bae\u5df2\u7ecf\u88ab CSSWG \u901a\u8fc7\u4e86\uff0c\u800c else[2] \u662f\u4e00\u4e2a\u5355\u72ec\u7684\u63d0\u6848\uff0c\u76ee\u524d\u662f\u4e00\u4e2a4\u7ea7\u89c4\u8303<\/p>\n<p>\u8ba9\u6211\u4eec\u6765\u770b\u770b when\/else \u662f\u5982\u4f55\u4f7f\u7528\u7684\u5427<\/p>\n<div   id="j6sjwn9j3u"    style=\"font-size: 14pt; color: white; background-color: black; border-left: red 10px solid; padding-left: 14px; margin-bottom: 20px; margin-top: 20px;\"><strong>when\/else \u8bed\u6cd5<\/strong><\/div>\n<p>\u5148\u6765\u770b\u770b\u4e3a\u4e86\u5b9e\u73b0\u9875\u9762\u54cd\u5e94\u5f0f\u662f\u5982\u4f55\u505a\u7684\uff0c\u8fd9\u5c31\u8981\u7528\u5230 CSS\u5a92\u4f53\u67e5\u8be2<\/p>\n<pre>@media (min-width: 800px) {  \r\n  \/* \u5bbd\u5ea6\u5927\u4e8e800px\u65f6\u7684\u6837\u5f0f *\/  \r\n}  \r\n@media (max-width: 799px) { \r\n  \/* \u5bbd\u5ea6\u5c0f\u4e8e799px\u65f6\u7684\u6837\u5f0f *\/  \r\n} <\/pre>\n<p>\u800c\u6362\u6210 when\/else \u540e\u5462\uff1f<\/p>\n<pre>@when media(min-width: 800px) {  \r\n  \/* \u5bbd\u5ea6\u5927\u4e8e800px\u65f6\u7684\u6837\u5f0f *\/  \r\n}  \r\n@else {  \r\n  \/* \u5bbd\u5ea6\u4e0d\u5927\u4e8e800px\u65f6\u7684\u6837\u5f0f *\/  \r\n} <\/pre>\n<p>\u8bed\u4e49\u4e0a\u6bd4 @media \u66f4\u52a0\u597d\u4e86<\/p>\n<p>when\/else \u751a\u81f3\u8fd8\u80fd\u652f\u6301\u591a\u6761\u4ef6\u5224\u65ad\uff0c\u8ddf\u5199 if\/else \u4f3c\u7684<\/p>\n<pre>@when media(min-width: 800px) {  \r\n  \/* \u5bbd\u5ea6\u5927\u4e8e800px\u65f6\u7684\u6837\u5f0f *\/  \r\n}  \r\n@else media(min-width: 600px) {  \r\n  \/* \u5bbd\u5ea6\u5927\u4e8e600px\u4f46\u4e0d\u5927\u4e8e800px\u65f6\u7684\u6837\u5f0f *\/  \r\n}  \r\n@else {  \r\n  \/* \u5bbd\u5ea6\u4e0d\u5927\u4e8e600px\u65f6\u7684\u6837\u5f0f *\/  \r\n} <\/pre>\n<div   id="j6sjwn9j3u"    style=\"font-size: 14pt; color: white; background-color: black; border-left: red 10px solid; padding-left: 14px; margin-bottom: 20px; margin-top: 20px;\"><strong>\u66f4\u591a\u7528\u6cd5<\/strong><\/div>\n<p>\u4e00\u8d77\u6765\u770b\u770b when\/else \u6709\u54ea\u4e9b\u4e0d\u9519\u7684\u7528\u6cd5~<\/p>\n<div   id="j6sjwn9j3u"    style=\"margin-top:2em;margin-bottom:1em\"><span style=\"color:#1E1E1E;letter-spacing: 2px;border-left:#FF3030 3px solid;border-right:#FF3030 3px solid;padding-left: 8px;padding-right:8px;font-size: 12pt\"><strong>\u7ec4\u5408\u4f7f\u7528<\/strong><\/span><\/div>\n<p>\u518d\u6765\u4e3e\u4e00\u4e2a @media \u548c @support \u5171\u7528\u7684\u4f8b\u5b50<\/p>\n<pre>@media (min-width: 800px) {  \r\n    @supports (display: flex) {  \r\n        .flex {  \r\n            flex-direction: column;  \r\n        }  \r\n    }  \r\n} <\/pre>\n<p>\u8fd9\u6bb5\u4ee3\u7801\u7684\u610f\u601d\u662f\u5f53\u9875\u9762\u5bbd\u5ea6\u5927\u4e8e 800px \u5e76\u4e14\u6d4f\u89c8\u5668\u652f\u6301 display: flex \u8bed\u6cd5\u65f6\uff0c\u7ed9\u7c7b\u540d\u4e3a flex \u7684\u5143\u7d20\u8bbe\u7f6e flex-direction: column \u7684\u6837\u5f0f<\/p>\n<p>\u5176\u5b9e\u4e0d\u96be\u7406\u89e3\uff0c\u4f46\u8981\u662f\u6362\u6210 when\/else \u7684\u8bed\u6cd5\u4f1a\u662f\u5565\u6837\u5462\uff1f<\/p>\n<pre>@when media(min-width: 800px) and supports(display: flex) {  \r\n    .flex {  \r\n        flex-direction: column;  \r\n    } \r\n }  <\/pre>\n<div   id="j6sjwn9j3u"    style=\"margin-top:2em;margin-bottom:1em\"><span style=\"color:#1E1E1E;letter-spacing: 2px;border-left:#FF3030 3px solid;border-right:#FF3030 3px solid;padding-left: 8px;padding-right:8px;font-size: 12pt\"><strong>\u5185\u8054\u4f7f\u7528<\/strong><\/span><\/div>\n<p>@when \u4e5f\u53ef\u4ee5\u5185\u8054\u5728CSS\u6837\u5f0f\u4e2d\u4f7f\u7528\uff0c\u4f8b\u5982\uff1a<\/p>\n<pre>button {  \r\n  padding: 2rem;  \r\n  @when element(max-width: 400px) {  \r\n    padding: 1rem;  \r\n  }  \r\n} <\/pre>\n<div   id="j6sjwn9j3u"    style=\"margin-top:2em;margin-bottom:1em\"><span style=\"color:#1E1E1E;letter-spacing: 2px;border-left:#FF3030 3px solid;border-right:#FF3030 3px solid;padding-left: 8px;padding-right:8px;font-size: 12pt\"><strong>\u65b0\u7684\u5a92\u4f53\u67e5\u8be2\u5199\u6cd5<\/strong><\/span><\/div>\n<p>\u6211\u5728\u521d\u5b66 @media \u8fd9\u4e2a\u8bed\u6cd5\u65f6\u4e5f\u89c9\u5f97\u6709\u4e9b\u62d7\u53e3\uff0cmin-width \u548c max-width \u8fd8\u662f\u9700\u8981\u7a0d\u5fae\u601d\u8003\u4e00\u4e0b\u624d\u77e5\u9053\u662f\u4ec0\u4e48\u610f\u601d\uff0c\u7136\u540e\u6709\u4e00\u4e2a\u6709\u610f\u601d\u7684\u5a92\u4f53\u67e5\u8be2\u5199\u6cd5\u4e5f\u60f3\u5728\u8fd9\u91cc\u63d0\u4e00\u4e0b\uff0c\u5b83\u7684\u8bed\u6cd5\u611f\u89c9\u633a\u6709\u610f\u601d\u7684\uff0c\u800c\u4e14\u7279\u522b\u6613\u61c2\uff0c\u5199\u6cd5\u5982\u4e0b\uff1a<\/p>\n<pre>@media (width <= 800px) {  \r\n  \/* \u9875\u9762\u5bbd\u5ea6\u5c0f\u4e8e\u7b49\u4e8e800px\u65f6\u7684\u6837\u5f0f *\/  \r\n} <\/pre>\n<p>\u8fd9\u6837\u7684\u8bed\u6cd5\u662f\u4e0d\u662f\u5c31\u7279\u522b\u6e05\u6670\u660e\u4e86\u4e86\uff1f\u4e0d\u8fc7\u53ef\u60dc\u7684\u662f\u5b83\u8fd8\u662f\u4e00\u4e2a4\u7ea7\u89c4\u8303<\/p>\n<div   id="j6sjwn9j3u"    style=\"font-size: 14pt; color: white; background-color: black; border-left: red 10px solid; padding-left: 14px; margin-bottom: 20px; margin-top: 20px;\"><strong>\u603b\u7ed3<\/strong><\/div>\n<p>\u8fd9\u4e9b\u63d0\u6848\u8fdb\u5c55\u5f97\u76f8\u5f53\u5feb\uff0c\u5173\u4e8e\u4f7f\u7528 @if \u8fd8\u662f @when \u7684\u95ee\u9898\u4e5f\u5b58\u5728\u4e00\u4e9b\u4e89\u8bae\uff0c\u6015 @if\u4f1a\u4e0e Sass \u51b2\u7a81\uff0c\u8fd8\u6709\u4e00\u4e2a\u5efa\u8bae\u662f\u7528 @where \u6765\u4ee3\u66ff\u3002\u603b\u4e4b\u4e0d\u7ba1\u53eb\u5565\u540d\u5b57\uff0c\u90fd\u662f\u4e3a\u4e86\u8ba9CSS\u8bed\u6cd5\u66f4\u4e30\u5bcc\uff0c\u671f\u5f85\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5728\u8fd9\u7bc7\u6587\u7ae0\u5b8c\u7a3f\u524d\uff0cwhen[1] \u7684\u63d0\u8bae\u5df2\u7ecf\u88ab CSSWG \u901a\u8fc7\u4e86\uff0c\u800c else[2] \u662f\u4e00\u4e2a\u5355\u72ec\u7684\u63d0\u6848\uff0c\u76ee\u524d [&hellip;]<\/p>\n","protected":false},"author":1920,"featured_media":130972,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[55],"tags":[],"class_list":["post-232591","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-thread"],"acf":[],"_links":{"self":[{"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/posts\/232591","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/users\/1920"}],"replies":[{"embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/comments?post=232591"}],"version-history":[{"count":4,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/posts\/232591\/revisions"}],"predecessor-version":[{"id":232632,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/posts\/232591\/revisions\/232632"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/media\/130972"}],"wp:attachment":[{"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/media?parent=232591"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/categories?post=232591"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/tags?post=232591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}