整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
一、 彈性布局(100%布局)的特點(diǎn)
頂部與底部的bar不管分辨率怎么變，它的?度和位置都不變; 中間每條招聘信息不管分辨率怎么變，招聘公司的圖標(biāo)等信息 都位于條目的左邊，薪資都位于右邊.
特點(diǎn)：關(guān)鍵元素高寬和位置都不變，只有容器元素在做伸縮變換。對(duì)于這類app，記住一個(gè)開發(fā)原則就好：文字流式，控件彈性，圖片等比縮放
二、什么是屏幕尺寸?
移動(dòng)端屏幕尺寸:屏幕對(duì)角線的長(zhǎng)度，單位是英寸(1英寸=2.54厘米)。
常見的尺寸有：2.4，2.8，3.5，3.7，4.2，5.0，5.5，6.0
三、什么是屏幕分辨率?
屏幕分辨率：指橫縱方向上的像素點(diǎn)數(shù)，單位為px,1px=1個(gè)像素點(diǎn)。
一般以縱向像素*橫向像素表示 一個(gè)手機(jī)的屏幕分辨率。如：1960*1080
這里的一個(gè)像素是指物理設(shè)備的一個(gè)像素點(diǎn)。
四、什么是屏幕像素密度?
屏幕像素密度：屏幕上每英寸可以顯示像素點(diǎn)的數(shù)量，單位是ppi(pixels per inch)縮寫。
屏幕像素密度與屏幕尺寸，屏幕分辨率有關(guān)，在單一條件下，屏幕尺寸越小，分辨率越高，像素密度越大，反之越小。
iphone3GS和iphone4區(qū)別：屏幕尺寸一樣，屏幕分辨率相差一倍，屏幕像素密度也相差一倍。
PX:像素，將顯示器分成非常細(xì)小的方格，每一個(gè)方格就是1px。
注:(網(wǎng)頁(yè)重構(gòu)中使用的px 和屏幕分辨率的px不一定是一樣的大小)。
實(shí)際上像素分為兩種：設(shè)備像素和邏輯像素( CSS像素)
DPR：設(shè)備像素比DPR(devicePixelRatio)是默認(rèn)縮放為100%的情況下，設(shè)備像素和CSS像素的比值
在早先的移動(dòng)設(shè)備中，并沒有DPR的概念。隨著技術(shù)的發(fā)展，移動(dòng)設(shè)備的屏幕像素密度越來越高。從iphone4開始蘋果公司推出了所謂的retina視網(wǎng)膜屏幕。之所以叫做視網(wǎng)膜屏幕，是因?yàn)槠聊坏腜PI(屏幕像素密度)太高，人的視網(wǎng)膜無(wú)法分辨出屏幕上的像素點(diǎn)。iphone4的分辨率提高了一倍，但屏幕尺寸卻沒有變化，這意味著同樣大小的屏幕上，像素多了一倍，于是DPR = 2
五、等比縮放布局(rem布局)
1.rem是什么?
rem(font size of the root element)是指相對(duì)于根元素的字體大小的單位。
2.為什么web app要使用rem?
實(shí)現(xiàn)強(qiáng)大的屏幕適配布局(淘寶,騰訊,網(wǎng)易等網(wǎng)站都是rem布局適配)rem能等比例適配所有屏幕,根據(jù)變化html的字體大小來控制rem的大小,
六、vw vh
vw：viewpoint width，視窗寬度，1vw等于視窗寬度的1%。
vh：viewpoint height，視窗高度，1vh等于視窗高度的1%。
vmin：vw和vh中較小的那個(gè)。
vmax：vw和vh中較大的那個(gè)。
vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，iOS safari 8+支持，Android browser4.4+支持，chrome for android39支持
七、Rem配合VW做等比縮放布局
1.rem
rem是指相對(duì)于根元素的字體大小的單位。
2.根元素
如果根元素是相對(duì)設(shè)備尺寸自動(dòng)變換。
3.VW
視窗寬度，1vw等于視窗寬度的1%。
4.VW轉(zhuǎn)換成PX賦值給font-size
例：設(shè)備的分辨率為640*1136，邏輯像素為320*568 1VW=3.2px
Font-size:100px;轉(zhuǎn)換成VW font-size:31.25vw;
1rem=31.25vw可一起結(jié)合寫等比例縮放布局。
八、100%布局(彈性布局)
實(shí)現(xiàn)方案：采用PX方式，借助彈性盒實(shí)現(xiàn)。
九、等比例縮放布局(rem布局)
1.html{font-size:31.25vw(可變:設(shè)計(jì)稿);}
31.25vw=100px(50px或100px為基準(zhǔn)單位(好算))/3.2px
3.2px=320(視口寬度)/100(1vw等于視窗寬度的1%。)
元素大小(rem)=原圖量尺寸/dpr/100(50px、100px為基準(zhǔn)單位(好算))
2，用媒體查詢?cè)O(shè)置html的font-size配合rem(設(shè)置判斷條件的節(jié)點(diǎn))
3, 通過JS動(dòng)態(tài)設(shè)置html的font-size同樣元素單位也要配合rem實(shí)現(xiàn)等比例縮放布局。
移動(dòng)端中我們經(jīng)常碰到橫屏豎屏的問題，那么我們應(yīng)該如何去判斷或者針對(duì)橫屏、豎屏來寫不同的代碼呢。
豎屏引用
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
@media screen and (orientation: portrait) {
/*豎屏 css*/
}
@media screen and (orientation: landscape) {
/*橫屏 css*/
}
、HTML5：乘風(fēng)而起，終迎爆發(fā)。超文本標(biāo)記語(yǔ)言（HTML）是網(wǎng)頁(yè)的基礎(chǔ)和規(guī)范，HTML5 是HTML 的第五代應(yīng)用規(guī)范。它從概念提出到標(biāo)準(zhǔn)確立走過了曲折的發(fā)展道路。隨著硬件升級(jí)、軟件成熟和操作系統(tǒng)廠商策略變化，HTML5 在移動(dòng)端憑借其跨平臺(tái)、成本低、實(shí)時(shí)更新等優(yōu)勢(shì)在廣告、App 和游戲領(lǐng)域應(yīng)用廣闊。
2、HTML5 廣告，帶來移動(dòng)營(yíng)銷新風(fēng)尚。中國(guó)移動(dòng)營(yíng)銷市場(chǎng)迅速擴(kuò)張，預(yù)計(jì)到2018 年將突破3000 億元。過去一年里，HTML5營(yíng)銷案例層出不窮，HTML5 廣告快速發(fā)展并顛覆傳統(tǒng)廣告形式。
專業(yè)的HTML5 廣告公司已經(jīng)興起并在移動(dòng)廣告產(chǎn)業(yè)鏈中占據(jù)重要地位。
3、巨頭搶灘，布局Web 化應(yīng)用生態(tài)圈。Web App 與原生App 從開發(fā)到應(yīng)用上各有優(yōu)劣。雖然原生App 因其用戶體驗(yàn)好、功能強(qiáng)大等優(yōu)勢(shì)占據(jù)主導(dǎo)地位，但Web App 成本低、跨平臺(tái)、安裝方便、實(shí)時(shí)更新等優(yōu)點(diǎn)又吸引了眾多原生App 的注意。在此背景下，混合App 應(yīng)運(yùn)而生。目前70%以上的原生App 都已經(jīng)嵌入了HTML5 技術(shù)，微信等流量巨頭也開始布局Web 化應(yīng)用生態(tài)圈。隨著HTML5 技術(shù)的不斷進(jìn)步，Web App 與原生App 的融合將不斷加速。
4、HTML5 游戲——移動(dòng)游戲新藍(lán)海。原生游戲競(jìng)爭(zhēng)日趨激烈，增速放緩并有寡頭化趨勢(shì)，業(yè)內(nèi)眾多廠商瞄準(zhǔn)HTML5 游戲。2015年，HTML5 游戲數(shù)量和用戶規(guī)模穩(wěn)步增長(zhǎng)，游戲內(nèi)容向中重度化發(fā)展，分發(fā)渠道不斷創(chuàng)新，加之資本入駐的催熟，HTML5 游戲有望成為移動(dòng)游戲新藍(lán)海。
5、投資標(biāo)的：HTML5 將在廣告、App 和游戲領(lǐng)域繼續(xù)深入應(yīng)用，深刻改變移動(dòng)互聯(lián)網(wǎng)生態(tài)并使超媒體概念深入人心。未來HTML5投資的主線是技術(shù)進(jìn)步和應(yīng)用創(chuàng)新。建議關(guān)注新三板HTML5 龍頭公司，比如點(diǎn)點(diǎn)客、白鷺科技、財(cái)貓網(wǎng)絡(luò)；以及A 股業(yè)務(wù)拓展和轉(zhuǎn)型HTML5 領(lǐng)域的傳統(tǒng)廣告、游戲公司，比如藍(lán)色光標(biāo)、掌趣科技、游久游戲。
風(fēng)險(xiǎn)提示：
1、HTML5 應(yīng)用普及不達(dá)預(yù)期。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
