鍝嶅簲寮忕綉绔

鍙戝竷鏃堕棿锛2020-02-24 11:36:15 浣滆咃細 鏉ユ簮锛 娴忚閲忥紙2436锛
鎽樿锛氬搷搴斿紡缃戠珯璁捐銆銆鍝嶅簲寮忕綉绔欒璁℃槸涓绉嶇綉缁滈〉闈㈣璁″竷灞锛屽叾鐞嗗康鏄細闆嗕腑鍒涘缓椤甸潰鐨勫浘鐗囨帓鐗堝ぇ灏忥紝鍙互鏅鸿兘鍦版牴鎹敤鎴疯涓轰互鍙婁娇鐢ㄧ殑璁惧鐜杩涜鐩稿搴旂殑甯冨眬銆傝璁$悊蹇点銆姝ゆ蹇典簬2010骞5鏈堢敱鍥藉钁楀悕缃戦〉璁捐甯圗than Marcotte鎵鎻愬嚭銆傘銆鍝嶅簲寮忕綉绔欒璁(Responsive Web design)鐨勭悊蹇垫槸锛氥銆椤甸潰鐨勮璁′笌寮鍙戝簲褰撴牴
鍝嶅簲寮忕綉绔欒璁

銆銆鍝嶅簲寮忕綉绔欒璁℃槸涓绉嶇綉缁滈〉闈㈣璁″竷灞锛屽叾鐞嗗康鏄細闆嗕腑鍒涘缓椤甸潰鐨勫浘鐗囨帓鐗堝ぇ灏忥紝鍙互鏅鸿兘鍦版牴鎹敤鎴疯涓轰互鍙婁娇鐢ㄧ殑璁惧鐜杩涜鐩稿搴旂殑甯冨眬銆

璁捐鐞嗗康

銆銆姝ゆ蹇典簬2010骞5鏈堢敱鍥藉钁楀悕缃戦〉璁捐甯圗than Marcotte鎵鎻愬嚭銆

銆銆鍝嶅簲寮忕綉绔欒璁(Responsive Web design)鐨勭悊蹇垫槸锛

銆銆椤甸潰鐨勮璁′笌寮鍙戝簲褰撴牴鎹敤鎴疯涓轰互鍙婅澶囩幆澧(绯荤粺骞冲彴銆佸睆骞曞昂瀵搞佸睆骞曞畾鍚戠瓑)杩涜鐩稿簲鐨勫搷搴斿拰璋冩暣銆傚叿浣撶殑瀹炶返鏂瑰紡鐢卞鏂归潰缁勬垚锛屽寘鎷脊鎬х綉鏍煎拰甯冨眬銆佸浘鐗囥丆SS media query鐨勪娇鐢ㄧ瓑銆傛棤璁虹敤鎴锋鍦ㄤ娇鐢ㄧ瑪璁版湰杩樻槸iPad锛屾垜浠殑椤甸潰閮藉簲璇ヨ兘澶熻嚜鍔ㄥ垏鎹㈠垎杈ㄧ巼銆佸浘鐗囧昂瀵稿強鐩稿叧鑴氭湰鍔熻兘绛夛紝浠ラ傚簲涓嶅悓璁惧锛涙崲鍙ヨ瘽璇达紝椤甸潰搴旇鏈夎兘鍔涘幓鑷姩鍝嶅簲鐢ㄦ埛鐨勮澶囩幆澧冦傚搷搴斿紡缃戦〉璁捐灏辨槸涓涓綉绔欒兘澶熷吋瀹瑰涓粓绔斺旇屼笉鏄负姣忎釜缁堢鍋氫竴涓壒瀹氱殑鐗堟湰銆傝繖鏍凤紝鎴戜滑灏卞彲浠ヤ笉蹇呬负涓嶆柇鍒版潵鐨勬柊璁惧鍋氫笓闂ㄧ殑鐗堟湰璁捐鍜屽紑鍙戜簡銆

鍘嗗彶

