涓轰粈涔堣浣跨敤PostCss浼楁墍鍛ㄧ煡锛岃浆鎹x鍗曚綅鐨勬彃浠舵湁寰堝锛屾瘮杈冪煡鍚嶇殑鏈塸ostcss-px-to-viewport鍜宲ostcss-pxtorem锛屽墠鑰呮槸灏唒x杞瑅w锛屽悗鑰呮槸Convertpxtorem锛岀畝鍖栦簡涓嶅父瑙佺殑閰嶇疆銆傚皢鐢ㄤ綔vw浼樺厛绾у崟鍏冿紝rem浣滀负鍚庡妯″紡銆傝€冭檻鍒皏w鍦ㄧЩ鍔ㄨ澶囦笂鐨勬敮鎸佷笉濡俽em锛岃繖涓彃浠跺緢濂界殑瑙ｅ喅浜嗚繖涓棶棰樸€傜劧鍚庣畝鍗曚粙缁嶄竴涓嬨€傚畨瑁呰鏄?npminstall@moohng/postcss-px2vw--save-dev澶嶅埗浠ｇ爜浣跨敤鏂规硶棣栧厛鍒涘缓.postcssrc.js鏂囦欢锛岀劧鍚庨厤缃甿odule.exports={plugins:{'@moohng/postcss-px2vw':{}}}澶嶅埗浠ｇ爜绀轰緥锛氫娇鐢ㄥ墠锛?box{border:1pxsolidblack;搴曢儴杈硅窛锛?px锛涘瓧浣撳ぇ灏忥細20px锛沴ine-height:30px;}澶嶅埗浠ｇ爜浣跨敤鍚庯細.box{border:1pxsolidblack;搴曢儴杈硅窛锛?px锛涘瓧浣撳ぇ灏忥細0.625rem锛涘瓧浣撳ぇ灏忥細6.25vw锛涜楂橈細0.9375rem锛沴ine-height:9.375vw;}澶嶅埗浠ｇ爜閰嶇疆aspectviewportWidth锛氬搴旇璁″浘鐨勫搴︼紝鐢ㄤ簬Computevw銆傞粯璁や负750锛屾寚瀹?鎴杅alse鏃剁鐢╮ootValue锛氭牴瀛椾綋澶у皬锛岀敤浜庤绠梤em銆傞粯璁?5锛屾寚瀹?鎴杅alse鏃剁鐢╱nitPrecision锛氳绠楃粨鏋滅殑绮惧害锛岄粯璁?minPixelValue锛氬皬浜庢垨绛変簬璇ュ€肩殑px鍗曚綅涓嶅鐞嗭紝榛樿1娉ㄦ剰锛氭湰鎻掍欢鍙細杞崲px鍗曚綅銆備竴鑸缓璁皢rootValue璁剧疆涓簐iewportWidth/10鐨勫ぇ灏忥紝灏嗚璁″垎鎴?0绛変唤銆傚洜涓烘祻瑙堝櫒鏈夋渶灏忓瓧浣撻檺鍒讹紝濡傛灉璁剧疆寰楀お灏忥紝椤甸潰鍙兘涓嶅敖濡備汉鎰忋€傚鏋滆浣跨敤rem鍗曚綅锛岄渶瑕侀€氳繃js鍔ㄦ€佽绠楁牴瀛椾綋鐨勫ぇ灏忋€傚鏋滆璁″垎鎴?0绛変唤锛岄偅涔堟牴瀛椾綋鐨勫ぇ灏忓簲璇ユ槸window.innerWidth/10銆傝繖鏍蜂竴涓猵ostCss鎻掍欢閰嶇疆灏卞畬鎴愪簡锛屽笇鏈涙垜鐨勬€荤粨鑳界粰浣犲府鍔﹕ass锛氬父鐢ㄥ蹇樺綍甯哥敤sass绗旇锛屽揩閫熷紑鍙?.鍙橀噺鎵€鏈夊彉閲忎互$$font_size:12px;.container{font-size:$font_size;}澶嶅埗浠ｇ爜濡傛灉鍙橀噺宓屽鍦ㄥ瓧绗︿覆涓紝闇€瑕佸啓鎴?{}$side:left;.rounded{border-#{$side}:1pxsolid#000;}澶嶅埗浠ｇ爜2.宓屽灞傜骇宓屽.container{display:none;.header{width:100%;}}澶嶅埗浠ｇ爜灞炴€у祵濂?娉ㄦ剰border鍚庨潰闇€瑕佸姞涓€涓啋鍙凤細.container{border:{width:1px;}}澶嶅埗浠ｇ爜鍙互閫氳繃&鏉ュ紩鐢ㄧ埗鍏冪礌锛岃繖鍦ㄥ悇绉嶄吉绫讳腑寰堝父鐢ㄣ€俶ixinfocus_style{outline:none;}div{@includefocus_style;}澶嶅埗浠ｇ爜缂栬瘧鐢熸垚div{outline:none;}涔熷彲浠ユ寚瀹氬弬鏁板拰榛樿鍊?/鍙傛暟鍜岄粯璁ゅ€粿mixinthe_height($h:200px){height:$h;}.box_default{@includethe_height;}.box_not_default{@includethe_height(100px);}澶嶅埗浠ｇ爜缂栬瘧鐢熸垚.box_default{height:200px;}.box_not_default{楂樺害锛?00px锛泒4.缁ф壙閫氳繃@extend锛屼竴涓€夋嫨鍣ㄥ彲浠ョ户鎵垮彟涓€涓€夋嫨鍣ㄧ殑鏍峰紡銆傜ず渚嬪涓?/Inherit.class1{float:left;}.class2{@extend.class1;width:200px;}澶嶅埗浠ｇ爜缂栬瘧鐢熸垚.class1,.class2{float:left;}.class2{瀹藉害锛?00px锛泒澶嶅埗浠ｇ爜5.鐩存帴杩涘叆example.container{position:relative;楂樺害锛氾紙200px/2锛夛紱瀹藉害锛?00px+200px锛涘乏锛?0px*2锛泃op:50px-10px;}澶嶅埗浠ｇ爜缂栬瘧鐢熸垚.container{position:relative;楂樺害锛?00px锛涘搴︼細300px锛涘乏锛?00px锛涢《閮細40px锛涘鍒朵唬鐮佹彃鍏ユ枃浠朵娇鐢ˊimport鎻掑叆澶栭儴鏂囦欢@import"outer.scss";澶嶅埗浠ｇ爜涔熷彲浠ユ彃鍏ユ櫘閫歝ss鏂囦欢@import"outer.css";閫氳繃@function澶嶅埗浠ｇ爜鑷畾涔夊嚱鏁帮紝鑷畾涔夊嚱鏁癅functionhigher($h){@return$h*2;}.鈥嬧€媍ontainer{height:higher(100px);}澶嶅埗浠ｇ爜缂栬瘧杈撳嚭銆傚鍣▄楂樺害锛?00px锛泒澶嶅埗浠ｇ爜鍒涘缓缁撹骞朵笉瀹规槗銆傚鏋滃澶у鏈夊府鍔╋紝甯屾湜澶у鍠滄鍜屾敮鎸併€傛湁浠€涔堥棶棰樺彲浠ュ湪璇勮鍖鸿璁吼煒剘濡傛灉瑙夊緱杩欑瘒鏂囩珷瀵逛綘鏈夌敤锛岃缁欐垜浠殑寮€婧愰」鐩偣涓猻tar锛歨ttp://github.crmeb.net/u/defu璋㈣阿浣犲緢鍠滄锛?/p>
