馃コ娆㈣繋鎰熷叴瓒ｇ殑鏈嬪弸锛屼竴璧锋潵鍋氱偣鏈夋剰涔夌殑浜嬫儏鍚э紒鎴戝彂璧蜂簡涓€涓瘡鍛ㄧ炕璇戦」鐩€備粨搴撳湴鍧€鍜岃闂湴鍧€杩樺緢缂哄織鍚岄亾鍚堢殑灏忎紮浼淬€傝繖绾补鏄釜浜哄叴瓒ｃ€傚綋鐒讹紝涔熸湁鍔╀簬鎻愰珮鑻辫鍜屽墠绔妧鑳姐€傝姹傦細鑻辫涓嶈兘宸殑绂昏氨锛実ithub绮鹃€氾紝鏈夋瘏鍔涳紝璋﹁櫄锛屽仛浜嬫湁璐ｄ换鎰熴€傛兂鍙備笌鐨勬湅鍙嬪彲浠ョ淇x锛屾垨鑰呯粰浠撳簱鍙慽ssue娑堟伅銆傛垜鐨勫崥瀹㈣繕鏈夊叿浣撶殑涓汉鑱旂郴鏂瑰紡锛歞aodaolee.cn銆傛垜宀崇埗闈炲父鍠滄OliveGarden杩欏搴椼€傜柅鎯呰繃鍚庯紝杩欏搴楁垚浜嗙儹鐐瑰鍗栫殑棣栭€夈€傛嬁璧穒Pad銆佹寫閫夈€佹坊鍔犲埌璐墿杞︺€佷笅璁㈠崟鈥︹€︿竴鍒囬兘寰堥『鍒╋紝鐩村埌鎴戝紑濮嬬粨甯愶細娌℃湁璁㈠崟锛佸お鎭跺績浜嗭紒缁撳笎鎸夐挳浣嶄簬灞忓箷搴曢儴杈圭紭鐨勬涓嬫柟锛屽悜涓婃粴鍔ㄥ彲浠ョ湅鍒板畠銆備絾鏄綋鎴戞斁鎵嬫椂锛屾寜閽細寮瑰洖鍒板睆骞曞鐨勪綅缃紝鎴戞牴鏈棤娉曚笅璁㈠崟銆傚疄鍦ㄤ笉琛岋紝鍙兘鎵撶數璇濈粰浠栦滑浜嗏€︹€︽垜杩樻槸鏈烘櫤鐨勬兂鍑轰簡瑙ｅ喅鍔炴硶锛佹垜鐐瑰嚮浜嗗脊鍑篿Pad閿洏鐨勪紭鎯犲埜浠ｇ爜瀛楁锛岃繖璁╂垜鍙互鐐瑰嚮缁撳笎鎸夐挳銆傛垜寰堝簡骞告垜鐨勫伐浣滅粡甯告秹鍙婃祴璇曠Щ鍔ㄨ澶囷紝鎵€浠ユ垜鐭ラ亾瑙﹀彂铏氭嫙閿洏閫氬父浼氭敼鍙樺竷灞€锛堝嵆浣夸綘涓嶉渶瑕侊級銆傚ぇ澶氭暟浜哄彲鑳藉彧鏄湪缃戜笂鍔炰簨锛屼絾杩欏彲鑳戒細瀵艰嚧鎴愬崈涓婁竾鐨勪汉鍥犱负鈥滃惈绯婁笉娓呪€濈殑缁撹处鎸夐挳鑰屾棤娉曚粯娆俱€傝鎴戜滑鏉ョ湅鐪嬪彂鐢熻繖绉嶆儏鍐电殑鍘熷洜锛岀劧鍚庣寽鐚淥liveGarden鍙兘涓烘浠樺嚭浜嗗灏戜唬浠枫€備粈涔堟椂鍊?00vh涓嶆槸瑙嗗彛楂樺害鐨?00%锛熸病鏈夋煡鐪嬩唬鐮侊紝鎴戠殑鍚屼簨TylerSticka绔嬪嵆鍙戠幇浜嗛棶棰橈細瑙嗗彛楂樺害鍗曚綅鍦ㄨЕ鎽歌澶囦笂寰堟鎵嬶紝鍥犱负娴忚鍣╟hrome缁忓父闅忕潃鐢ㄦ埛婊氬姩鑰屾敼鍙樸€侼icolasHoizey鏃╁湪2015骞村氨鍦∕obileSafari涓娆℃敞鎰忓埌浜嗚繖涓棶棰樸€備粬鍚慉pple鍜學ebkit鎻愪氦浜嗕竴涓敊璇紝鍗磋鍛婄煡璇ヨ涓烘槸鏁呮剰鐨勶紒2016骞?2鏈堬紝Chrome鏇存敼浜嗗叾琛屼负浠ヤ笌Safari淇濇寔涓€鑷达細浠ヨ鍙ｅ崟浣嶅畾涔夌殑鍊硷紙鍗硋h锛夊湪鏄剧ず鎴栭殣钘廢RL鏍忔椂涓嶄細璋冩暣澶у皬銆傜浉鍙嶏紝vh鍗曚綅灏嗚皟鏁翠负瑙嗗彛楂樺害锛屽氨鍍廢RL鏍忓缁堥殣钘忎竴鏍枫€備篃灏辨槸璇达紝vh鍗曚綅灏嗚皟鏁翠负鈥滄渶澶у彲鑳界殑瑙嗗彛鈥濄€傝繖鎰忓懗鐫€100vh灏嗗ぇ浜庢樉绀篣RL鏍忔椂鐨勫彲瑙侀珮搴︺€傞偅涔堬紝璁╂垜浠湅鐪婳liveGarden鐨勪唬鐮侊紝鐪嬬湅Tyler鏈€鍒濈殑鐩磋鏄惁姝ｇ‘銆傚寘鍚喘鐗╄溅鐨刣iv澹版槑楂樺害涓猴細height:calc(100vh);鎴戜笉鏄庣櫧涓轰粈涔坈alc()琚?00vh宓屽锛屽嵆浣跨粨鏋滄槸涓€鏍风殑銆傝喘鐗╄溅鎶藉眽搴斿崰鎹?00%鐨勫瀭鐩村睆骞曠┖闂淬€傚綋鎴戝皾璇曚笅璁㈠崟鏃讹紝Safari鐨勫湴鍧€鏍忓拰閫夐」鍗℃槸鍙鐨勶紝浣嗘槸褰撴祻瑙堝櫒璁＄畻100vh鏃讹紝娴忚鍣╟hrome鐨勯偅浜涢儴鍒嗕笉鍖呮嫭鍦ㄥ唴銆傜粨鏋滄槸璐墿杞︽娊灞夊お楂樻斁涓嶄笅锛岃€屼笖缁撹处鎸夐挳涓嶅湪灞忓箷涓娿€傝瑙ｅ喅姝ら棶棰橈紝鎴戜滑灏嗕娇鐢↙ouisHoebregts鍒涘缓鐨勮В鍐虫柟妗堬紝璇ヨВ鍐虫柟妗堜娇鐢–SS鑷畾涔夊睘鎬у拰JavaScript濮嬬粓涓洪〉闈㈢殑鍙閮ㄥ垎鎵惧埌姝ｇ‘鐨勯珮搴︺€侺ouis鍐欓亾锛氬亣璁炬垜浠殑CSS鑷畾涔夊彉閲忔槸--vh鍦ㄨ繖涓緥瀛愪腑锛屾垜浠彲浠ヨ繖鏍蜂娇鐢ㄥ畠锛?my-element{height:100vh;/*涓嶆敮鎸佽嚜瀹氫箟灞炴€х殑娴忚鍣ㄧ殑鍥為€€*/height:calc(var(--vh,1vh)*100);}鐜板湪璁╂垜浠湪JavaScript涓幏鍙栬鍙ｇ殑鍐呴儴楂樺害锛?/棣栧厛锛屾垜浠幏鍙栬鍙ｉ珮搴︼紝鐒跺悗涔樹互1%寰楀埌浠h涓哄崟浣嶇殑瑙嗗彛鍊糽etvh=window.innerHeight*0.01;//鐒跺悗鎴戜滑灏?-vh鑷畾涔夊睘鎬т腑鐨勫€艰缃负鏂囨。document.documentElement.style鐨勬牴鐩綍銆俿etProperty('--vh',`${vh}px`);鎴戜滑鍛婅瘔JavaScript鑾峰彇瑙嗗彛鐨勯珮搴︼紝鐒跺悗灏嗗叾鍥涜垗浜斿叆涓烘€婚珮搴︾殑1/100锛屽洜姝ゆ垜浠湁涓€涓€间綔涓烘垜浠殑瑙嗗彛楂樺害鍗曚綅鍊笺€傜劧鍚庢垜浠姹侸S鍦?root涓垱寤篊SS鍙橀噺(--vh)銆傚洜姝わ紝鎴戜滑鐜板湪鍙互鍍忎娇鐢ㄤ换浣曞叾浠杤h鍗曚綅涓€鏍蜂娇鐢?-vh浣滀负鎴戜滑鐨勯珮搴﹀€硷紝灏嗗叾涔樹互100锛屽氨寰楀埌浜嗘垜浠兂瑕佺殑瀹屾暣楂樺害銆傛垜寤鸿闃呰Louis鍏充簬CSS鎶€宸х殑瀹屾暣鏂囩珷锛屽叾涓寘鎷棶棰樻弿杩板拰瑙ｅ喅鏂规銆傛垜灏嗘垜鐨刬Pad杩炴帴鍒版垜鐨勭數鑴戝苟浣跨敤Safari鐨刉ebInspector淇敼浜哋liveGarden鐨勮喘鐗╄溅鎶藉眽銆傛垜灏嗛珮搴︽洿鏀逛负calc(var(--vh,1vh)*100);鐒跺悗鍦ㄦ帶鍒跺彴杩愯锛歝onstvh=window.innerHeight*0.01;document.documentElement.style.setProperty('--vh',`${vh}px`);鏁堟灉濡備笅锛氱粨璐︽寜閽€煎灏戦挶锛熻瘯鐫€寮勬竻妤歄liveGarden鐨勭粨璐︽寜閽敊璇彲鑳藉€煎灏戦挶銆侽liveGarden鐢变笂甯傚叕鍙窪ardenRestaurants鎵€鏈夈€傝揪椤挎嫢鏈夊叓涓鍘呭搧鐗岋細OliveGarden銆丩onghornSteakhouse銆丆heddar鈥檚ScratchKitchen銆乊ardHouse銆乀heCapitalGrille銆丼easons52銆丅ahamaBreeze銆丒ddieV's銆傛垜鍦╥Pad涓婂彂鐜颁簡鍏瀛樺湪绫讳技闂鐨勯鍘咃細Dardens鎶ュ憡鎴嚦2021骞?鏈?8鏃ョ殑2021骞寸涓夊搴﹂攢鍞涓?7浜跨編鍏冦€傚湪杩?7浜跨編鍏冧腑锛?.02浜跨編鍏冧笌鍏朵粬涓氬姟鏈夊叧銆傚墿涓嬬殑椁愬巺閿€鍞涓?4.3浜跨編鍏冦€備粬浠繕鍦ㄧ涓夊搴﹁储鎶ョ數璇濅細璁笂鎶ュ憡绉帮紝鈥滄湰瀛ｅ害杩?9%鐨勬€婚攢鍞鏄暟瀛椾氦鏄撱€傗€濊繖鎰忓懗鐫€鍦ㄧ嚎閿€鍞绾︿负2.72浜跨編鍏冦€傚湪浠栦滑鐨勬帹鐗逛笂鎵惧埌浜嗕竴浜涗俊鎭細2021骞磇Pad鍦ㄦ垜浠殑CMS涓婄殑浣跨敤鐜囦技涔庣害涓?.7%銆傝繖娑夊強659涓綉绔欙紝骞冲潎姣忔湀鏈?50涓囧埌400涓囩殑椤甸潰娴忚閲忋€傛垜浠瘡鏈堢害鏈?.86%鐨勭敤鎴蜂娇鐢╥Pad銆傚亣璁炬瘡4鍚峣Pad鐢ㄦ埛涓湁1鍚嶇粡鍘嗚繃缁撹处鎸夐挳娑堝け鐨勭敤鎴烽€氳繃鐢佃瘽涓嬪崟锛屾垜浠幇鍦ㄥ彲浠ユ帹鏂細榛樿绗笁瀛ｅ害閿€鍞锛?,430,000,000缇庡厓涔樹互0.19锛氬湪绾块攢鍞绛変簬绗笁瀛ｅ害鍦ㄧ嚎閿€鍞锛?71,700,000缇庡厓涔樹互.0075锛氭崯澶辩殑浼拌鐧惧垎姣攊Pad鐢ㄦ埛鐩稿綋浜庣害2,032,500缇庡厓锛氭瘡瀛ｅ害鎹熷け鐨勯攢鍞涔樹互鍥涗釜瀛ｅ害锛氫竴骞翠腑鐨?涓搴︾瓑浜?,120,000缇庡厓锛氱敱浜?00vh鐨勬崯澶变慨澶嶈缁撳笎鎸夐挳鐨勬暟閲忓彲鑳戒細澧炲姞杈鹃】鐨勫勾鏀跺叆810涓囩編鍏冿紒鐩稿叧璧勬枡浠峰€?00涓囩編鍏冪殑缈昏瘧椤圭洰鍘熶欢
