馃コ娆㈣繋鎰熷叴瓒ｇ殑灏忎紮浼达紝涓€璧锋潵鍋氱偣鏈夋剰涔夌殑浜嬫儏鍚э紒鏈枃璇戣€咃細Yixu鎴戞帹鍑轰簡涓€涓瘡鍛ㄧ炕璇戦」鐩紝浠撳簱鍦板潃锛岃闂湴鍧€杩樻槸寰堢己蹇楀悓閬撳悎鐨勬湅鍙嬶紝绾睘涓汉鍏磋叮锛屽綋鐒朵篃鏈夊姪浜庢彁楂樿嫳璇拰鍓嶇鎶€鑳斤紝瑕佹眰锛氳嫳璇笉宸璋憋紝鐔熺粌浣跨敤github锛屾湁姣呭姏锛岃唉铏氾紝鍋氫簨鏈夎矗浠诲績銆傛兂鍙備笌鐨勬湅鍙嬪彲浠ョ淇x锛屾垨鑰呯粰浠撳簱鍙慽ssue娑堟伅銆傛垜鐨勫崥瀹㈣繕鏈夊叿浣撶殑涓汉鑱旂郴鏂瑰紡锛歞aodaolee.cn銆備笉鐭ラ亾澶у鏄惁缁忓父鑰冭檻鏂伴」鐩槸鍏堥€傞厤绉诲姩绔繕鏄厛閫傞厤妗岄潰绔紵鏈€杩戞垜鍦ㄦ帹鐗逛笂鍙戣捣浜嗕竴涓叧浜庤繖涓殑鎶曠エ锛屾€绘姇绁ㄦ暟鏄?48锛屾瘮渚嬪涓嬶細Mobilefirst:33.3%Desktopfirst:21.9%Mixed:24.7%涓嬮潰鎴戜滑灏辨潵浜嗚В涓€涓嬫瘡绉嶆柟娉曘€傚惈涔夊拰涓€浜涘搷搴斿紡璁捐鎶€宸э紝鍦ㄨ璁鸿繖浜涙柟娉曚粖澶╂槸鍚﹂€傜敤涔嬪墠銆傛€荤粨锛氱Щ鍔ㄤ紭鍏堝拰妗岄潰浼樺厛鏄粈涔堟剰鎬濈Щ鍔ㄤ紭鍏堟槸鎸囧湪寮€鍙戠綉绔欐椂锛屾垜浠鍏堜负杈冨皬鐨勮鍙ｇ紪鍐機SS锛岀劧鍚庝娇鐢–SS濯掍綋鏌ヨ鏉ヤ紭鍖栧ぇ瑙嗗彛鐨勪綋楠岃€冭檻浠ヤ笅绀轰緥锛氥€俿ection{padding:2rem1rem;}@media(min-width:62.5rem){.section{display:flex;瀵归綈椤圭洰锛氬眳涓紱闂撮殭锛?rem锛涘～鍏咃細4rem2rem锛泒}鎴戜滑涓虹Щ鍔ㄨ澶囬厤缃竴涓猵adding灞炴€э紝褰撹鍙ｅ昂瀵歌冻澶熷ぇ鏃讹紝搴旇鏄竴涓叿鏈夋洿澶adding鐨刦lexbox杩欏彧鏄竴涓畝鍗曠殑渚嬪瓙锛屽亣璁炬垜浠湁涓€涓冻澶熷ぇ鐨勭綉绔欐垨绉诲姩搴旂敤绋嬪簭锛岄偅涔堟垜浠兂瑕佷粈涔堣缃細鏇村銆傝€屽綋鎴戜滑閲囩敤妗岄潰浼樺厛鏂规硶鏃讹紝鎯呭喌鎭版伆鐩稿弽銆傝妭{鏄剧ず锛歠lex;瀵归綈椤圭洰锛氬眳涓紱闂撮殭锛?rem锛涘～鍏咃細4rem2rem锛泒@media锛堟渶澶у搴︼細62.5rem锛墈.section{鏄剧ず锛氬潡锛涘～鍏咃細2rem1rem锛泒}浠€涔堟槸绉诲姩浼樺厛寮€鍙戣繃绋嬶紝渚嬪鎴戜滑棣栧厛涓鸿緝澶х殑瑙嗗彛缂栧啓CSS锛岀劧鍚庝娇鐢ㄥ獟浣撴煡璇负杈冨皬鐨勮鍙ｆ洿鏀笴SS锛熶綘鍠滄鐩存帴鎶婃祻瑙堝櫒F12璋冨埌绉诲姩绔紑鍙戣€屼笉鏄€傞厤妗岄潰鍚楋紵鎴栬€呬綘鏇村枩娆㈠悓鏃跺仛杩欎袱浠朵簨锛熷嵆鍦ㄤ紭鍏堢紪鍐欑Щ鍔ㄨ澶囨牱寮忕殑鍚屾椂锛屼篃閫傞厤妗岄潰鐨勮鍙ｅぇ灏忋€傝繖鏄垜鑳芥兂璞＄殑涓ょ鎯呭喌锛氬厛鍦ㄧЩ鍔ㄨ澶囦笂澶勭悊鎵€鏈夐〉闈㈢殑CSS鏍峰紡锛岀劧鍚庡悓鏃堕€傞厤妗岄潰銆傛瘡娆″噯澶囩Щ鍔ㄩ〉闈㈡垨缁勪欢鏃讹紝閮戒細鍏堥€傞厤澶ц鍙ｃ€備綘閫氬父浣跨敤鍝竴绉嶏紵瀵规垜鏉ヨ锛岀浜岀鏂瑰紡鏇撮€傚悎鎴戯紝瀹冨彲浠ヨ鎴戞洿涓撴敞浜庢垜褰撳墠鐨勭粍浠舵垨椤甸潰锛屼篃鍙互鍑忓皯缂栧啓CSS鏃剁殑閿欒銆傚綋鎮ㄤ娇鐢ㄧ涓€绉嶆柟娉曟椂锛屽緢鍙兘浼氫负骞虫澘鐢佃剳鎴栧彴寮忔満閲嶅啓CSS銆傛垜浠湅涓嬪浘锛氭垜浠互.hero閫夋嫨鍣ㄤ负渚嬶細.hero{display:flex;瀵归綈椤圭洰锛氬脊鎬х粨鏉燂紱鑳屾櫙鍥惧儚锛歶rl锛?hero.jpg'锛?鑳屾櫙灏哄锛氬皝闈紱background-repeat:no-repeat;}.hero__title{font-size:1rem;}.hero__thumb{display:none;}@media(min-width:60rem){.hero{align-items:center;鑳屾櫙鍥惧儚锛氬垵濮嬶紱鑳屾櫙鑹诧細#7ecaff锛泒.hero__title{瀛椾綋澶у皬锛?rem锛泒.hero__thumb{鏈€澶у搴︼細320px锛涙樉绀猴細鍧楋紱}}濡備笂浠ｇ爜鎵€鍐欙紝.hero閫夋嫨鍣ㄥ湪绉诲姩绔湁鑳屾櫙鍥剧墖锛屽湪妗岄潰绔湁绾壊鑳屾櫙锛屾渶鍙宠竟鏈夊浘鐗囥€傚鎮ㄦ墍瑙侊紝杩欐槸涓€涓Щ鍔ㄤ紭鍏堢殑CSS鏍峰紡锛岄櫎浜嗗瓧浣撳ぇ灏忓拰鑳屾櫙锛屾垜浠笉闇€瑕佽鐩栧お澶氥€傞偅涔堝鑸憿锛宮obile-firstapproach鎬庝箞鍐欏憿锛?nav{浣嶇疆锛氬浐瀹氾紱宸︼細0锛涢《閮細0锛涘搴︼細100%锛涢珮搴︼細100%锛涙孩鍑?y锛氳嚜鍔紱濉厖椤堕儴锛?rem锛涳細缁濆锛涘彸锛?rem锛涢《閮細1rem锛泒.nav__item{濉厖锛?rem锛沝isplay:block;}.nav__item:not(:last-child){border-bottom:1pxsolid#fff;}/*妗岄潰鏍峰紡*/@media(min-width:60rem){.nav{position:initial;瀹藉害锛氬垵濮嬶紱楂樺害锛氬垵濮嬶紱婧㈠嚭-y锛氬垵濮嬶紱鏄剧ず锛氬脊鎬э紱瀵归綈椤圭洰锛氬眳涓紱濉厖椤堕儴锛?锛?棰滆壊锛氳摑鑹诧紱}.nav__toggle{鏄剧ず锛氭棤锛泒.nav__item:hover{棰滆壊锛氳摑鑹诧紱鑳屾櫙棰滆壊锛氬垵濮嬶紱}.nav__item:not(:last-child){border-bottom:0;宸﹁竟妗嗭細1px瀹炲績#fff锛泒}涓嶇煡閬撳ぇ瀹剁湅鍒版病鏈夛紝妗岄潰绔閲嶅啓鐨勬牱寮忓緢鍙兘鍜岀Щ鍔ㄧ宸叉湁鐨勬牱寮忔槸涓€鏍风殑锛岃繖鍙笉鏄粈涔堝ソ浜嬨€傚彟澶栵紝鏈夋椂鍊欎竴浜涜帿鍚嶅叾濡欑殑闂鏄疌SS鐗规€у紩璧风殑锛屾瘮濡傛垜鎯冲幓鎺?nav_item涓殑border-bottom銆?nav__item{border-bottom:0;}杩欐槸琛屼笉閫氱殑锛屽洜涓?not浼被鍦ㄨ繖绉嶆儏鍐典笅鍏锋湁鏇撮珮鐨勪紭鍏堢骇浣跨敤浠ヤ笅鏂规硶灏嗕娇鍏跺伐浣滐細.nav.nav__item{border-bottom:0;}/*鎴?/.nav__item:not(:last-child){border-bottom:0;border-left:1pxsolid#fff;}妗岄潰浼樺厛鐨勫紑鍙戣繃绋嬫槸浠€涔堟牱鐨勶紵杩樻槸瀵艰埅鏍忕殑鎯呭喌锛屾垜浠潵鐪嬬湅妗岄潰浼樺厛鐨勬柟妗堬紵.nav{鏄剧ず锛歠lex;瀵归綈椤圭洰锛氬眳涓紱鑳屾櫙鑹诧細钃濊壊锛泒.nav__toggle{浣嶇疆锛氱粷瀵癸紱鍙筹細1rem锛涢《閮細1rem锛泒.nav__item{濉厖锛?rem锛涳細鎮仠{棰滆壊锛氳摑鑹诧紱background-color:initial;}.nav__item:not(:last-child){border-bottom:0;border-left:1pxsolid#fff;}@media(max-width:25rem){.nav{display:block;浣嶇疆锛氬浐瀹氾紱宸︼細0锛涢《閮細0锛涘搴︼細100%锛涢珮搴︼細100%锛涙孩鍑?y锛氳嚜鍔紱濉厖椤堕儴锛?rem锛?*鍒囨崲绌洪棿*/}.nav__toggle{display:block;}.nav__item:not(:last-child){border-bottom:1pxsolid#fff;}}浣跨敤妗岄潰鏃跺綋瀹冩槸绗竴鏃讹紝鎴戜滑鍙互鐪嬪埌瑕嗙洊鐨勬暟閲忔瘮绉诲姩浼樺厛瑕佸皯寰楀銆傛槸涓嶆槸寰堟湁瓒ｏ紵涓昏鍘熷洜鏄垜浠€氳繃鏈€澶у搴﹀獟浣撴煡璇㈠鏌ヤ簡鐗瑰畾瑙嗗彛鐨勬墍鏈夌壒瀹氭牱寮忋€傛垜鎻愬€″厛鍐欐闈㈢殑CSS鏍峰紡锛屽啀閫傞厤绉诲姩绔€備粠涓嬮潰鐨勫姣斿浘鍙互鐪嬪嚭锛屽厛鐢╠esktop鍐機SS鏍峰紡鐪嬭捣鏉ユ洿鐭紝鑰屼笖娌℃湁涓嶅繀瑕佺殑閲嶅锛堝ソ鍚э紝浠栨湁鐐箏~锛夈€傚皬瀛︾敓鍙細鍋氶€夋嫨锛屽ぇ浜轰袱鑰呴兘瑕佸仛锛屽鎴戞潵璇达紝鎴戜笉鎯虫嫎娉ヤ簬浠讳綍涓€绉嶆柟娉曘€傛垜鏇村枩娆㈠皾璇曠粨鍚堣繖涓ょ鏂规硶銆傝繖鎰忓懗鐫€鎴戜滑闇€瑕佸厛鍐欏嚭鍩烘湰鐨勬牱寮忥紝鐒跺悗鍐嶆兂鎯冲湪绉诲姩绔拰妗岄潰绔細鍙戠敓浠€涔堬紵鎴戝枩娆ladShechter鍦ㄨ繖绡囨枃绔犱腑鎻愬埌鐨勫唴瀹广€備妇涓娊璞＄殑渚嬪瓙锛?nav{/*鍩烘湰鏍峰紡锛氫笉娑夊強浠讳綍绐楀彛澶у皬*/}/*妗岄潰鏍峰紡*/@media(min-width:800px){.nav{...}}/*绉诲姩styles*/@media(max-width:799px){.nav{...}}鍙互鐪嬪埌锛宮ediaquery鐨剆cope瀵瑰簲浜嗕笉鍚岀殑windowsize锛屼篃灏辨槸璇存垜浠笉浼氬仛浠讳綍瑕嗙洊灞炴€х殑浜嬫儏.杩欑鏂规硶瀵逛簬鍦ㄧЩ鍔ㄨ澶囧拰妗岄潰璁惧涓婄湅璧锋潵瀹屽叏涓嶅悓鐨勭粍浠跺緢鏈夌敤銆傚湪鎴戜滑鐨勪緥瀛愪腑锛屽畠鏄鑸€備絾鏄紝瀵逛簬
