2瑙︽帶璁惧�囦笌闈炶Е馃摑鎺ц�惧�囩殑浜や簰宸�馃榾寮�

鍦ㄨЕ馃摑鎺ц�惧�囦笂锛岀敤鎴风殑浜や簰鏂瑰紡涓庨潪瑙︽帶璁惧�囸煋屾湁鎵�涓嶅悓銆備负浜嗛�傚簲杩欑�嶅樊寮傦紝鍙�浠ラ噰鍙栦互涓嬫帾鏂斤細

澶氱偣瑙︽帶鏀�鎸侊細纭�淇濋殣钘忚烦杞�鍏ュ彛鍦ㄥ�氱偣瑙︷煋濇帶璁惧�囦笂鐨勬�ｅ父宸ヤ綔锛屽彲浠ラ�氳繃娣诲姞touchstart銆乼ouchend绛夝煋濊Е馃摑鎺т簨浠剁洃鍚�鍣ㄦ潵瀹炵幇銆�

榧犳爣鍜岃Е馃摑鎺т簨浠剁粨鍚堬細鍦ㄨ�捐�′氦浜掓椂锛屽彲浠ョ粨鍚堥紶鏍囦簨浠讹紙濡俢lick锛夊拰瑙︽帶浜嬩欢锛堝�倀ouchstart锛夛紝浠ュ疄鐜版洿鐏垫椿鐨勪氦浜掍綋楠屻��

楂橀�戣��鍖轰簩锛氳繃搴︿緷璧朖avaScript

JavaScript鏄�瀹炵幇缃戦〉鍔ㄦ�佸姛鑳界殑鍒╁櫒锛屼絾杩囧害渚濊禆JavaScript闅愯棌璺宠浆鍏ュ彛鍙�鑳戒細甯︽潵璇稿�氶棶棰樸�傛瘮濡傦紝JavaScript鏈�鍔犺浇鏃讹紝闅愯棌璺宠浆鍏ュ彛鏃犳硶姝ｅ父宸ヤ綔锛岃繖浼氬�拣煋濊嚧鐢ㄦ埛鍦ㄦ煇浜涙儏鍐典笅鏃犳硶姝ｅ父浣跨敤缃戠珯鍔熻兘銆傝繃搴︿緷璧朖avaScript杩樺彲鑳藉�艰嚧缃戠珯鍔犺浇閫熷害鍙樻參锛屼粠鑰屽奖鍝嶇敤鎴蜂綋楠屻��

瀹炴祴缁撴灉

鍦ㄥ疄娴嬭繃绋嬩腑锛屾垜浠�鍙戠��17c缃戦〉闅愯棌璺宠浆鍏ュ彛鍦ㄥ�氫釜鏂归潰閮藉睍鐜板嚭浜嗘樉钁楃殑鏁堟灉锛�

娴侀噺澧為暱鏄捐憲锛氬湪瀹炴祴鐨勫�氫釜缃戠珯涓�锛岄殣钘忚烦杞�鍏ュ彛鐨勪娇鐢ㄦ樉钁楁彁鍗囦簡缃戠珯鐨勬祦閲忋�備緥濡傦紝鍦ㄤ竴瀹剁數瀛愬晢鍔＄綉绔欙紝闅愯棌璺宠浆鍏ュ彛鐨勫疄鏂戒娇寰楃綉绔欑殑璁块棶閲忓湪涓�涓�鏈堝唴澧炲姞浜�30%銆傝繖涓昏�佸緱鐩婁簬闅愯棌璺宠浆鐨勬柟寮忥紝鐢ㄦ埛鍦ㄦ祻瑙堣繃绋嬩腑涓嶄細鎰熷彈鍒版槑鏄剧殑涓�鏂�锛屼粠鑰屾洿瀹规槗鎺ュ彈骞惰�块棶鐩�鏍囩綉椤点��

