tcon/docs/.vuepress/dist/assets/js/14.1c21b487.js

简化版 tachyons

(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{196:function(s,t,a){"use strict";a.r(t);var e=a(0),n=Object(e.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"content"},[a("h1",{attrs:{id:"尺寸"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#尺寸","aria-hidden":"true"}},[s._v("#")]),s._v(" 尺寸")]),s._v(" "),a("p",[s._v("尺寸的范围包含：字体大小、宽度、高度、外边距、内边距、上右下左距离(top、right、bottom、left)、层级、圆角。")]),s._v(" "),a("p",[s._v('其中，宽度和高度包含了百分比，边距与距离包含方位"上右下左"，分别为"trbl"。')]),s._v(" "),a("div",{staticClass:"language-stylus extra-class"},[a("pre",{pre:!0,attrs:{class:"language-stylus"}},[a("code",[a("span",{pre:!0,attrs:{class:"token variable-declaration"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("font-size")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("10")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("12")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("13")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("14")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("15")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("16")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("17")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("18")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("20")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("24")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("28")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("32")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("40")])]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token variable-declaration"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("width-size")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("30")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("40")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("50")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("60")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("70")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("80")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("90")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("100")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("200")])]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token variable-declaration"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("height-size")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("30")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("35")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("40")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("45")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("50")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("55")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("60")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("65")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("70")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("80")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("90")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("100")])]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token variable-declaration"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("margin-size")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("5")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("10")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("15")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("20")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("30")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("40")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("45")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("50")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("55")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("60")])]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token variable-declaration"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("padding-size")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("5")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("10")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("15")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("20")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("25")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("30")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("35")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("40")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("45")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("50")])]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token variable-declaration"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("position-size")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("0")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("10")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("20")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("30")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("40")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("50")])]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 宽度百分比")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token variable-declaration"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("width-percent")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("20")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("25")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("33.3333")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("50")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("100")])]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 高度百分比")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token variable-declaration"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("height-percent")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("50")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("100")])]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 方向")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token variable-declaration"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("direction")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n  t"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" top"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n  r"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" right"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" \n  b"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" bottom"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n  l"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" left"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n  tb"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" top bottom"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n  tr"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" top right"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n  lt"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" left top"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n  lr"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" left right"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n  lb"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" left bottom  \n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")])]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 层级，不支持 vw")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token variable-declaration"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("index-size")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("1")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("2")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("3")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("4")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("5")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("6")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("7")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("8")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("9")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("1000")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("1001")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("1002")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("1003")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("9999")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("10000")])]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 圆角，不支持 vw")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token variable-declaration"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("radius-size")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("1")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("2")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("3")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("4")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("5")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("6")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("7")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("8")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("10")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("15")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("20")]),s._v(" ")]),s._v("\n")])])]),a("p",[s._v("例子：")]),s._v(" "),a("ul",[a("li",[s._v("字体，"),a("code",[s._v("f10")]),s._v("，"),a("code",[s._v("f12")]),s._v("，"),a("code",[s._v("vw-f10")]),s._v("，"),a("code",[s._v("vw-f12")])]),s._v(" "),a("li",[s._v("宽度，"),a("code",[s._v("w30")]),s._v("，"),a("code",[s._v("w40")]),s._v("，"),a("code",[s._v("vw-w30")]),s._v("，"),a("code",[s._v("vw-w40")]),s._v(" "),a("ul",[a("li",[s._v("百分比，"),a("code",[s._v("width-20")]),s._v("，"),a("code",[s._v("width-100")]),s._v("，"),a("code",[s._v("height-100")])])])]),s._v(" "),a("li",[s._v("高度，"),a("code",[s._v("h30")]),s._v("，"),a("code",[s._v("h40")]),s._v("，"),a("code",[s._v("vw-h30")]),s._v("，"),a("code",[s._v("vw-h40")]),s._v(" "),a("ul",[a("li",[s._v("百分比，"),a("code",[s._v("height-100")])])])]),s._v(" "),a("li",[s._v("外边距，"),a("code",[s._v("m5")]),s._v("，"),a("code",[s._v("m10")]),s._v("，"),a("code",[s._v("vw-m10")]),s._v("，"),a("code",[s._v("vw-m5")]),s._v(" "),a("ul",[a("li",[s._v("上外边距，"),a("code",[s._v("mt5")]),s._v("，"),a("code",[s._v("vw-mt5")])]),s._v(" "),a("li",[s._v("右外边距，"),a("code",[s._v("mr5")]),s._v("，"),a("code",[s._v("vw-mr5")])]),s._v(" "),a("li",[s._v("下外边距，"),a("code",[s._v("mb5")]),s._v("，"),a("code",[s._v("vw-mb5")])]),s._v(" "),a("li",[s._v("左外边距，"),a("code",[s._v("ml5")]),s._v("，"),a("code",[s._v("vw-ml5")])]),s._v(" "),a("li",[s._v("左右自适应，"),a("code",[s._v("m-auto")])])])]),s._v(" "),a("li",[s._v("内边距，"),a("code",[s._v("p5")]),s._v("，"),a("code",[s._v("p10")]),s._v("，"),a("code",[s._v("p15")]),s._v(" "),a("ul",[a("li",[s._v("上内边距，"),a("code",[s._v("pt5")]),s._v("，"),a("code",[s._v("pt10")]),s._v("，"),a("code",[s._v("vw-pt5")])]),s._v(" "),a("li",[s._v("右内边距，"),a("code",[s._v("pr5")]),s._v("，"),a("code",[s._v("pr10")]),s._v("，"),a("code",[s._v("vw-pt5")])]),s._v(" "),a("li",[s._v("下内边距，"),a("code",[s._v("pb5")]),s._v("，"),a("code",[s._v("pb10")]),s._v("，"),a("code",[s._v("vw-pb10")])]),s._v(" "),a("li",[s._v("左内边距，"),a("code",[s._v("pl5")]),s._v("，"),a("code",[s._v("vw-pb10")])])])]),s._v(" "),a("li",[s._v("距离\n"),a("ul",[a("li",[s._v("上距离，"),a("code",[s._v("t5")]),s._v("，"),a("code",[s._v("t10")]),s._v("，"),a("code",[s._v("vw-t5")])]),s._v(" "),a("li",[s._v("右距离，"),a("code",[s._v("r5")]),s._v("，"),a("code",[s._v("r10")]),s._v("，"),a("code",[s._v("vw-r5")])]),s._v(" "),a("li",[s._v("下距离，"),a("code",[s._v("b5")]),s._v("，"),a("code",[s._v("b10")]),s._v("，"),a("code",[s._v("vw-b5")])]),s._v(" "),a("li",[s._v("左距离，"),a("code",[s._v("l5")]),s._v("，"),a("code",[s._v("l10")]),s._v("，"),a("code",[s._v("vw-l5")])])])]),s._v(" "),a("li",[s._v("层级，"),a("code",[s._v("z1")]),s._v("，"),a("code",[s._v("z999")])]),s._v(" "),a("li",[s._v("圆角，"),a("code",[s._v("br1")]),s._v("，"),a("code",[s._v("br10")])])])])}],!1,null,null,null);n.options.__file="size.md";t.default=n.exports}}]);