移动H5开发的页面适配

发布于：2024-10-24 编辑：匿名来源：网络

鏈?杩戝紑鍙戝苟涓婄嚎浜嗕竴涓狧5椤圭洰銆傝繖閲岀粰澶у鍒嗕韩涓?涓嬮」鐩腑鐢ㄥ埌鐨勭Щ鍔ㄧ閫傞厤鎶?宸с?傚鏋滃浣犳湁甯姪鐨勮瘽锛岀偣璧炴敹钘忓惂馃槂浜茬埍鐨勮鑰呬滑锛屽埆鐫?鎬ャ?傚湪璁查〉闈㈤?傞厤涔嬪墠锛屾垜浠厛璁ㄨ涓?涓嬭鍙ｇ殑姒傚康銆傚湪缃戠粶娴忚鍣ㄦ湳璇腑锛屽畠閫氬父涓庢祻瑙堝櫒绐楀彛鐩稿悓锛屼絾涓嶅寘鎷祻瑙堝櫒鐨?UI銆佽彍鍗曟爮绛?- 鎸囨偍姝ｅ湪娴忚鐨勬枃妗ｇ殑閮ㄥ垎銆備竴鑸潵璇达紝鎴戜滑鎵?璇寸殑瑙嗗彛鏈変笁绉嶏細甯冨眬瑙嗗彛銆佽瑙夎鍙ｅ拰鐞嗘兂瑙嗗彛 1.1 甯冨眬瑙嗗彛鍦ㄧЩ鍔ㄧ锛屽竷灞?瑙嗗彛琚祴浜堜竴涓粯璁ゅ?硷紝澶у鏄痯x锛岃繖鏍蜂繚璇佷簡PC缃戦〉鑳藉娓叉煋鍦ㄧЩ鍔ㄦ祻瑙堝櫒涓婏紝鐢ㄦ埛鍙互鎵嬪姩鏀惧ぇ缃戦〉銆傛垜浠彲浠ラ?氳繃璋冪敤 document.documentElement.clientWidth / clientHeight 鏉ヨ幏鍙栧竷灞?瑙嗗彛鐨勫ぇ灏忋??1.2 瑙嗚瑙嗗彛瑙嗚瑙嗗彛锛岀敤鎴烽?氳繃灞忓箷瀹為檯鐪嬪埌鐨勫尯鍩熴?傛垜浠彲浠ラ?氳繃璋冪敤window.innerWidth/innerHeight鏉ヨ幏鍙栬瑙夎鍙ｇ殑澶у皬銆?1.3 鐞嗘兂瑙嗗彛瑙嗚瑙嗗彛锛岀敤鎴烽?氳繃灞忓箷瀹為檯鐪嬪埌鐨勫尯鍩燂紝鎴戜滑鍙互閫氳繃璋冪敤window.screen.width/height鏉ヨ幏鍙栬瑙夎鍙ｅぇ灏?1.4 椤甸潰閫傞厤鏂规硶缁间笂鎵?杩帮紝涓轰簡鑾峰彇绉诲姩绔殑椤甸潰涓轰簡鏇村ソ鐨勬樉绀烘晥鏋滐紝鎴戜滑蹇呴』璁╁竷灞?瑙嗗彛鍜岃瑙夎鍙ｅ敖鍙兘绛変簬鐞嗘兂瑙嗗彛銆傛垜浠彲浠ュ埄鐢?meta>鍏冪礌鐨剉iewport鏉ュ府鍔╂垜浠缃鍙ｃ?佺缉鏀剧瓑浠ｇ爜璇█锛?javascript copy device-width 绛変簬鐞嗘兂瑙嗗彛鐨勫搴︼紝鍥犳璁剧疆 width=device-width 鐩稿綋浜庝娇甯冨眬瑙嗗彛绛変簬鐞嗘兂瑙嗗彛銆傜敱浜巌nitial-scale = 鐞嗘兂瑙嗗彛瀹藉害/瑙嗚瑙嗗彛瀹藉害锛屾墍浠ユ垜浠缃甶nitial-scale=1锛涚浉褰撲簬璁╄瑙夎鍙ｇ瓑浜庣悊鎯宠鍙ｃ?傝繖鏍锋垜浠氨瀹炵幇浜嗗竷灞?瑙嗗彛=鐞嗘兂瑙嗗彛銆備笅闈㈤檮涓婂瑙嗗彛鍊肩殑瀹屾暣浠嬬粛銆?.4.1 閫氳繃璁剧疆initial-scale杩涜閫傞厤涓婇潰鎴戜滑浜嗚В鍒帮紝viewport鏈変竴涓猧nitial-scale灞炴?э紝鐢ㄤ簬瀹氫箟椤甸潰鐨勫垵濮嬬缉鏀炬瘮渚嬨?傛垜浠彲浠ラ?氳繃鍔ㄦ?佹敼鍙樿繖涓缉鏀惧?兼潵閫傚簲鍚楋紵鍥炵瓟鍙互鐨勶紒浠ｇ爜璇█锛?javascript copy function viewPort(){ const meta = document.querySelector('meta[name="viewport"]'); const 缂╂斁 = window.screen.width /> 1 ? 1 : 绐楀彛.灞忓箷.瀹藉害 / ; meta.content = `width=device-width,initial-scale=${scale}`}viewPort()window.onresize = viewPort;閫氳繃杩欐浠ｇ爜瀹炵幇閫傞厤銆傛垜浠潵鍒嗘瀽涓?涓嬶細鎴戜滑璁剧疆鐨勬槸鎻愪緵鐨刄I璁捐绋匡紝褰撶劧涔熷彲浠ユ槸鍏朵粬灏哄銆傚亣璁炬垜浠牴鎹畃x UI鍥炬潵缂栧啓css銆傚綋鐢ㄦ埛鐨勮澶囩悊鎯宠鍥緒indow.screen.width澶т簬鏃讹紝鎴戜滑浼氬椤甸潰杩涜鏁翠綋缂╂斁銆傚鏋滃皬浜庢斁澶с?佺缉灏忋?佹斁澶ф暣涓〉闈紝鎴戜滑閫氳繃window.screen.width /锛堣璁＄?灏哄锛夎幏鍙栨瘮渚嬶紝鐒跺悗鍔ㄦ?佽缃埌meta鏍囩涓?備笅鍥惧睍绀轰簡鏁堟灉銆傝繖绉嶆柟娉曡櫧鐒跺彲浠ヨВ鍐抽?傞厤闂锛屼絾鏄繃浜庣畝鍗曠矖鏆淬?備富瑕佹湁涓や釜闂锛?1. 鍏ㄥ眬缂╂斁褰卞搷鍒颁笉闇?瑕佺缉鏀剧殑涓滆タ锛?2.濡傛灉鏈夌涓夋柟UI搴擄紝浼氬奖鍝嶇涓夋柟搴撶殑鏄剧ず鏁堟灉锛?1.4.2 閫氳繃 rem 杩涜璋冩暣銆?Rem锛堟牴鍏冪礌鐨勫瓧浣撳ぇ灏忥級鏄寚鐩稿浜庢牴鍏冪礌鐨勫瓧浣撳ぇ灏忕殑鍗曚綅銆傜畝鍗曟潵璇达紝灏辨槸涓?涓浉瀵瑰崟浣嶃?傜湅鍒皉em锛屼綘涓?瀹氫細鎯冲埌em鍗曚綅銆?Em锛堝厓绱犵殑瀛椾綋澶у皬锛夋槸鎸囩浉瀵逛簬鐖跺厓绱犵殑瀛椾綋澶у皬鍗曚綅銆傚畠浠叾瀹炲緢鐩镐技锛屽彧涓嶈繃涓?绉嶈绠楄鍒欎緷璧栦簬鏍瑰厓绱狅紝鍙︿竴绉嶄緷璧栦簬鐖跺厓绱犺繘琛岃绠椼?傚涓嬪浘鎵?绀猴紝濡傛灉鏍瑰厓绱爃tml鐨勫瓧浣撳ぇ灏忎负px锛岄偅涔?rem灏辩瓑浜巔x銆備唬鐮佽瑷?锛歫avascript copy html{ font-size: px;}#root { font-size: 1rem; /* px */}鏍规嵁杩欎釜鍘熺悊锛屽彲浠ユ帹瀵煎嚭锛屽鏋滆璁＄?鐨勫搴︿负px锛屼互璁捐鍥句负鏍囧噯 HTML鏍囩鐨刦ont-size涓簆x锛岄偅涔堟?诲搴﹁璁捐鐨勫?间负 7.5rem銆傚鏋滄牴鍏冪礌鐨勫瓧浣撳ぇ灏忔槸鍔ㄦ?佹敼鍙樼殑锛岄偅涔堝厓绱犵殑澶у皬鏄惁涔熷彲浠ュ姩鎬佹敼鍙樺憿锛熺瓟妗堟槸鑲畾鐨勶紒鍙渶 3 涓畝鍗曟楠ゅ嵆鍙疄鐜版鐩殑銆傞鍏堝皢瑙嗗彛璁剧疆涓虹悊鎯崇獥鍙ｏ紝骞跺皢姣斾緥鍒濆鍖栦负0銆備唬鐮佽瑷?锛歫avascript copy 鐒跺悗缂栧啓js閫昏緫锛岀洃鍚〉闈esize浜嬩欢锛屽姩鎬佽缃甴tml鐨勫瓧浣撳ぇ灏忋?備唬鐮佽瑷?锛?javascript copy (function (window, html) { // 鎸囧畾榛樿璁捐绋垮搴?px const designWidth = ; function recalc() { const windowWidth = html.clientWidth < designWidth ? html.clientWidth : designWidth; // *After鍗虫牱寮忎腑鐨剅em鍊奸渶瑕佺浉搴斿噺灏?// 鍗筹細璁捐绋夸腑鐨?0px蹇呴』鍦ㄦ牱寮忎腑鍐欐垚0.2rem const fontSize = windowWidth / designWidth * ; setFontSize(fontSize); ) { html.style.fontSize = `${fontSize}px`; } // 鐩戝惉璋冩暣澶у皬 window.addEventListener('resize', recalc); recalc( );}(window, document.documentElement));涓婇潰浠ｇ爜涓紝鏍稿績浠ｇ爜鏄?const fontSize = windowWidth / designWidth *;瑙勫畾1rem绛変簬璁捐绋跨殑瀹藉害锛屽嵆px銆傛渶鍚庣殑涔樻硶鏄负浜嗗啓rem鏃舵柟渚胯绠椼?傛瘮濡俻x璁捐绋夸笂鏌愪釜鍏冪礌鐨勫搴︽槸50px锛岄偅涔堟垜鍦ㄥ啓rem鍗曚綅鐨勬椂鍊欙紝鍙互鐩存帴闄や互鍐欐垚0.5rem銆?锛屼负浜嗘柟渚胯绠楋紝涓嬪浘灞曠ず浜嗘晥鏋溿?備笂闈㈢殑浠ｇ爜浼氭湁涓?涓渶澶у彉鍖栭槇鍊硷紝鍗砫esignWidth锛屽嵆px銆傚綋娴忚鍣ㄧ獥鍙ｇ殑澶у皬瓒呰繃璇ュ?兼椂锛屽皢涓嶅啀鍔ㄦ?佸彉鍖栥?傝繖鍦≒C涓婃槸鍙互淇濊瘉鐨勩?備篃鍙互姝ｅ父鏄剧ず銆傚綋鐒讹紝浣滀负涓?涓悎鏍肩殑鍓嶇锛屼綘鎬庝箞鑳借嚜宸辫绠楀拰鍐檙em鍛紵鎴戜滑鍙互浣跨敤postcss-pxtorem鎻掍欢鏉ヨ嚜鍔ㄥ畬鎴愯繖椤瑰伐浣溿?傚湪椤圭洰鐨?webpack 閰嶇疆鏂囦欢涓紝涓?less 鏂囦欢娣诲姞 postcss-loader 浠ｇ爜璇█锛?javascript copy { test: /\.less$/, use: [ { loader: 'style-loader' }, { loader: 'css- loader ', }, { loader: 'postcss-loader', // 娣诲姞 postcss-loader }, { loader: 'less-loader', options: { javascriptEnabled: true, }, }, ],}锛岀劧鍚庡湪鏍圭洰褰曚腑鐩綍鍒涘缓 postcss.config.js 鏂囦欢浠ｇ爜璇█锛?javascript copy module.exports = { plugins: [ require('postcss-pxtorem')({ // 璁捐绋跨殑瀹藉害 rootValue: , unitPrecision: 5, propList: [ '*' , '!letter-spacing'],selectorBlackList: [],replace:true,mediaQuery:false,minPixelValue:1,exclusion:/node_modules/i, }),],};杩欓噷鍙互璁剧疆杞崲姣斾緥銆佺被鍚嶃?佸皬鏁扮偣浣嶆暟绛夛紝鍏蜂綋?厤缃鍙傝?冮厤缃」銆傚鏋滀笉鎯宠浆鎹紝鍙互灏唒x鍐欐垚澶у啓锛岃繖鏍峰氨涓嶄細杩涜杞崲銆備唬鐮佽瑷?锛歫avascript copy // `Px` 鎴?`PX` 琚?`postcss-pxtorem ` 蹇界暐锛屼絾浠嶈 browsers.ignore { border: 1Pxsolid; } // 蹇界暐杈规瀹藉害: 2PX; // 鏍囧織ored} 杩欐牱灏卞疄鐜颁簡px鍗曚綅鍒皉em鍗曚綅鐨勮嚜鐢辫浆鎹紝涓嶉渶瑕佹瘡涓?椤归兘鎵嬪伐璁＄畻鍜岀紪鍐欍??1.4.3 Flexible1.0鏂规 璇村畬浜唕em閫傞厤鏂规锛屾垜浠啀鏉ヨ璇存窐瀹濆洟闃烣lexible瑙ｅ喅鏂规鐨勬棭鏈熷伐浣溿?傛窐瀹濈殑绉诲姩娣樺疂鍥㈤槦鍦ㄥ仛绉诲姩绔?傞厤鐨勬椂鍊欙紝浠栦滑閲囩敤鐨勭伒娲绘柟妗堢殑鏍稿績灏辨槸rem閫傞厤銆傚綋浣犳墦寮?浠栦滑鐨刧ithub婧愪唬鐮佹椂锛屼綘浼氬彂鐜版瘮rem閫昏緫澶氫簡DPR澶勭悊銆傛墍浠ヤ粬浠殑璁″垝鏄痳em+dpr銆傝浜嗚繖涔堝锛屾垜浠潵璇磋dpr鏄粈涔堬紵 1.4.3.1 浠?涔堟槸 dpr锛?dpr鐨勫叏绉版槸璁惧鍍忕礌姣斻?傚畠鏄澶囦笂鐨勭墿鐞嗗儚绱犱笌璁惧鐙珛鍍忕礌鐨勬瘮鐜囥?傚叕寮忎负锛歸indow.devicePixelRatio = 鐗╃悊鍍忕礌/璁惧鐙珛鍍忕礌銆傝鍊间篃鍙互瑙ｉ噴涓哄儚绱犲ぇ灏忕殑姣旂巼銆?锛欳SS鍍忕礌鐨勫ぇ灏忓拰鐗╃悊鍍忕礌鐨勫ぇ灏忋?傜畝鑰岃█涔嬶紝瀹冨憡璇夋祻瑙堝櫒搴旇浣跨敤灞忓箷鐨勫灏戝疄闄呭儚绱犳潵缁樺埗鍗曚釜 CSS 鍍忕礌銆傝繖鏄彶钂傚か路涔斿竷鏂鍏堟彁鍑虹殑銆備箣鍓嶆槸1涓儚绱犵敱1涓墿鐞嗗儚绱犳覆鏌擄紝浣唅Phone 4鍑烘潵鍚庯紝1涓儚绱犵敱2涓墿鐞嗗儚绱犳覆鏌擄紝濡備笅鍥炬墍绀恒?傚乏渚т负iPhone 4涔嬪墠鐨勮澶囧儚绱犲鐞嗛?昏緫锛屽彸渚т负iPhone 4涔嬪墠鐨勮澶囧鐞嗛?昏緫銆備粠閫昏緫涓婅锛屼綘鍙互鐪嬪埌涓?涓儚绱犳槸鐢变袱涓墿鐞嗗儚绱犳覆鏌撳嚭鏉ョ殑锛岃繖浼氳鏄剧ず鏇存竻鏅帮紝鍍忕礌鍖栨洿灏戙?傚洜姝わ紝涓ゅ?嶅ぇ鐨勫浘鐗囧湪 dpr 涓?2 鐨勮澶囦笂鏄剧ず浼氬皬涓ゅ?嶃?侳lexible 浼氶拡瀵硅繖绉嶆儏鍐靛皢鏁翠綋灏哄缂╂斁 0.5锛岃鍥剧墖鑳藉姝ｅ父鏄剧ず銆備笉杩囦笂闈?.4.1鎻愬埌锛岀洿鎺ユ敼鍙榠nitial-scale鐨勫?间細鍑虹幇涓?浜涢棶棰橈紝鎵?浠ュ悗鏉ョ殑flexible2.0涔熸斁寮冧簡璁＄畻dpr鐨勯?昏緫銆傚湪璁瞯iewport瑙ｅ喅鏂规涔嬪墠锛屾垜浠厛瑙ｅ喅绉诲姩绔疍PR涓?鑸?=2鐨勯棶棰樸??1.4.3.2 瑙ｅ喅dpr甯︽潵鐨勯棶棰樸?備笂闈㈡彁鍒扮殑dpr寮曡捣鐨勯棶棰樹富瑕佹湁涓や釜锛?px闂鍜屽浘鐗囨ā绯婇棶棰樸?傛垜浠厛鏉ョ湅鐪嬪浣曡В鍐?px闂銆傝繖浜涙槸鐩墠1px闂鐨勪竴浜涗富娴佽В鍐虫柟妗堛?傝В鍐虫柟妗堬紝浣嗘槸鐪嬬湅鐩墠鐨勪竴浜涚綉绔欏娣樺疂銆佷含涓滐紝浠栦滑杩樻病鏈夊1px鍋氫换浣曞鐞嗐?傛嵁浼拌锛岃В鍐虫绫婚棶棰樼殑鎴愭湰/鏀剁泭澶т簬1銆傛垜浠潵鐪嬬湅鍥剧墖妯＄硦鐨勯棶棰樸?傚ぇ閮ㄥ垎鍙戠敓鍦╠pr楂樼殑璁惧涓婄殑浣庡?嶅満鏅紝鎵?浠ユ垜浠彲浠ョ洿鎺ヤ娇鐢?鍊嶇殑鍥惧儚锛屽洜涓哄ぇ澶氭暟璁惧鐨刣pr涓?銆傚浜庝竴浜沝pr>=3璁惧鐨勭壒娈婅澶囷紝鎴戜滑杩樺彲浠ヤ娇鐢ㄥ獟浣撴煡璇㈤?傞厤浠ｇ爜璇█锛?javascript copy.bg { background-image: url('); @media (-webkit-min-device-pixel-ratio: 3 ), (min-device-pixel-ratio: 3) { 鑳屾櫙鍥惧儚: url(''); }}1.4.4瑙嗗彛瑙ｅ喅鏂规瑙嗗彛瑙ｅ喅鏂规浣跨敤CSS3鐨勮绠楀崟浣峷w銆乿h绛夈?傞?傞厤锛岀偣鍑昏繖閲屾煡鐪嬭繖涓猚ss3鍗曞厓鐨勫畼鏂硅В閲娿?備笅鍥惧舰璞″湴瑙ｉ噴浜嗚繖涓崟鍏冪殑瀹氫箟锛?鎴戜滑鏉ョ湅鐪嬫祻瑙堝櫒鍏煎鎬с?傛垜浠彲浠ョ湅鍒拌鍗曞厓宸茬粡涓庣幇浠ｆ祻瑙堝櫒鍏煎銆傛牴鎹笂闈w鐨勫畾涔変互鍙婃垜浠rem瑙勫垝鐨勭悊瑙ｏ紝濡傛灉璁捐绋挎槸px锛岄偅涔堟垜浠皢灞忓箷鍒嗘垚绛変唤锛屾墍浠?px绛変簬vw / vw銆備緥濡傦紝濡傛灉璁捐绋夸笂鐨勬煇涓厓绱犳槸 50px锛岄偅涔?vw 灏辨槸 50 * vw / 銆傛垜浠緱鍒皃x鍜寁w鐨勮浆鎹㈠叕寮忥細 px * vw / 鍦ㄩ」鐩腑鐨勫叿浣撳疄鐜版柟娉曚腑锛岄鍏堝拰rem涓?鏍凤紝鎴戜滑涔熼渶瑕佽缃甿eta鏍囩浠ｇ爜璇█锛?javascript copy 鐒跺悗鐩存帴缂栧啓css浠ｇ爜璇█锛歫avascript copy >瀹炵幇鏁堟灉锛氭墍浠ヨ繖绉嶉?傞厤鏂瑰紡鐨勫ソ澶勫氨鏄垜浠彧闇?瑕佸啓css灏卞彲浠ヤ簡銆備笉闇?瑕佸啓棰濆鐨勯?昏緫锛屼絾鏄瘡娆￠兘鎵嬪姩璁＄畻纭疄寰堥夯鐑︺?傛垜浠篃鍙互浣跨敤鑷姩鍖栧伐鍏穚ostcss-px-to-viewport鏉ュ疄鐜般?傚叿浣撳疄鐜版柟娉曚笌涓婇潰鎻愬埌鐨剅em杞琾x绫讳技銆傚浜庨偅浜涗笉鎯宠繘琛岃浆鎹㈢殑浜猴紝鍙互娣诲姞蹇界暐娉ㄩ噴鏉ヨ烦杩囧畠銆備唬鐮佽瑷?锛歫avascript copy/* 绀轰緥杈撳叆锛?/.class { /* px-to-viewport-ignore-next */ width: 10px;鍐呰竟璺濓細10px锛涢珮搴︼細10px锛?/* px-to-viewport-ignore * / border:solid 2px #; /* px-to-viewport-ignore */}/* 绀轰緥杈撳嚭: */.class { width: 10px;濉厖锛?.vw锛涢珮搴︼細10px锛?border:solid 2px #;} 涓嶈繃锛岃鍙ｉ?傞厤鏂规涔熸湁涓?瀹氱殑缂虹偣锛屽氨鏄棤娉曡缃渶澶у搴﹂槇鍊硷紝鍙兘闅忕潃娴忚鍣ㄨ鍥惧昂瀵哥殑鍙樺寲鑰屽彉鍖栥?傝繖浣垮緱涓?浜涙兂瑕佸湪PC鍜宧5涓婇兘姝ｅ父鏄剧ず鐨勯」鐩彉寰楀洶闅俱?傝繃浜庡弸濂?1.4.5 瀵瑰垬娴峰睆鐨勫吋瀹规?э細 iPhone 鏈夌浉搴旂殑閫傞厤鏂规 name="viewport" content="viewport-fit=cover"> 鍖呭惈锛氬彲瑙嗙獥鍙ｅ畬鍏ㄥ寘鍚綉椤靛唴瀹广??cover锛氱綉椤靛唴瀹瑰畬鍏ㄨ鐩栬瑙夌獥鍙ｃ?傞粯璁ゆ垨鑰呰缃负auto鍜宑ontain锛屾晥鏋滄槸涓?鏍风殑銆備笅鍥句腑锛屽乏渚т负contain锛屽彸渚т负coverSafe Area銆傛槸iPhone涔嬪悗寮曞叆鐨勬柊姒傚康Viewport椤堕儴瀹夊叏鍖哄煙鍐呰缃殑閲忥紙CSS鍍忕礌锛夊父閲忥紙safe-area-inset-bottom锛夛細Viewport搴曢儴瀹夊叏鍖哄煙鍐呰缃殑閲忥紙 CSS 鍍忕礌锛塩onstant(safe-area-inset-left)锛氬湪瑙嗗彛宸︿晶璁剧疆瀹夊叏鍖哄煙鐨勬暟閲忥紙CSS 鍍忕礌锛塩onstant(safe-area-inset-right)锛氳缃暟閲忥紙CSS 鍍忕礌锛夊湪瑙嗗彛鍙充晶鐨勫畨鍏ㄥ尯鍩熶腑锛岀劧鍚庝负姝ｆ枃璁剧疆瀹夊叏鍖哄煙浠ｇ爜璇█锛?javascript copy body { padding:constant(safe-area-inset-top)constant(safe-area-inset-right)constant 锛堝畨鍏ㄥ尯鍩熸彃鍏ュ簳閮級甯搁噺锛堝畨鍏ㄥ尯鍩熸彃鍏ュ乏锛夛紱 /* 鍏煎 iOS < 11.2 */ padding : env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) 锛夛紱 /* 鍏煎 iOS >= 11.2 * /} 鎴戜滑鏉ヨ皥璋?css 鍑芥暟 env锛?env() 鍑芥暟浠ョ被浼间簬 var 鍑芥暟鐨勬柟寮忓皢鐢ㄦ埛浠ｇ悊瀹氫箟鐨勭幆澧冨彉閲忓?兼彃鍏ュ埌 CSS 涓?傝繖涓姛鑳芥渶鍒濇槸鐢眎OS娴忚鍣ㄦ彁渚涚殑锛岀洰鐨勬槸璁╁紑鍙戣?呭皢浠栦滑鐨勫唴瀹规斁缃湪瑙嗗彛鐨勫畨鍏ㄥ尯鍩熶腑銆傝鑼冧腑瀹氫箟鐨?safe-area-inset-* 鍊肩敤浜庣‘淇濆唴瀹瑰嵆浣垮湪闈炵煩褰㈣鍙ｄ腑涔熻兘瀹屾暣鏄剧ず銆備絾瀵逛簬 ios < 11.2 鐨勭郴缁燂紝闇?瑕佷娇鐢ㄥ父閲忓嚱鏁拌?屼笉鏄?env 浠ュ疄鐜板吋瀹规?с?傞?氳繃璁剧疆viewport-fit鍜屽畨鍏ㄥ尯鍩燂紝鍙互瀹岀編閫傚簲鍒樻捣灞忋??.5 灏忕粨璇翠簡杩欎箞澶氾紝鎴戜滑绠?鍗曟?荤粨涓?涓嬶細 1銆侀渶瑕佸湪绉诲姩绔拰PC绔兘鑳芥甯告樉绀虹殑椤圭洰锛屽缓璁娇鐢╮em甯冨眬锛?2銆佷粎鍦ㄧЩ鍔ㄧ鏄剧ず涓斿唴瀹硅緝灏戠殑椤甸潰鎺ㄨ崘浣跨敤銆備娇鐢ㄥぇ浼楀竷灞?锛涘綋鐒跺獟浣撴煡璇media涔熷彲浠ョ敤浜庨〉闈㈤?傞厤锛屼絾鏄浉姣旀垜鎻愬埌鐨勯偅浜涳紝瀹冧笉澶熺伒娲伙紝鑰屼笖閽堝鍚勭鏉′欢缂栧啓css涔熶笉鏄緢鍙嬪ソ锛屾墍浠ュ彲浠ヤ綔涓鸿緟鍔╂柟娉曘?傚涓婅堪鏂规硶鏃犳硶瑕嗙洊鐨勫尯鍩熻繘琛屽～琛ャ?備笅涓?绡囨枃绔犱細浠嬬粛绉诲姩绔皟璇曟柟娉曫煒冨弬鑰冩枃妗ｏ細