銆銆Ethan Marcotte 鍦ㄤ粬鍦ˋ List Apart鐨勬枃绔犱腑鍙戞槑浜嗘湳璇 Responsive Web Design (RWD)銆備粬鍦ㄤ粬 2011 骞村叧浜庤繖涓富棰樻墍鍐欑殑绠鐭殑涔︿腑鎻忚堪浜嗗搷搴斿紡缃戦〉璁捐鐨勭悊璁哄拰瀹炶返銆傚搷搴斿紡璁捐琚.net 鏉傚織鍒椾负 2012 骞撮《绾х綉椤佃璁¤秼鍔跨殑绗簩鍚 (娓愯繘澧炲己鏄涓鍚)銆備粬浠篃鍒楀嚭浜 Ethan Marcotte 鏈鍠滄鐨勫搷搴斿紡绔欑偣涔嬩腑鐨20涓

鎻愬嚭

銆銆Ethan Marcotte鏇剧粡鍦ˋ List Apart鍙戣〃杩囦竴绡囨枃绔"Responsive Web Design"锛屾枃涓彺寮曚簡鍝嶅簲寮忓缓绛戣璁$殑姒傚康锛氱幇鍑虹幇浜嗕竴闂ㄦ柊鍏寸殑瀛︾鈥斺"鍝嶅簲寮忔灦鏋(responsive architecture)"鈥斺旀彁鍑猴紝鐗╃悊绌洪棿搴旇鍙互鏍规嵁瀛樺湪浜庡叾涓殑浜虹殑鎯呭喌杩涜鍝嶅簲銆傜粨鍚堝祵鍏ュ紡鏈哄櫒浜烘妧鏈互鍙婂彲鎷変几鏉愭枡鐨勫簲鐢紝寤虹瓚甯堜滑姝e湪灏濊瘯寤洪犱竴绉嶅彲浠ユ牴鎹懆鍥翠汉缇ょ殑鎯呭喌杩涜寮洸銆佷几缂╁拰鎵╁睍鐨勫浣撶粨鏋勶紱杩樺彲浠ヤ娇鐢ㄨ繍鍔ㄤ紶鎰熷櫒閰嶅悎姘斿欐帶鍒剁郴缁燂紝璋冩暣瀹ゅ唴鐨勬俯搴﹀強鐜鍏夈傚凡缁忔湁鍏徃鍦ㄧ敓浜"鏅鸿兘鐜荤拑"锛氬綋瀹ゅ唴浜烘暟杈惧埌涓瀹氱殑闃堝兼椂锛岃繖绉嶇幓鐠冨彲浠ヨ嚜鍔ㄥ彉涓轰笉閫忔槑锛岀‘淇濋殣绉併

銆銆灏嗚繖涓濊矾寤朵几鍒癢eb璁捐鐨勯鍩燂紝鎴戜滑灏卞緱鍒颁簡涓涓叏鏂扮殑姒傚康銆備负浠涔堜竴瀹氳涓烘瘡涓敤鎴风兢鍚勮嚜鎵撻犱竴濂楄璁″拰寮鍙戞柟妗堬紵鍜屽搷搴斿紡寤虹瓚鐩镐技锛學eb璁捐鍚屾牱搴旇鍋氬埌鏍规嵁涓嶅悓璁惧鐜鑷姩鍝嶅簲鍙婅皟鏁淬

銆銆鏄剧劧锛屾垜浠棤娉曚篃鏃犻渶浣跨敤杩愬姩浼犳劅鍣ㄦ垨鏄満鍣ㄤ汉鎶鏈紝鍝嶅簲寮廤eb璁捐鏇村闇瑕佺殑鏄娊璞℃濈淮銆傚ソ鍦紝涓浜涚浉鍏崇殑姒傚康宸茬粡寰楀埌浜嗗疄璺碉紝姣斿娑叉佸竷灞銆佸府鍔╅〉闈㈤噸鏂版牸寮忓寲鐨刴edia queries鍜岃剼鏈瓑銆備絾鏄搷搴斿紡Web璁捐涓嶄粎浠呮槸鍏充簬灞忓箷鍒嗚鲸鐜囪嚜閫傚簲浠ュ強鑷姩缂╂斁鐨勫浘鐗囩瓑绛夛紝瀹冩洿鍍忔槸涓绉嶅浜庤璁$殑鍏ㄦ柊鎬濈淮妯″紡銆

