当前位置: 首页 > Web前端 > HTML5

[极致用户体验] 2行代码,让你的UI适配移动端、PC端,快来收藏

时间:2023-04-05 15:53:58 HTML5

銆愭瀬鑷寸敤鎴蜂綋楠屻€?琛屼唬鐮侊紝璁╀綘鐨刄I閫傞厤鎵嬫満绔拰PC绔紝蹇潵鏀惰棌锛屼氦涓湅鍙嬶級锛岃浆杞芥湰鏂囬渶浣滆€匟ullQin鎺堟潈銆傛垜鐙珛寮€鍙戜簡銆婅仈鏈烘娓稿悎闆嗐€嬶紝杩欐槸涓€涓綉椤碉紝鍦ㄨ繖閲屼綘鍙互杞绘澗鍜屾湅鍙嬩竴璧风帺缃戠粶娓告垙锛屼簲瀛愭绛夋父鎴忥紝鍏嶈垂锛屾棤骞垮憡銆傝繕涓篏ameJam2022寮€鍙戜簡銆奃ice Crush銆嬶紝鍠滄鐨勮瘽鍙互鍏虫敞鎴慔ullQin鍝鏈夌┖鎴戜細鍒嗕韩鍒朵綔娓告垙鐨勭浉鍏虫妧鏈€?.璁蹭竴涓叧浜庣Щ鍔ㄧ閫傞厤鐨勬晠浜嬶紝杩欐槸姣忎釜鍓嶇閮界粫涓嶅紑鐨勮瘽棰樸€傛柊鎵嬪彲鑳借姳鐨勬椂闂存瘮杈冨锛屼笉涓€瀹氳兘鐪嬫噦銆備竴浜涗骇鍝佺粡鐞嗕篃鍙兘鏃犳硶閬垮厤绉诲姩閫傞厤銆傛瘮濡備綘鍦ㄥ仛涓€涓唴閮ㄥ鎵瑰钩鍙帮紝鑰佹澘鍑嗗鐢ㄦ墜鏈哄鎵圭殑鏃跺€欙紝鎵撳紑涓€鐪嬶紝鏍峰紡涔变簡銆備粬澶ф浼氶棶涓嬪睘锛氣€滆繖鏄粈涔堬紵鎴戞墜鏈轰笂鐪嬩笉鍒帮紝闅鹃亾瑕佸埌鍔炲叕瀹ょ敤鐢佃剳瀹℃壒鍚楋紵鈥濓紵鐒跺悗棰嗗浠氨寮€濮嬮€愮骇鍚戜笅杞彂鑰佹澘鐨勬秷鎭€傚綋瀹冩潵鍒颁綘韬竟鏃讹紝浣犱竴瀹氬凡缁忔儕鎱屽け鎺簡銆傝€佸ぇ璇翠綘瑕侀€傞厤绉诲姩绔€傚ぇ澶у皬灏忕殑棰嗗閮界湅鍒颁簡锛屼竴瀹氳閫傚簲濂斤紒鍚﹀垯锛屾垜鎭愭€曚細涓㈡帀宸ヤ綔銆備簬鏄紝椤剁潃鍘嬪姏锛屼綘寮€濮嬪ぇ鏄捐韩鎵嬨€備负浜嗛€傞厤绉诲姩绔紝鎴戦噸鏂扮敾浜嗗師鍨嬨€傛姌鑵句簡涓€鏅氫笂锛岀粓浜庡湪绉诲姩绔敾濂戒簡鍘熷瀷銆傜瓑鍓嶇瀹炵幇浜嗭紝棰嗗灏辨弧鎰忎簡锛佺粨鏋滃墠绔锛氬お澶嶆潅浜嗭紝鐩稿綋浜庨噸鏋勬墍鏈夐〉闈紝瑕佷袱鍛紒鎴栬€呮垜鍙槸绠€鍗曞湴閫傚簲瀹冿紝鍙渶瑕佷竴澶╃殑鏃堕棿銆備綔涓轰骇鍝侊紝浣犱笉鐖斤細涓€鏂归潰锛岄瀵煎湪绛変綘鐨勭粨鏋滐紝浣犳兂灏藉揩瀹屾垚绉诲姩绔€傞厤锛涘彟涓€鏂归潰锛屽墠绔畬鎴愭瑙e喅鏂规鎵€闇€鐨勬椂闂村お闀匡紝鍙樺緱姣棤鎰忎箟銆?銆佺Щ鍔ㄧ閫傞厤鐨勭绫诲拰鎴愭湰鎴戜翰鐪艰杩?涓被浼肩殑妗堜緥銆傞潰瀵圭Щ鍔ㄩ€傞厤锛屼骇鍝佺粡鐞嗛泟蹇冨媰鍕冿紝鎵撶畻閫犵伀绠棰嗗婊℃剰銆傚鏋滃墠绔啲澶滐紝澶村彂鍏ㄩ儴鎺夊厜锛屽氨鏃犳硶蹇€熷彉鐜颁骇鍝佽瘔姹傘€備簨瀹炰笂锛屽綋杩欑鎯呭喌鍙戠敓鏃讹紝浜у搧缁忕悊鍜屽墠绔兘鍙互鍋氬緱鏇村ソ銆備綔涓轰骇鍝佺粡鐞嗭紝鍋氱Щ鍔ㄧ閫傞厤骞朵笉鐪熺殑闇€瑕佷綘閲嶅仛鍘熷瀷鍜屼氦浜掋€傜敤鎴风殑璇锋眰锛堣礋璐e鎵圭殑鑰佹澘涔熸槸浣犵殑鐢ㄦ埛锛夊彲鑳藉緢绠€鍗曪細浣犲彲浠ュ湪绉诲姩绔湅鍒版墍鏈夌殑淇℃伅骞惰繘琛屽鎵癸紝涓嶉渶瑕佸仛鐨勫緢鍗庝附銆傚洜姝わ紝鍦ㄩ亣鍒扳€滅Щ鍔ㄧ閫傞厤鈥濈殑闇€姹傛椂锛屼骇鍝佺粡鐞嗗繀椤诲厛浜嗚В鐢ㄦ埛鐨勮瘔姹傦紝鍐嶅鐥囦笅鑽€傝繖閲屾€荤粨涓€涓嬪父瑙佺殑閫傞厤鏂瑰紡鍙婂叾鎴愭湰锛氱敤鎴疯瘔姹傛柟妗堝墠绔紑鍙戠殑鏃堕棿鎴愭湰锛堥浼帮級銆備笉鍚岃澶囦笂鐨刄I甯冨眬鎸夋瘮渚嬬缉鏀撅紝绉诲姩绔彲浠ユ墜鍔ㄧ缉鏀俱€備娇鐢ㄦ湰鏂囩殑瑙e喅鏂规闃呰鏂囨湰浠呴渶3鍒嗛挓銆傦紙1鍒嗛挓鎵撳紑鏈枃澶嶅埗浠g爜锛?鍒嗛挓鎻愪氦浠g爜锛?鍒嗛挓鍙戝竷锛夊瓧鍙疯閫傚悎绉诲姩绔紝甯冨眬鍙互鏍规嵁灞忓箷瀹藉害閲嶆柊璋冩暣锛堝嵆鍝嶅簲寮忥級layout),mediaquery,flexlayout绛夛紝姣忎釜缁勪欢澶ф5鍒嗛挓锛屾瘡涓粍浠剁粍鍚堣皟璇?鍒嗛挓锛屾椂闂寸疮绉紙娉ㄦ剰锛氳繖鏄渶甯歌鐨勬柟寮忥紝ROI鏈€楂樼殑鏂瑰紡锛夈€傛槸C绔骇鍝侊紝绉诲姩绔偗瀹氭湁涓撻棬鐨刄I銆傚師鍨嬩笌PC绔畬鍏ㄤ笉鍚屻€傞噸鍐橴I鍙兘鍙兘浠ラ珮鎴愭湰澶嶇敤涓€浜涘姛鑳芥€у姛鑳姐€備笉瑕佹垚涓哄墠绔紑鍙戜汉鍛樸€備綔涓轰竴涓潬璋辩殑鍓嶇寮€鍙戣€咃紝鏈€鍩烘湰鐨勭礌璐ㄥ氨鏄細浣犲紑鍙戠殑缃戦〉涓嶈兘鍦ㄥ悇绉嶅父瑙佺殑灞忓箷涓婂嚭鐜颁贡涓冨叓绯熺殑鏍峰紡銆傚嵆浣夸骇鍝佹病鏈夋彁鍒伴渶姹傦紝浣犱篃搴旇澶氳姳涓€鍒嗛挓锛岀‘淇濋檲鍒椾笉涔便€備笅闈㈡垜浠氨鏉ョ湅鐪嬪浣曞湪1鍒嗛挓鍐呮坊鍔?琛屼唬鐮侊紝瀹炵幇绉诲姩閫傞厤銆傝刀绱х偣璧炴敹钘忓惂~3.UI閫傞厤绉诲姩绔拰PC绔€?琛屼唬鐮佹槸浠€涔堬紵鍦╤tml鏂囦欢鐨?head>涓啓鍏ワ細鍦╞ody涓坊鍔犳牱寮忥細body{min-width:320px}澶囨敞:320px闇€瑕佹牴鎹疄闄呮儏鍐典慨鏀广€傛偍鍙互璁剧疆鍙互瀹屽叏鏄剧ず鎮ㄧ殑缃戦〉鐨勬渶灏忓搴︺€備絾鏈€灏忚缃负320px灏辫冻澶熶簡銆傚洜涓烘牴鎹垜浠叕鍙哥殑鍓嶇鐩戞祴锛屽彧鏈変笉鍒?.01%鐨勭Щ鍔ㄨ澶囧搴﹀湪320px浠ヤ笅銆傦紙鏀惧績锛岀粺璁″熀鏁板澶э級濡傛灉鎯崇煡閬撹繖涓ょ椋庢牸鐨勬晥鏋滃浣曪紝鍙互鎵撳紑鎴戠殑娓告垙瀹樼綉鐪嬬湅锛歡ame.hullqin.cn鎴栬€呯洿鎺ョ湅鍔ㄧ敾鏂囩珷寮€澶磣4.鍐欏湪鏈€鍚庣殑蹇冩効姣忎釜浜洪兘鍙互鍒朵綔鍑虹敤鎴蜂綋楠屽ソ鐨勭綉椤祣馃槑鎺ㄨ崘闃呰锛氥€婄綉椤甸噷鐨勩€岃繑鍥炪€嶅簲璇ョ敤 history.back 杩樻槸 push 锛熴€嬨€婁綘鐨?Link Button 鑳借鐢ㄦ埛閫夋嫨鏂伴〉闈㈡墦寮€鍚楋紵銆嬫垜鏄叕浼楀彿绾夸笅娲惧娓告垙鐨勪綔鑰匟ullQin锛堟杩庡叧娉ㄥ叕浼楀彿,鍙戝姞寰俊,浜ゆ湅鍙?,杞彂鏈枃闇€鑾峰緱浣滆€匟ullQin鎺堟潈銆傛垜鐙珛寮€鍙戜簡銆婅仈鏈烘娓稿悎闆嗐€嬶紝杩欐槸涓€涓綉椤碉紝鍦ㄨ繖閲屼綘鍙互杞绘澗鍜屾湅鍙嬩竴璧风帺缃戠粶娓告垙锛屼簲瀛愭绛夋父鎴忥紝鍏嶈垂锛屾棤骞垮憡銆傝繕涓篏ameJam2022寮€鍙戜簡銆奃ice Crush銆嬶紝鍠滄鐨勮瘽鍙互鍏虫敞鎴慔ullQin鍝鏈夌┖鎴戜細鍒嗕韩鍒朵綔娓告垙鐨勭浉鍏虫妧鏈€?/p>