站长声明

标签：

上一篇：年终答卷！腾讯云智能综合实力位居国内梯队第一！

下一篇：Kafka详细设计和生态系统

「厚墨智能」获数亿元Pre-A+轮融资

近日，集存储与计算于一体的超大算力AI芯片公司「厚墨智能」宣布完成数亿元人民币融资在Pre-A+轮融资中，由经纬创投、金浦悦达汽车基金联合领投，国家中小企业发展基金联想子基金、天创资本跟投。现有投资者启明创投、合誉资本继续投资。本轮资金将主要用于芯片研发投入，加

06-17
中遥名气获数百万元天使轮融资，为中小型连锁店提供社交新零售解决方案

投资界7月30日获悉，据36氪报道，社交新零售系统厦门中遥名气服务商科技有限公司（以下简称“中耀名启”）宣布获得云雀资本领投的数百万元天使轮融资。该公司创始人陈钦锋表示，中耀名旗的SaaS平台已于今年9月正式上线。现已积累近千家企业客户，近百万注册用户。下半年会

06-18
鲁俊放言三年内中超上市，并打算找风险投资引入股东

2008年，时任中国足协的掌门人阎世铎就提出了中超上市的战略构想。他的想法一度成为人士圈内的笑话，但最终消失了。的。据《体坛周报》报道，鲁俊接手中超总经理后，在第一次内部会议上表示，要在三年内让中超上市。但从目前的情况来看，实现这一目标难度很大。　　200