鐢ㄦ埛琛屼负鏀瑰彉锛氶�氳繃鐢ㄦ埛琛屼负鍒嗘瀽锛屾垜浠�鍙戠幇鍦ㄥ疄鏂介殣钘忚烦杞�鍚庯紝鐢ㄦ埛鍦ㄨ�块棶鏌愪簺鐗瑰畾鍐呭�规椂锛屼細鑷�鍔ㄨ��寮曞�煎埌鐩�鏍囬〉闈�銆傝繖绉嶉殣钄界殑寮曞�兼柟寮忥紝浣垮緱鐢ㄦ埛鐨勬祻瑙堣矾寰勬洿鍔犳祦鐣咃紝鍚屾椂鎻愰珮浜嗙敤鎴峰湪鐩�鏍囬〉闈�涓婄殑鍋滅暀鏃堕棿銆�

杞�鍖栫巼鏄捐憲鎻愬崌锛氭渶閲嶈�佺殑鏄�锛岄殣钘忚烦杞�鍏ュ彛鍦ㄦ彁鍗囩綉绔欒浆鍖栫巼鏂归潰涔熻〃馃槑鐜板嚭馃挕浜嗚壇濂界殑鏁堟灉銆備緥濡傦紝鍦ㄤ竴瀹舵梾娓哥綉绔欙紝瀹炴柦闅愯棌璺宠浆鍚庯紝棰勮�㈣浆鍖栫巼鎻愬崌浜�25%銆傝繖鏄�鍥犱负闅愯棌璺宠浆璁╃敤鎴峰湪娴忚�堣繃绋嬩腑鑷�鐒跺湴鎺ヨЕ鍒颁簡棰勮�㈠叆鍙ｏ紝浠庤�屾洿瀹规槗瀹屾垚棰勮�㈡搷浣溿��

1绉诲姩璁惧�囦笌妗岄潰璁惧�囩殑灞忓箷灏哄�稿樊寮�

缃戦〉闅愯棌璺宠浆鍏ュ彛鍦ㄧЩ鍔ㄨ�惧�囧拰妗岄潰璁惧�囦笂鐨勮〃鐜板彲鑳戒細鏈夋墍涓嶅悓锛屽挨鍏舵槸鍦ㄥ睆骞曞昂瀵稿拰鍒嗚鲸鐜囩殑宸�寮備笅銆備负浜嗙‘淇濊法璁惧�囧吋瀹癸紝鍙�浠ヨ�冭檻浠ヤ笅绛栫暐锛�

鍝嶅簲寮忚�捐�★細閲囩敤鍝嶅簲寮忚�捐�℃妧鏈�锛屽�侰SS濯掍綋鏌ヨ��锛屾牴鎹�璁惧�囧睆骞曞昂瀵稿姩鎬佽皟鏁村竷灞�鍜屾牱寮忋��

瑙嗗彛璁剧疆锛氬湪HTML涓�姝ｇ‘璁剧疆瑙嗗彛锛坴iewport锛夛紝浠ョ‘淇濈綉椤靛湪绉诲姩璁惧�囦笂鐨勬�ｇ‘鏄剧ず鍜屼氦浜掋��

浼�绫诲拰浼�鍏冪礌

CSS浼�绫诲拰浼�鍏冪礌鏄�缃戦〉璁捐�′腑甯哥敤鐨勯殣钘忔妧鏈�涔嬩竴銆傞�氳繃浣跨敤::before銆�::after绛変吉鍏冪礌锛屽紑鍙戣�呭彲浠ュ湪涓嶅�炲姞棰濆�栫殑HTML鏍囩�剧殑鎯呭喌涓嬫坊鍔犻�濆�栫殑璁捐�″厓绱犮�備緥濡傦紝閫氳繃::before浼�鍏冪礌锛屽彲浠ュ湪涓�涓�鎸夐挳鍓嶆坊鍔犱竴涓�鍥炬爣锛屼娇寰楁寜閽�鐪嬭捣鏉ユ洿鍔犱赴瀵屽拰鏈夊惛寮曞姏銆�

button::before{content:"馃敀";padding-right:5px;}

鍔ㄦ�侀殣钘忚烦杞�

