整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
以下HTML標(biāo)記用于格式化網(wǎng)頁上文本的外觀。這可以使網(wǎng)頁變得更加生動(dòng)，但是，文本格式的太多變化也會(huì)使人不快。
head標(biāo)記有6個(gè)級(jí)別可用，從h1用于最大和最重要的標(biāo)題，到h6是最小的標(biāo)題。
b標(biāo)記之間的文本以粗體顯示，與周圍的文本相對(duì)突出。
i標(biāo)記以一個(gè)小角度顯示文本。
u標(biāo)記在文本正文添加一條線，請(qǐng)注意，鏈接已經(jīng)有下劃線，不需要額外的標(biāo)記。
strike標(biāo)記在文本的正中間畫一條線，通常用來表示文本是舊的，不再相關(guān)，刪除。也可以用<s></s>代替。
pre標(biāo)記之間的任何文本，包括空格、回車符和標(biāo)點(diǎn)符號(hào)，都將像在文本編輯器中一樣顯示在瀏覽器中（通常瀏覽器會(huì)忽略多個(gè)空格）
code標(biāo)記之間的文本以固定寬度字體顯示，通常在顯示源代碼時(shí)使用。
tt標(biāo)記之間的文本就像是用打字機(jī)打出了一個(gè)固定寬度的文字。
blockquote標(biāo)記定義一個(gè)塊引用，并且在塊的左右添加額外的邊距。
small標(biāo)記讓你無需設(shè)置字體大小，就可以使文本呈現(xiàn)比周圍稍小的外觀。
font標(biāo)記的color屬性改變幾個(gè)字或一段文字的顏色。屬性使用十六進(jìn)制顏色代碼。
font標(biāo)記的size屬性改變字體的大小，值范圍從1到7，1是最小，7是最大。
font標(biāo)記的size屬性還可以相對(duì)于其前面的字體大小的作即時(shí)更改，此用法將按你指定的數(shù)字增減字體大小。例如：<font size="-1">一些文本</font>
font標(biāo)記的face屬性以指定的字體顯示文本，值為字體名稱，如“Helvetica”、“Arial”或“Courier”。
center標(biāo)記之間的所有內(nèi)容都居中。
em標(biāo)記用于強(qiáng)調(diào)文本，文本通常以斜體顯示，可能會(huì)根據(jù)瀏覽器的不同而有所不同。
strong標(biāo)記用于著重強(qiáng)調(diào)文本，通常以粗體顯示，可能會(huì)根據(jù)瀏覽器的不同而有所不同。
下面是以上標(biāo)記的示例：
瀏覽器顯示內(nèi)容如下所示：
用方案
1、設(shè)置根 font-size：625%（或其它自定的值，但換算規(guī)則 1rem 不能小于 12px）
2、通過媒體查詢分別設(shè)置每個(gè)屏幕的根 font-size
3、CSS 直接除以 2 再除以 100 即可換算為 rem
優(yōu)：有一定適用性，換算也較為簡單。
劣：有兼容性的坑，對(duì)不同手機(jī)適配不是非常精準(zhǔn)；需要設(shè)置多個(gè)媒體查詢來適應(yīng)不同手機(jī)，單某款手機(jī)尺寸不在設(shè)置范圍之內(nèi)，會(huì)導(dǎo)致無法適配。
網(wǎng)易方案
1、拿到設(shè)計(jì)稿除以 100，得到寬度 rem 值
2、通過給 html 的 style 設(shè)置 font-size，把 1 里面得到的寬度 rem 值代入x document.documentElement.style.fontSize =document.documentElement.clientWidth / x + ‘px‘;
3、設(shè)計(jì)稿 px/100 即可換算為 rem
優(yōu)：通過動(dòng)態(tài)根 font-size 來做適配，基本無兼容性問題，適配較為精準(zhǔn)，換算簡便。
劣：無 viewport 縮放，且針對(duì) iPhone 的 Retina 屏沒有做適配，導(dǎo)致對(duì)一些手機(jī)的適配不是很到位。
手淘方案
1、拿到設(shè)計(jì)稿除以 10，得到 font-size 基準(zhǔn)值
2、引入 flexible
3、不要設(shè)置 meta 的 viewport 縮放值
4、設(shè)計(jì)稿 px/ font-size 基準(zhǔn)值，即可換算為 rem
優(yōu)：通過動(dòng)態(tài)根 font-size、viewpor、dpr 來做適配，無兼容性問題，適配精準(zhǔn)。
劣：需要根據(jù)設(shè)計(jì)稿進(jìn)行基準(zhǔn)值換算，在不使用 sublime text 編輯器插件開發(fā)時(shí)，單位計(jì)算復(fù)雜。
一、 彈性布局(100%布局)的特點(diǎn)
頂部與底部的bar不管分辨率怎么變，它的?度和位置都不變; 中間每條招聘信息不管分辨率怎么變，招聘公司的圖標(biāo)等信息 都位于條目的左邊，薪資都位于右邊.
特點(diǎn)：關(guān)鍵元素高寬和位置都不變，只有容器元素在做伸縮變換。對(duì)于這類app，記住一個(gè)開發(fā)原則就好：文字流式，控件彈性，圖片等比縮放
二、什么是屏幕尺寸?
移動(dòng)端屏幕尺寸:屏幕對(duì)角線的長度，單位是英寸(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)頁重構(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)膜無法分辨出屏幕上的像素點(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)等比例縮放布局。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
