整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
以下HTML標記用于格式化網頁上文本的外觀。這可以使網頁變得更加生動，但是，文本格式的太多變化也會使人不快。
head標記有6個級別可用，從h1用于最大和最重要的標題，到h6是最小的標題。
b標記之間的文本以粗體顯示，與周圍的文本相對突出。
i標記以一個小角度顯示文本。
u標記在文本正文添加一條線，請注意，鏈接已經有下劃線，不需要額外的標記。
strike標記在文本的正中間畫一條線，通常用來表示文本是舊的，不再相關，刪除。也可以用<s></s>代替。
pre標記之間的任何文本，包括空格、回車符和標點符號，都將像在文本編輯器中一樣顯示在瀏覽器中（通常瀏覽器會忽略多個空格）
code標記之間的文本以固定寬度字體顯示，通常在顯示源代碼時使用。
tt標記之間的文本就像是用打字機打出了一個固定寬度的文字。
blockquote標記定義一個塊引用，并且在塊的左右添加額外的邊距。
small標記讓你無需設置字體大小，就可以使文本呈現比周圍稍小的外觀。
font標記的color屬性改變幾個字或一段文字的顏色。屬性使用十六進制顏色代碼。
font標記的size屬性改變字體的大小，值范圍從1到7，1是最小，7是最大。
font標記的size屬性還可以相對于其前面的字體大小的作即時更改，此用法將按你指定的數字增減字體大小。例如：<font size="-1">一些文本</font>
font標記的face屬性以指定的字體顯示文本，值為字體名稱，如“Helvetica”、“Arial”或“Courier”。
center標記之間的所有內容都居中。
em標記用于強調文本，文本通常以斜體顯示，可能會根據瀏覽器的不同而有所不同。
strong標記用于著重強調文本，通常以粗體顯示，可能會根據瀏覽器的不同而有所不同。
下面是以上標記的示例：
瀏覽器顯示內容如下所示：
用方案
1、設置根 font-size：625%（或其它自定的值，但換算規則 1rem 不能小于 12px）
2、通過媒體查詢分別設置每個屏幕的根 font-size
3、CSS 直接除以 2 再除以 100 即可換算為 rem
優：有一定適用性，換算也較為簡單。
劣：有兼容性的坑，對不同手機適配不是非常精準；需要設置多個媒體查詢來適應不同手機，單某款手機尺寸不在設置范圍之內，會導致無法適配。
網易方案
1、拿到設計稿除以 100，得到寬度 rem 值
2、通過給 html 的 style 設置 font-size，把 1 里面得到的寬度 rem 值代入x document.documentElement.style.fontSize =document.documentElement.clientWidth / x + ‘px‘;
3、設計稿 px/100 即可換算為 rem
優：通過動態根 font-size 來做適配，基本無兼容性問題，適配較為精準，換算簡便。
劣：無 viewport 縮放，且針對 iPhone 的 Retina 屏沒有做適配，導致對一些手機的適配不是很到位。
手淘方案
1、拿到設計稿除以 10，得到 font-size 基準值
2、引入 flexible
3、不要設置 meta 的 viewport 縮放值
4、設計稿 px/ font-size 基準值，即可換算為 rem
優：通過動態根 font-size、viewpor、dpr 來做適配，無兼容性問題，適配精準。
劣：需要根據設計稿進行基準值換算，在不使用 sublime text 編輯器插件開發時，單位計算復雜。
一、 彈性布局(100%布局)的特點
頂部與底部的bar不管分辨率怎么變，它的?度和位置都不變; 中間每條招聘信息不管分辨率怎么變，招聘公司的圖標等信息 都位于條目的左邊，薪資都位于右邊.
特點：關鍵元素高寬和位置都不變，只有容器元素在做伸縮變換。對于這類app，記住一個開發原則就好：文字流式，控件彈性，圖片等比縮放
二、什么是屏幕尺寸?
移動端屏幕尺寸:屏幕對角線的長度，單位是英寸(1英寸=2.54厘米)。
常見的尺寸有：2.4，2.8，3.5，3.7，4.2，5.0，5.5，6.0
三、什么是屏幕分辨率?
屏幕分辨率：指橫縱方向上的像素點數，單位為px,1px=1個像素點。
一般以縱向像素*橫向像素表示 一個手機的屏幕分辨率。如：1960*1080
這里的一個像素是指物理設備的一個像素點。
四、什么是屏幕像素密度?
屏幕像素密度：屏幕上每英寸可以顯示像素點的數量，單位是ppi(pixels per inch)縮寫。
屏幕像素密度與屏幕尺寸，屏幕分辨率有關，在單一條件下，屏幕尺寸越小，分辨率越高，像素密度越大，反之越小。
iphone3GS和iphone4區別：屏幕尺寸一樣，屏幕分辨率相差一倍，屏幕像素密度也相差一倍。
PX:像素，將顯示器分成非常細小的方格，每一個方格就是1px。
注:(網頁重構中使用的px 和屏幕分辨率的px不一定是一樣的大小)。
實際上像素分為兩種：設備像素和邏輯像素( CSS像素)
DPR：設備像素比DPR(devicePixelRatio)是默認縮放為100%的情況下，設備像素和CSS像素的比值
在早先的移動設備中，并沒有DPR的概念。隨著技術的發展，移動設備的屏幕像素密度越來越高。從iphone4開始蘋果公司推出了所謂的retina視網膜屏幕。之所以叫做視網膜屏幕，是因為屏幕的PPI(屏幕像素密度)太高，人的視網膜無法分辨出屏幕上的像素點。iphone4的分辨率提高了一倍，但屏幕尺寸卻沒有變化，這意味著同樣大小的屏幕上，像素多了一倍，于是DPR = 2
五、等比縮放布局(rem布局)
1.rem是什么?
rem(font size of the root element)是指相對于根元素的字體大小的單位。
2.為什么web app要使用rem?
實現強大的屏幕適配布局(淘寶,騰訊,網易等網站都是rem布局適配)rem能等比例適配所有屏幕,根據變化html的字體大小來控制rem的大小,
六、vw vh
vw：viewpoint width，視窗寬度，1vw等于視窗寬度的1%。
vh：viewpoint height，視窗高度，1vh等于視窗高度的1%。
vmin：vw和vh中較小的那個。
vmax：vw和vh中較大的那個。
vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，iOS safari 8+支持，Android browser4.4+支持，chrome for android39支持
七、Rem配合VW做等比縮放布局
1.rem
rem是指相對于根元素的字體大小的單位。
2.根元素
如果根元素是相對設備尺寸自動變換。
3.VW
視窗寬度，1vw等于視窗寬度的1%。
4.VW轉換成PX賦值給font-size
例：設備的分辨率為640*1136，邏輯像素為320*568 1VW=3.2px
Font-size:100px;轉換成VW font-size:31.25vw;
1rem=31.25vw可一起結合寫等比例縮放布局。
八、100%布局(彈性布局)
實現方案：采用PX方式，借助彈性盒實現。
九、等比例縮放布局(rem布局)
1.html{font-size:31.25vw(可變:設計稿);}
31.25vw=100px(50px或100px為基準單位(好算))/3.2px
3.2px=320(視口寬度)/100(1vw等于視窗寬度的1%。)
元素大小(rem)=原圖量尺寸/dpr/100(50px、100px為基準單位(好算))
2，用媒體查詢設置html的font-size配合rem(設置判斷條件的節點)
3, 通過JS動態設置html的font-size同樣元素單位也要配合rem實現等比例縮放布局。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