鍔ㄦ�侀殣钘忚烦杞�鏄�涓�绉嶆牴鎹�鐢ㄦ埛鐨勮�屼负銆佸湴鐞嗕綅缃�銆佽�惧�囩被鍨嬬瓑鍔ㄦ�佸喅瀹氳烦杞�鐩�鏍囩殑馃敟鎶�鏈�銆傝繖绉嶆妧鏈�闇�瑕佺粨鍚堟暟鎹�鍒嗘瀽鍜岀敤鎴疯�屼负杩借釜锛岄�氳繃鏈嶅姟鍣ㄧ��鎴栧�㈡埛绔�鐨勫姩鎬佷唬鐮佺敓鎴愶紝瀹炵幇涓�鎬у寲鐨勮烦杞�銆備緥濡傦紝鍙�浠ユ牴鎹�鐢ㄦ埛鐨勬祻瑙堝巻鍙插拰褰撳墠璁惧�囷紝鍔ㄦ�佸喅瀹氭槸鍚﹁繘琛岄殣钘忚烦杞�锛屽苟璺宠浆鍒版渶閫傚悎鐢ㄦ埛鐨勯〉闈���

鍦ㄥ綋鍓嶇珵浜夋縺鐑堢殑缃戠粶鐜�澧冧腑锛岀綉椤佃�捐�″拰寮�鍙戣�呬滑涓嶆柇杩芥眰鏇撮珮鏁堛�佹洿娴佺晠鐨勭敤鎴蜂綋楠屻��17c缃戦〉闅愯棌璺宠浆鍏ュ彛浣滀负涓�绉嶇幇浠ｅ寲鐨勭綉椤典氦浜掓墜娈碉紝鍙�浠ュ湪鐢ㄦ埛鏈�瀵熻�夌殑鎯呭喌涓嬪紩瀵煎叾鍒梆煂歌揪鐩�鏍囬〉闈�锛屾彁楂樹簡鐢ㄦ埛鐨勬弧鎰忓害鍜岀綉绔欑殑杞�鍖栫巼銆傚疄鐜拌繖涓�鍔熻兘鏃讹紝甯稿父馃摑浼氶亣鍒梆煂稿悇绉嶅吋瀹规�ч棶棰樸��

鏈�鏂囧皢璇︾粏鎺㈣�ㄨ繖浜涢棶棰樺強鍏惰В鍐虫柟娉曪紝甯�鍔╁紑鍙戣�呬滑鍦ㄥ疄闄呭簲鐢ㄤ腑鏇村ソ鍦版帶鍒跺拰浼樺寲缃戦〉闅愯棌璺宠浆鍏ュ彛銆�

瑙ｅ喅鏂规�堬��

浼樺寲鍔犺浇閫熷害锛氱‘淇濋殣钘忚烦杞�鍏ュ彛鐨勫疄鐜颁笉浼氬奖鍝嶇綉绔欑殑鍔犺浇閫熷害锛屽挨鍏舵槸鍦ㄧЩ鍔ㄨ�惧�囦笂鐨勮〃鐜般�傞�傚綋浣跨敤锛氶伩鍏嶈繃搴︿娇鐢ㄩ殣钘忚烦杞�鍏ュ彛锛屽悎鐞嗚�剧疆璺宠浆鐨勯�戠巼鍜岃Е鍙戞潯浠讹紝浠ヤ繚鎸佺敤鎴蜂綋楠岀殑娴佺晠銆傜敤鎴峰弽棣堬細閫氳繃鏀堕泦鐢ㄦ埛鍙嶉�堬紝浜嗚В浠栦滑瀵归殣钘忚烦杞�鍏ュ彛鐨勪綋楠岋紝骞舵牴鎹�鍙嶉�堣繘琛岃皟鏁村拰浼樺寲銆�

2.3闂�棰樹笁锛氶殣钘忚烦杞�鍏ュ彛琚�娴忚�堝櫒闃叉姢鏈哄埗璇嗗埆涓烘伓鎰忚�屼��

鏍″�癸細鏋楄�屾��(p6mu9CWFoIx7YFddy4eQTuEboRc9VR7b9b)