鍓嶈█澶у濂斤紝鎴戞槸HoMeTown锛屼笅闈㈡槸璁￠噺鍗曚綅锛屾兂缁х画鑱婅亰CSS鍍忕礌銆佽澶囧儚绱犮€佽澶囩嫭绔嬪儚绱犮€乨pr,ppi涔嬮棿鐨勫樊寮傘€備紬鎵€鍛ㄧ煡锛屽湪CSS涓紝鎴戜滑閫氬父浠x涓哄崟浣嶃€傚湪PC绔紝1涓儚绱犲搴旂數鑴戝睆骞曚笂鐨?涓墿鐞嗗儚绱犮€傛鍥犱负濡傛锛屼細缁欏垰寮€濮嬩簡瑙SS鐨勫悓瀛︿竴绉嶉敊瑙夈€傚嵆锛歝ss涓殑鍍忕礌鏄澶囩殑鐗╃悊鍍忕礌銆傚疄闄呬笂锛宑ss涓殑鍍忕礌鍙槸涓€涓娊璞＄殑鍗曚綅銆傚湪涓嶅悓鐨勮澶囧拰鐜涓嬶紝css涓?px琛ㄧず鐨勮澶囩殑鐗╃悊鍍忕礌鏄笉鍚岀殑銆備互绉诲姩绔负馃尠锛屽湪鍋氱Щ鍔ㄧ寮€鍙戠殑鏃跺€欙紝浼氬嚭鐜?px鐨勯棶棰橈紝浣嗘槸鍦ㄤ笉鍚屽瀷鍙风殑绉诲姩璁惧涓婃樉绀烘晥鏋滃樊鍒緢澶с€傝繖灏辨秹鍙婂埌璁惧鍍忕礌銆乧ss鍍忕礌銆佽澶囩嫭绔嬪儚绱犮€乨pr銆乸pi绛夋蹇点€俢sspixelcsspixel灏辨槸鎴戜滑鍦ㄥ紑鍙戠殑鏃跺€欑粡甯哥敤鍒扮殑px鍗曚綅銆備粠涓昏鐨勮搴︽潵鐪嬶紝px鏈韩鍏跺疄搴旇鏄竴涓粷瀵瑰崟浣嶏紝浣嗘槸浠庡瑙傜殑瑙掑害鏉ョ湅锛屽湪涓嶅悓鐨勬満鍨嬩笅锛屽畠鏄浉瀵逛簬璁惧鍍忕礌鐨勶紝涓昏浣撶幇鍦ㄤ袱涓柟闈細璋冩暣灞忓箷鍒嗚鲸鐜囦簩缂╂斁鎿嶄綔椤甸潰涓婁笉鍚屽瀷鍙风殑鎵嬫満瀹為檯涓婁細寮曡捣css涓璸x鐨勫彉鍖栥€備緥濡傦細鏈変竴涓?20px鐨勫厓绱狅紝鍒氬ソ濉弧浜嗘暣涓睆骞曘€傞〉闈㈡斁澶?鍊嶅悗锛屽師鏉ョ殑1px鍏冪礌鍙樻垚浜?px锛屽綋瀹為檯瀹藉害涓嶅彉鏃讹紝1px灏卞彉鎴愪簡鍘熸潵鐨?px銆備互鍓嶉渶瑕?20px鏉ュ～鍏咃紝鐜板湪鍙渶瑕?60px銆傝繖鏃跺€欏厓绱犱細鍗犳嵁鏇村鐨勮澶囧儚绱犮€傚彲浠ョ湅鍑簆x浼氬彈鍒癲pr锛堣澶囧儚绱犳瘮锛夊拰ppi锛堟瘡鑻卞鍍忕礌姣旓級鐨勫奖鍝嶃€傝澶囧儚绱狅紙devicepixels锛変篃鏄墿鐞嗗儚绱狅紝鍗宠澶囨帶鍒跺拰鏄剧ず鐨勬渶鏂扮墿鐞嗗崟浣嶃€傚畠涓嶄竴瀹氭槸1x1鎴?x2鐨勫皬姝ｆ柟褰€傚叾瀹炲畠骞舵病鏈夊叿浣撶殑鏍囧噯瀹介珮锛屽彧鏄敤鏉ユ樉绀哄畬鏁寸殑棰滆壊銆傚叕鍥腑鎶借薄鐨勨€滅偣鈥濆彲浠ユ寚鍏洯鏅涓彉鑹茬殑鐏甫銆備竴鐩忓僵鐏槸鐢辩孩銆佽摑銆佺豢涓夌灏忕伅娣峰悎鎴愬悇绉嶉鑹茬粍鎴愮殑銆備粠灞忓箷鍑哄巶閭ｅぉ璧凤紝涓婇潰鐨勮澶囧儚绱犲氨鏄浐瀹氱殑锛屽崟浣嶆槸pt銆傝澶囨棤鍏冲儚绱狅紙DeviceIndependentPixel锛夋槸璁惧鏃犲叧鐨勯€昏緫鍍忕礌锛屼唬琛ㄤ竴涓彲浠ヨ绋嬪簭鎺у埗鍜屼娇鐢ㄧ殑铏氭嫙鍍忕礌銆傚畠鏄竴涓缁熺殑姒傚康锛屽寘鎷珻SS鍍忕礌銆傚湪JavaScript涓紝鍙互閫氳繃window.screen.width/window.screen.height鏉ユ煡鐪嬨€傜粰涓畝鍗曠殑馃尠锛氭垜鏈変竴鍙拌荆楦＄瑪璁版湰鐢佃剳锛屾兂缁欎粬鐜╋紝鐢佃剳鐨勫垎杈ㄧ巼鏄?560x1600锛屽彲鑳芥垜瑙夊緱杩欎釜鍒嗚鲸鐜囧鎴戞潵璇翠笉澶垝鏈嶏紝鎴戝啀璁剧疆涓€涓?-褰卞搷--鍥惧舰-灏嗗叾鍒嗚鲸鐜囪皟鏁翠负1440x900銆傝繖閲岀殑鍒嗚鲸鐜囧苟涓嶆槸涓ユ牸鎰忎箟涓婄殑锛屽畠鎸囩殑鏄澶囨棤鍏冲儚绱狅紝涓€涓澶囨棤鍏冲儚绱犲彲鑳藉寘鍚?涓垨澶氫釜鐗╃悊鍍忕礌锛屽寘鍚殑瓒婂锛屽浘鍍忚川閲忓氨瓒婇珮銆備负浠€涔堜細鏈夎澶囨棤鍏冲儚绱犺繖鏍风殑铏氭嫙鍍忕礌鍗曞厓姒傚康锛熶妇涓緥瀛愷煂帮細鍋囪锛屾垜鏈変竴涓猧Phone12鍜宨Phone13锛屽昂瀵告槸5.4锛宨phone12鐨勫垎杈ㄧ巼鏄?040*960锛宨phone13鐨勫垎杈ㄧ巼鏄?080脳1170锛岄偅涔坕hpone12鐗╃悊鍍忕礌鏄?170锛宨phone鏄?532鐗╃悊鍍忕礌鍍忕礌銆傚鏋滄寜鐓х湡瀹炵殑鐗╃悊鍍忕礌杩涜甯冨眬锛屼互12涓轰緥锛岄偅涔?3涓婂氨浼氭湁涓€鍗婄殑绌虹櫧锛屼负浜嗛伩鍏嶈繖绉嶆儏鍐碉紝鍑虹幇浜嗕竴涓櫄鎷熺殑鍍忕礌鍗曞厓銆傛垜浠皢12鍜?3鐨勮櫄鎷熷儚绱犵粺涓€涓?040涓紝浣嗘槸鍦?2涓婏紝1涓櫄鎷熷儚绱犺浆鎹负1涓墿鐞嗗儚绱狅紝13涓婏紝1涓櫄鎷熷儚绱犺浆鎹负2涓墿鐞嗗儚绱犮€傝繖绉峮涓櫄鎷熷儚绱狅細n涓墿鐞嗗儚绱犳瘮鐨勮浆鎹㈢粺绉颁负璁惧鍍忕礌姣旓紝鍗砫prdpr锛圖evicepixelratio锛夎澶囧儚绱犳瘮锛岃〃绀轰粠璁惧鐙珛鍍忕礌鍒拌澶囧儚绱犵殑杞崲鍏崇郴銆傚湪JavaScript涓紝鍙互閫氳繃window.devicePixelRatio鑾峰彇銆傝绠楀叕寮忎负锛歞rp=dp/dipif(drp===1:1)use1dpshow1pxif(drp===2:1)use4dpshow1pxif(drp===3:1)use9dpshow1pxas濡備笅鍥炬墍绀猴細ppi(pixelperinch)pixelsperinch锛屽嵆姣忚嫳瀵哥殑鍍忕礌鏁帮紝鍗冲儚绱犲瘑搴︺€傚€艰秺楂橈紝灞忓箷瓒婅兘浠ユ洿楂樼殑瀵嗗害鏄剧ず鍥惧儚銆傝绠楀叕寮忎负锛氬湪涓嶇缉鏀剧殑鎯呭喌涓嬶紝1px=1dip璁惧鍍忕礌涓嶄細鍙樺寲锛屼絾绉诲姩绔爣鍑嗗睆骞曚笅璁惧铏氭嫙鍍忕礌浼氬彂鐢熷彉鍖栵紝1dip=1dpdpr=dp/dipppi瓒婂ぇ瓒婃竻鏅板浘鐗?/p>