06-18
Gartner：2020年全球半导体收入将增长10.4% -全球资讯

创头条编译市场研究机构Gartner最新报告显示，2020年全球半导体营收总计1亿美元，同比增长10.4%。 Gartner研究分析师Andrew Norwood表示，在超大规模、个人电脑、超移动和5G手机终端的市场需求推动下，内存、GPU和5G芯片组引领了去年半导体收入的增长。他补充说，由于大流行

06-18
逢年新完成近亿元A轮融资，物联网进入快车道

投资界（ID：pedaily）据7月7日消息，近日，国内首家专注于提供低功耗环境下的微控制器深圳市美凯创新科技有限公司（以下简称“美凯创新”）是一家提供能源捕获和通信解决方案的非电物联网科技公司，已完成近亿元处于A轮融资中。汇友资本、青浩资本参与本轮投资，挚金资本担

06-17
「面白科技」完成数千万元A轮融资，抢占千亿睡眠市场

据投资界（ID：pedaily）9月15日消息，近日，睡眠科技公司面白科技宣布已完成数千万元融资本次A轮融资由SIG海纳亚洲创业投资基金独家投资，青通资本独家投资。面白科技创始团队表示，本轮融资将主要用于品牌推广、团队扩张、供应链和研发。 SleepWhite科技成立于2007年，集团

