css.hero{height:100vh;}.hero__thumb{flex:00550px;width:550px;}杩欓噷鏈夊嚑绉嶈В鍐宠繖绫婚棶棰樼殑鍔炴硶锛氫妇渚嬭鏄庤缃竴涓浐瀹氱殑灏哄锛堝搴﹀拰楂樺害锛夎€屼笉鍙槸瀹藉害锛岀己灏戦珮搴︿細缁х画鍑虹幇杩欎釜闂銆傞珮搴︼細浠呭綋瑙嗗彛楂樺害澶т簬700鍍忕礌鏃朵负100vh锛堝獟浣撴煡璇㈠€煎彲鑳藉洜涓婁笅鏂囪€屽紓锛夈€傛垜浠彲浠ュ皢涓よ€呯粨鍚堣捣鏉ヤ互鑾峰緱鏇村己澶х殑瑙ｅ喅鏂规銆?hero__thumb{瀹藉害锛?00px锛涢珮搴︼細300px锛涢€傚悎瀵硅薄锛氬寘鍚紱/*涓轰簡閬垮厤鍘嬬缉鍥惧儚*/}@media(min-height:700px){.hero{height:100vh;濂界殑锛岀幇鍦ㄦ垜浠悓鎰忎娇鐢ㄥ瀭鐩村獟浣撴煡璇㈡洿濂姐€備絾鏄紝浣跨敤100vh鏄湁椋庨櫓鐨勶紝鍥犱负鍗充娇鎴戜滑闄愬埗鎻掑浘鐨勫ぇ灏忥紝鎴戜滑涔熷彲鑳芥棤娉曞鏂囨湰鍐呭鍋氬悓鏍风殑浜嬫儏銆傚鏋滄枃鏈唴瀹瑰彉闀匡紝鍚屾牱鐨勯棶棰樺張浼氬嚭鐜帮紝瑙佷笅鍥撅細涓轰簡瑙ｅ喅杩欎釜闂锛屾垜浠彲浠ヤ娇鐢╩in-height浠ｆ浛height銆傝繖鏍凤紝濡傛灉鍐呭鍙橀暱锛岄珮搴﹀皢鎵╁ぇ鑰屼笉鏄噸鍙犮€侤media(鏈€灏忛珮搴?700px){.hero{鏈€灏忛珮搴?100vh;}}FixedHeader鍦ㄦ粴鍔ㄦ椂鍥哄畾鏍囬骞朵笉鏄潖浜嬶紝浣嗘槸锛屾垜浠纭繚鍙湁鍦ㄥ瀭鐩寸┖闂磋冻澶熷ソ鏃舵墠鍥哄畾鏍囬锛岃繖鏍蜂綋楠屼細鏇村ソ銆傝繖鏄竴涓叧浜庨鏅殑缃戠珯銆傝繖閲屾垜浠彲浠ョ湅鍒帮紝褰撻珮搴﹀お灏忕殑鏃跺€欙紝鍥哄畾楂樺害浼氭暣浣撳崰鐢ㄥ緢澶х殑绌洪棿銆傝繖瀵圭敤鎴锋潵璇寸湡鐨勫緢閲嶈鍚楋紵鍦ㄥぇ澶氭暟鎯呭喌涓嬭繖骞朵笉閲嶈锛屽洜涓烘櫘閫氱敤鎴蜂笉浼氱缉灏忔潵鏌ョ湅杩欐牱鐨勭綉绔欍€傜洰鍓嶏紝濡傛灉鎴戜滑瑕佷紭鍖栵紝涔熸槸鍙互鐨勩€傛€濊矾鏄€氳繃鍨傜洿濯掍綋鏌ヨ鍒ゆ柇楂樺害灏忎簬涓€瀹氶珮搴︽椂锛屽皢鍥哄畾瀹氫綅鏀逛负闈欐€佸畾浣嶃€侤media(min-height:700px){.site-header{/*position:fixedorposition:sticky*/}}闅愯棌涓嶅お閲嶈鐨勫厓绱犳垜鍦═witter.com鐨勫鑸爮涓婃敞鎰忓埌浜嗚繖绉嶆ā寮忋€傝繖涓兂娉曟槸灏嗗瀭鐩村獟浣撴煡璇笌Priority+妯″紡缁撳悎璧锋潵銆傚綋瑙嗗彛楂樺害璋冩暣澶у皬鏃讹紝涓嶅お閲嶈鐨勫厓绱狅紙涔︾鍜屽垪琛級琚垹闄ゅ苟闄勫姞鍒扳€滄洿澶氣€濊彍鍗曪紝杩欐槸鍨傜洿濯掍綋鏌ヨ鐨勪竴涓緢濂界殑鐢ㄤ緥銆?nav__item--secondary{display:none;}@media(min-height:700px){.nav__item--secondary{display:block;}}reducespacing-nav濡傛灉鎴戜滑鐨勭綉绔欐湁sidebar鎴栬€呬晶杈规爮锛屽綋瑙嗗彛楂樺害杈冨皬鐨勬椂鍊欙紝鎴戜滑鍙互鍑忓皯涓€浜沶avigationitem涔嬮棿鐨勫瀭鐩撮棿璺濓紝杩欐牱涔熸彁鍗囦簡鏁翠綋鐨勮璁℃劅銆?nav__item{padding-top:4px;padding-bottom:4px;}@media(min-height:700px){.nav__item{padding-top:10px;濉厖搴曢儴锛?0px锛泒}Modalbox鎴戜滑鐭ラ亾锛宮odStateboxes鑷冲皯搴旇姘村钩灞呬腑銆備絾鏄紝鏈夋椂鎴戜滑闇€瑕佸瀭鐩村眳涓紝鎴戜滑涓€鑸噰鐢ㄥ涓嬫柟妗堬細.modal__body{position:absolute;宸︼細50%锛涢《閮細50%锛涜浆鎹細缈昏瘧锛?50%锛?50%锛夛紱width:500px;}浣嗘槸锛屽綋鍐呭鍙橀暱鏃朵細鍑虹幇闂锛屾ā鎬佹浼氬瀭鐩村～婊″睆骞曪紝鐢ㄦ埛灏嗘棤娉曟粴鍔ㄥ畠銆傝繖绉嶆儏鍐垫湁鍑犱釜鍘熷洜锛氭ā鎬佹娌℃湁楂樺害锛屾ā鎬佸瀭鐩村眳涓紙杩欐牱浼氬鑷撮棶棰樻洿蹇嚭鐜帮級涓嬮潰鏄浐瀹氱殑css:.modal__body{position:absolute;宸︼細50%锛涢《閮細3rem锛涜浆鎹細translateX(-50%)锛涘搴︼細500px锛涙渶灏忛珮搴︼細200px锛涙渶澶ч珮搴︼細500px锛沷verflow-y:auto;}@media(min-height:700px){.modal__body{top:50%;杞崲锛氱炕璇戯紙-50%锛?50%锛夛紱璇锋敞鎰忥紝鎴戜娇鐢ㄤ簡鏈€灏忛珮搴﹀拰鏈€澶ч珮搴︺€俶in-height鏄负浜嗚妯℃€佸嵆浣垮唴瀹瑰緢鐭篃鑳藉ソ鐪嬶紝max-height鏄敤鐗瑰畾鐨勫€兼潵闄愬埗瀹冪殑楂樺害锛岃€屼笉鏄坊鍔犱竴涓浐瀹氱殑楂樺害銆傛€荤粨鍦ㄨ璁′綋楠屾椂锛屾渶濂借€冭檻瀹藉害鍜岄珮搴︺€傚瀭鐩磋皟鏁存祻瑙堝櫒澶у皬鍙兘鏈夌偣濂囨€紝浣嗗畠鏈夊叾浼樼偣銆傚湪杩欑瘒鏂囩珷涓紝鎴戜滑璁ㄨ浜嗗瀭鐩存祴璇曠殑閲嶈鎬э紝浠ュ強鎴戜滑鏄浣曞仛鐨勶紝鏈€鍚庢彁鍑轰簡涓€浜涚ず渚嬪拰鐢ㄤ緥锛屽笇鏈涘鏅虹背鏈夌敤銆備唬鐮侀儴缃插悗鍙兘瀛樺湪鐨刡ug锛屾棤娉曞疄鏃惰幏鐭ャ€備簨鍚庝负浜嗚В鍐宠繖浜沚ug锛岃姳璐逛簡澶ч噺鐨勬椂闂村湪鏃ュ織璋冭瘯涓娿€傞『渚挎帹鑽愪竴涓ソ鐢ㄧ殑bug鐩戞帶宸ュ叿Fundebug銆傚師鏂囷細https://hadeed.com/article/re...姣忓懆鏇存柊浜ゆ祦鏂囩珷銆傚彲浠ュ井淇℃悳绱⑩€滃ぇ鍗冧笘鐣屸€濈珛鍗抽槄璇绘洿鏂帮紙姣斿崥瀹㈡棭涓€涓ょ瘒锛夛紝杩欑瘒鏂囩珷GitHubhttps://github.com/qq449245884/xiaozhi宸茬粡鏀跺綍锛岃繕鏈夋垜鐨勫緢澶氭枃妗ｅ凡缁忔暣鐞嗗ソ浜嗐€傛杩庢槑鏄熷拰瀹岀編銆傚彲浠ュ弬鑰冭€冪偣闈㈣瘯銆傚彟澶栧叧娉ㄥ叕浼楀彿锛屽悗鍙板洖澶嶇鍒╁氨鍙互鐪嬪埌绂忓埄浜嗐€備綘鐭ラ亾銆?/p>