鎶鏈墜娈

銆銆涓鍒囧脊鎬у寲锛

銆銆鎴戜滑閫氳繃鍝嶅簲寮忕殑璁捐鍜屽紑鍙戞濊矾璁╅〉闈㈡洿鍔"寮规"浜嗐傚浘鐗囩殑灏哄鍙互琚嚜鍔ㄨ皟鏁达紝椤甸潰

銆銆娑叉佸浘鐗囨妧鏈

銆銆娑叉佸浘鐗囨妧鏈

銆銆甯冨眬鍐嶄笉浼氳鐮村潖銆傝櫧鐒舵案杩滄病鏈夋渶鍚堥傜殑瑙e喅鏂规锛屼絾瀹冪粰浜嗘垜浠洿澶氶夋嫨銆傛棤璁虹敤鎴峰垏鎹㈣澶囩殑灞忓箷瀹氬悜鏂瑰紡锛岃繕鏄粠鍙板紡鏈哄睆骞曡浆鍒癷Pad涓婃祻瑙堬紝椤甸潰閮戒細鐪熸鐨勫瘜鏈夊脊鎬с

銆銆閫氳繃娑叉佺綉鏍煎拰娑叉佸浘鐗囨妧鏈紝骞朵笖鍦ㄦ纭殑鍦版柟浣跨敤浜嗘纭殑HTML鏍囪銆

銆銆鍝嶅簲寮忓浘鐗囷細

銆銆鍝嶅簲寮忓浘鐗囨妧鏈濇兂锛氫笉浠呰鍚屾瘮鐨勭缉鏀惧浘鐗囷紝杩樿鍦ㄥ皬璁惧涓婇檷浣庡浘鐗囪嚜韬殑鍒嗚鲸鐜囥傝繖涓妧鏈殑瀹炵幇闇瑕佷娇鐢ㄥ嚑涓浉鍏虫枃浠讹紝鎴戜滑鍙互鍦℅ithub涓婅幏鍙栥傚寘鎷竴涓狫avaScript鏂囦欢(rwd-images.js)锛屼竴涓.htaccess鏂囦欢锛屼互鍙婁竴浜涜寖渚嬭祫婧愭枃浠躲傚ぇ鑷寸殑鍘熺悊鏄紝rwd-images.js浼氭娴嬪綋鍓嶈澶囩殑灞忓箷鍒嗚鲸鐜囷紝濡傛灉鏄ぇ灞忓箷璁惧锛屽垯鍚戦〉闈ead閮ㄥ垎涓坊鍔燘ASE鏍囪锛屽苟灏嗗悗缁殑鍥剧墖銆佽剼鏈拰鏍峰紡琛ㄥ姞杞借姹傚畾鍚戝埌涓涓櫄鎷熻矾寰"/rwd-router"銆傚綋杩欎簺璇锋眰鍒拌揪鏈嶅姟鍣ㄧ锛.htacces鏂囦欢浼氬喅瀹氳繖浜涜姹傛墍闇瑕佺殑鏄師濮嬪浘鐗囪繕鏄皬灏哄鐨"鍝嶅簲寮忓浘鐗"锛屽苟杩涜鐩稿簲鐨勫弽棣堣緭鍑恒傚浜庡皬灞忓箷鐨勭Щ鍔ㄨ澶囷紝鍘熷灏哄鐨勫ぇ鍥剧墖姘歌繙涓嶄細琚敤鍒般

瓒嬪娍

銆銆鍝嶅簲寮忚璁″湪2012骞磋鎻愮殑姣旇緝澶氾紝浣嗘槸鍝嶅簲寮忚璁′粛鐒跺湪涓嶆柇鍙樺寲锛屼笉鏂垱鏂般傛瘮濡傦紝鏂扮殑璁惧涓嶆柇鍑烘潵(iPad Mini)锛岃繖璁╀互鍓嶇殑璁捐鎯虫硶鍦熷穿鐡﹁В銆傝屽悇绉峎eb鐨勫搷搴斿紡璁捐涔熻幏寰椾簡瓒婃潵瓒婂鐨勬敞鎰忥紝鈥滆浜轰滑蹇樿璁惧灏哄鈥濈殑鐞嗗康灏嗘洿蹇湴椹卞姩鍝嶅簲寮忚璁★紝鎵浠eb璁捐涔熷皢杩庢潵鏇村鐨勫搷搴斿紡璁捐鍏冪礌銆

