{"id":6206,"date":"2022-03-15T14:50:02","date_gmt":"2022-03-15T06:50:02","guid":{"rendered":"http:\/\/jilin.hydesign.tw\/?p=6206"},"modified":"2022-03-22T17:06:06","modified_gmt":"2022-03-22T09:06:06","slug":"css-functions-calc","status":"publish","type":"post","link":"http:\/\/jilin.hydesign.tw\/index.php\/2022\/03\/15\/css-functions-calc\/","title":{"rendered":"\u5c6c\u6027\u503c\u8a08\u7b97 max() &#038; min()"},"content":{"rendered":"\n<p>max() \u3001 min() \u3001 clamp() \u3001 calc() \u70ba CSS function \u5c6c\u6027\u8a2d\u5b9a\uff0c\u9069\u7528\u65bc &lt;length&gt;\u9577\u5ea6\u3001 &lt;frequency&gt;\u983b\u7387\u3001 &lt;angle&gt;\u89d2\u5ea6\u3001 &lt;time&gt;\u6642\u9593\u3001 &lt;number&gt;\u6578\u5b57\u3001&lt;integer&gt;\u6574\u6578\u3002<br><br>\u652f\u63f4\u700f\u89bd\u5668\uff1aIE10+\u3001Firefox4+\u3001Chrome19+\u3001Safari6+<br>\u55ae\u4f4d\uff1apx\u3001em\u3001rem\u3001%<br>\u904b\u7b97\uff1a+ \u2013 * \/<br>+ \u52a0<br>&#8211;  \u6e1b<br>* \u4e58 (\u5fc5\u70ba\u6578\u5b57)<br>\/  \u9664 (\u5fc5\u70ba\u6578\u5b57\uff0c\u4e0d\u53ef\u70ba\u96f6)<br><br>\u4f7f\u7528 + \u548c &#8211; \u6642\uff0c\u524d\u5f8c\u9700\u52a0\u4e0a\u7a7a\u767d\uff0c* \u548c \/ \u53ef\u4ee5\u4e0d\u7528\u52a0\u3002<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">\u261e \u8a9e\u6cd5\u8aaa\u660e<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">max() \u6700\u5927\u5c6c\u6027\u8cea<\/h4>\n\n\n\n<p>\u51fd\u6578\u4ee5\u9017\u865f\u5206\u9694\uff0c\u8a2d\u5b9a\u6700\u5927\u503c<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* css\u7bc4\u4f8b-min-width\u5beb\u6cd5 *\/\ndiv{\n  width:80vw;\n  min-width:200px;\n}\n\n\/* css\u7bc4\u4f8b-max()\u5beb\u6cd5 *\/\ndiv{\n  width:max(80vw, 200px); \/\/\u5bec\u5ea6\u6700\u5c0f\u662f 200px\uff0c\u88dd\u7f6e\u5bec\u5ea6\u5c0f\u65bc200px\u5247\u4f7f\u7528 80vw\n}<\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\">min() \u6700\u5c0f\u5c6c\u6027\u8cea<\/h4>\n\n\n\n<p>\u51fd\u6578\u4ee5\u9017\u865f\u5206\u9694\uff0c\u8a2d\u5b9a\u6700\u5c0f\u503c<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* css\u7bc4\u4f8b-max-width\u5beb\u6cd5 *\/\ndiv{\n  width:80vw;\n  max-width:200px;\n}\n\n\/* css\u7bc4\u4f8b-mix()\u5beb\u6cd5 *\/\ndiv{\n  width:mix(80vw, 200px); \/\/\u5bec\u5ea6\u70ba80vw\uff0c\u88dd\u7f6e\u5bec\u5ea6\u5c0f\u65bc80vw\u5247\u4f7f\u7528200px\n}<\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\">clamp() \u4e2d\u9593\u5c6c\u6027\u8cea<\/h4>\n\n\n\n<p>\u8a2d\u5b9a\u6700\u5927\u503c\u8207\u6700\u5c0f\u503c\u4e4b\u9593\u7684\u7406\u60f3\u503c\uff0c\u53ef\u81ea\u8a02\u7406\u60f3\u503c\u3002<br>clamp() = max(\u6700\u5c0f\u503c, min(val, \u6700\u5927\u503c));<br>clamp(\u6700\u5c0f\u503c, \u81ea\u8a02\u503c, \u6700\u5927\u503c);<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* css\u7bc4\u4f8b-min-width\u8207max-width\u5beb\u6cd5 *\/\ndiv{\n  width: 100%;\n  min-width:200px;\n  max-width:300px;\n}\n\n\/* css\u7bc4\u4f8b-clamp()\u5beb\u6cd5 *\/\ndiv{\n  clamp(200px, 100%, 300px);\n}<\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\">calc() \u5c6c\u6027\u8a08\u7b97<\/h4>\n\n\n\n<p>\u5c6c\u6027\u57f7\u884c\u8a08\u7b97\u51fd\u6578\uff0c\u900f\u904e\u904b\u7b97\u5f0f\u52d5\u614b\u53d6\u5f97\u53c3\u6578\u503c\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* css\u7bc4\u4f8b-\u904b\u7b97\u5f0f *\/\n\/* property: calc(expression) *\/\n\nwidth: calc(10px + 100px);\nwidth: calc(100% - 30px);\nwidth: calc(2em * 5);\nwidth: calc(100% \/ 3);\nwidth: calc(var(--variable-width) + 20px);<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* css\u7bc4\u4f8b-length *\/\nh1 {\n  font-size: calc(1.5rem + 3vw);\n}\n\n\/* css\u7bc4\u4f8b-integer *\/\n.modal {\n  z-index: calc(3 \/ 2);\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* css\u7bc4\u4f8b-\u5b9a\u4f4d*\/\n\n.banner {\n  position: absolute;\n  left: 40px;\n  width: calc(100% - 80px);\n  border: solid black 1px;\n  box-shadow: 1px 2px;\n  background-color: yellow;\n  padding: 6px;\n  text-align: center;\n  box-sizing: border-box;\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* css\u7bc4\u4f8b-\u81ea\u52d5\u8abf\u6574\u8868\u55ae\u81ea\u9069\u61c9\u65bc\u7236\u6846\uff0c\u4e0d\u8d85\u51fa\u7236\u6846\u908a\u7de3*\/\n\ninput {\n  padding: 2px;\n  display: block;\n  width: calc(100% - 1em);\n}\n\n#formbox {\n  width: calc(100% \/ 6);\n  border: 1px solid black;\n  padding: 4px;\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* css\u7bc4\u4f8b-\u8b8a\u6578\u904b\u7528*\/\n\n.foo {\n  --widthA: 100px;\n  --widthB: calc(var(--widthA) \/ 2);\n  --widthC: calc(var(--widthB) \/ 2);\n  width: var(--widthC);\n}\n\n\/* widthC = calc( calc( 100px \/ 2) \/ 2) = 25px *\/<\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">\u261e \u7bc4\u4f8b<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">min()\u8207calc()\u642d\u914d\u4f7f\u7528<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* css\u7bc4\u4f8b-\u6700\u5927\u5bec\u5ea6\u662f80vw - 50px *\/\n:root{\n  --w:min(200px, 80vw);\n}\ndiv {\n  height: 50px;\n  width:calc(var(--w) - 50px);\n}<\/pre>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>max() \u3001 min() \u3001 clamp() \u3001 calc() \u70ba CSS function \u5c6c\u6027\u8a2d\u5b9a\uff0c\u9069\u7528&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,53,12,4],"tags":[],"class_list":["post-6206","post","type-post","status-publish","format-standard","hentry","category-css","category-css-functions","category-front-end","category-notes"],"_links":{"self":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/6206","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/comments?post=6206"}],"version-history":[{"count":67,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/6206\/revisions"}],"predecessor-version":[{"id":7059,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/6206\/revisions\/7059"}],"wp:attachment":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/media?parent=6206"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/categories?post=6206"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/tags?post=6206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}