06-18
重庆市科技成果转化投资基金运营管理团队选型及申报指南

1．评选背景重庆市科技成果转化投资基金（暂名，待工商审批）（以下简称“基金”或“基金”），由重庆高新区共同出资发起管委会（以下简称“重庆高新区”）和重庆天使投资引导基金有限公司（以下简称“天使引导基金”），后续将向国家科技部申请投资成果转化引导基金。贯彻

06-18
复合场景体验品牌服务商“伍德吃托克”完成数千万元Pre-A轮融资，由华映资本领投

据投资界6月11日消息，“伍德吃托克”近日完成数千万元Pre-A轮融资。本轮融资由华英资本领投，中林资本及上轮投资方经纬创投跟投。本轮融资后，团队将基于现有运营能力与当地二三线赛事运营商合作，通过“品牌管理输出+自主运营”模式进一步创造规模经济。 2019年8月，伍德

06-18
熊猫资本李论：喜茶背后的队列是消费升级，新的消费机会在To B和消费金融

据投资界消息，7月6日，“新零售与新服务业创新大会”举办by Pintu在北京举行。　　会上，熊猫资本创始人李论以“新零售与消费金融的投资逻辑”为主题发表了精彩演讲。他相信：　　1。对于新品牌来说，中国的机会并不是很大。 ;新零售、新品牌的真正出现还是发生在海外。