銆銆UIKit

銆銆UIkit 鏄竴涓交閲忕骇銆佹ā鍧楀寲鐨勫墠绔鏋讹紝鍙揩閫熸瀯寤哄己澶х殑web鍓嶇鐣岄潰銆傚畠鏍规嵁涓嶅悓鐨勫睆骞曞垎杈ㄧ巼涓庝笂缃戣澶囷紝浼氳嚜鍔ㄥ仛鍑哄搷搴旓紝鎻愪緵涓鑷寸殑浣撻獙銆

銆銆Bootstrap

銆銆鐢变袱涓猅witter鍛樺伐寮鍙戝苟寮婧愮殑鍓嶇妗嗘灦锛屽凡缁忔洿鏂板埌浜唙4.1.2鐗堟湰锛屽湪Github涓婇潪甯哥伀鐖嗭紝鍦ㄥ浗鍐呬篃鏈夊緢澶氱矇涓濓紝鍊煎緱涓璇曘

銆銆Adobe Edge Inspect

銆銆瀵圭Щ鍔ㄥ紑鍙戣呭挨鍏舵湁鐢ㄧ殑宸ュ叿锛屽叾鍓嶈韩鏄 Adobe Shadow锛岀敤浜庡府鍔╄璁″笀鍜屽紑鍙戣呭悓鏃跺湪澶氫釜绉诲姩璁惧涓婇瑙堝簲鐢ㄨ璁★紝鍙戠幇鍜岃В鍐宠法骞冲彴闂銆

銆銆Responsive Web Design Sketch Sheets

銆銆濡傛灉浣犺繕鍦ㄧ敤绾稿拰绗旀潵鍒涘缓浣犵殑瀹炰綋妯″瀷锛屼綘鍙互鐢ㄨ繖浜涚幇鏈夌殑鑽夊浘鏉ヨ璁′綘鐨勪氦浜掔綉绔欎簡銆

銆銆Foundation

銆銆鍙风О鏄笘鐣屼笂鏈鍏堣繘鐨勫搷搴斿紡鍓嶇妗嗘灦銆

銆銆SimpleGrid

銆銆杞婚噺绾х殑鍝嶅簲寮 CSS 缃戞牸绯荤粺锛岃浣犲彲浠ュ揩閫熷垱寤洪傚簲浜庢墜鏈哄拰骞虫澘鐢佃剳鐨勭綉绔欍

銆銆Responsive Testing

銆銆杩欎釜宸ュ叿鍙互璁╀綘棰勮浣犺璁$綉椤靛湪涓嶅悓璁惧涓婄殑鏁堟灉锛屽彧闇瑕佽闂畠鐨勭綉绔欏苟杈撳叆浣犵綉绔欑殑鍦板潃灏卞彲浠ョ湅鍒颁簡銆

鑱氬悎甯叕浼楀彿

鎵竴鎵紝鍏虫敞鎴戜滑

鎰熷叴瓒e悧锛

娆㈣繋鑱旂郴鎴戜滑锛屾垜浠効鎰忎负鎮ㄨВ绛斾换浣曟湁鍏崇綉绔欑枒闅鹃棶棰橈紒

鎮ㄨ韩杈圭殑銆愮綉绔欏缓璁句笓瀹躲

鎼滅储鍗冧竾娆′笉濡傚挩璇1娆

涓昏惀椤圭洰:缃戠珯寤鸿,鎵嬫満缃戠珯,鍝嶅簲寮忕綉绔,SEO浼樺寲,灏忕▼搴忓紑鍙,鐗堟潈鐧昏,鍟嗘爣娉ㄥ唽绛

绔嬪嵆鍜ㄨ 18629567525