06-18
转订单给大陆OEM？俄罗斯拟重点扶持本土两大芯片厂商发展

据俄罗斯媒体报道，俄罗斯联邦当局正在考虑将贝加尔电子和MCST这两大芯片设计机构纳入重点企业名单。俄罗斯媒体表示，这将有助于其将处理器从台积电转移到中国工厂进行代工制造。此前，贝加尔电子开发了Baikal，MCST开发了Elbrus处理器，两者均由台积电生产。由于制裁，台

06-08
复旦大学成功验证GAA晶体管

复旦大学微电子学院据复旦大学微电子学院消息，该校周鹏团队验证了双层沟道厚度对于3-5纳米节点晶体管技术的需求显着。 0.6/1.2 nm的绕栅多桥沟道晶体管分别实现了高驱动电流和低漏电流的集成，为高性能、低功耗电子器件的开发提供了新的技术途径。相关成果将在第66届IEDM

06-06
10亿元，江西庐山市工业产业引导基金

10亿元，江西省庐山市工业产业引导基金 2019年8月1日，江西首创高投基金设立的庐山市工业产业引导基金在中国基金会计协会成功注册。该基金总规模10亿元，初始规模1亿元，期限10年。该基金主要投资数字经济、电子信息、集成电路等早期、成长期、成熟期项目，带动和支持芦山市

06-18