移動端字型自適應
完美適口：
移動裝置上的viewport就是裝置的螢幕上能用來顯示我們的網頁的那一塊區域
就是瀏覽器上(也可能是一個app中的webview)用來顯示網頁的那部分割槽域，但viewport又不侷限於瀏覽器可視區域的大小，它可能比瀏覽器的可視區域要大，也可能比瀏覽器的可視區域要小。在預設情況下，一般來講，移動裝置上的viewport都是要大於瀏覽器可視區域的，這是因為考慮到移動裝置的解析度相對於桌面電腦來說都比較小，所以為了能在移動裝置上正常顯示那些傳統的為桌面瀏覽器設計的網站，移動裝置上的瀏覽器都會把自己預設的viewport設為980px或1024px（也可能是其它值，這個是由裝置自己決定的），但帶來的後果就是瀏覽器會出現橫向滾動條，因為瀏覽器可視區域的寬度是比這個預設的viewport的寬度要小的。
為了使開發出來的應用或頁面大小能適合各種高階手機使用，我們採用了h5的viewport來解決手機解析度和螢幕大小的不同
<meta name="viewport"
content="
height = [pixel_value | device-height] ,
width = [pixel_value | device-width ] ,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] , | 屬性 | 解釋 |
|---|---|
| width | 控制控制 viewport 的寬度，可以指定的一個值或者特殊的值，如 device-width 為裝置的寬度（單位為縮放為 100% 時的 CSS 的畫素） |
| height | 控制 viewport 的高度 |
| initial-scale | 頁面初始縮放程度。這是一個浮點值，是頁面大小的一個乘數。 |
| minmum-scale | 最小縮放。即允許的最小縮放程度。這也是一個浮點值 |
| maxmum-scale | 最大縮放。即允許的最大縮放程度。這也是一個浮點值 |
| user-scalable | 使用者調整縮放。即使用者是否能改變頁面縮放程度。如果設定為yes則是允許使用者對其進行改變，反之為no。預設值是yes。 如果你將其設定為no，那麼minimum-scale 和 maximum-scale都將被忽略，因為根本不可能縮放。 所有的縮放值都必須在0.01–10的範圍之內。 |
| target-densitydpi | 一個螢幕畫素密度是由螢幕解析度決定的，通常定義為每英寸點的數量（dpi）。Android支援三種螢幕畫素密度：低畫素密度，中畫素密度，高畫素密度。Android Browser和WebView預設螢幕為中畫素密度。 |
下面是 target-densitydpi 屬性的取值範圍
| 屬性 | 詳情 |
|---|---|
| device-dpi | 使用裝置原本的 dpi 作為目標 dp。 不會發生預設縮放。 |
| high-dpi | 使用hdpi 作為目標 dpi。 中等畫素密度和低畫素密度裝置相應縮小。 |
| medium-dpi | 使用mdpi作為目標 dpi。 高畫素密度裝置相應放大， 畫素密度裝置相應縮小。 這是預設的target density。 |
| low-dpi | 使用ldpi作為目標 dpi。中等畫素密度和高畫素密度裝置相應放大。 |
| value | 指定一個具體的dpi 值作為target dpi. 這個值的範圍必須在70–400之間。 |
常用的例子：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />DPR
畫素大小是基於顯像單元的數量來描述的，也就是說，不在乎其真實大小是多少，只關心使用了多少個方塊單元來顯示,如下圖所示都是1px
DPR = 物理畫素/邏輯畫素
看得到的是邏輯畫素，是根據方塊格數來定義的，所以真正決定顯示效果的，是邏輯畫素尺寸。
為此，iOS和Android平臺都定義了各自的邏輯畫素單位。iOS的尺寸單位為pt，Android的尺寸單位為dp。說實話，兩者其實是一回事。
單位之間的換算關係隨倍率變化：
| 倍率 | 單位換算 | 常用裝置 |
|---|---|---|
| 1倍 | 1pt=1dp=1px | mdpi、iPhone 3gs |
| 1.5倍 | 1pt=1dp=1.5px | hdpi |
| 3倍 | 1pt=1dp=3px | xxhdpi、iPhone 6 plus |
| 4倍 | 1pt=1dp=4px | xxxhdpi |
以iphone6為例，在不做任何縮放的條件下，iphone6的獲取到的’width-device’為375px,為螢幕的邏輯畫素，可用”width-device”獲得。而購買時我們所知的750px，則為螢幕的物理畫素。因為iphone6的倍率是2，所以在製作頁面時，只需要按照基準倍率就行。無論什麼樣的螢幕，倍率是多少，都按邏輯畫素尺寸來設計和開發頁面,設定。
border: 1px solid #000;
此時我們寫的1px，實際上是邏輯畫素，而我們在iphone6上看到的是物理畫素，於是這個時候，我們眼睛所看到的其實是2px
字型單位
| 單位 | 含義 |
|---|---|
| 畫素（Pixel） | 相對長度單位。畫素px是相對於顯示器螢幕解析度而言的 |
| em | 相對長度單位。相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。 |
| rem | css3新增相對長度單位，但相對的只是HTML根元素 |
em
1.任意瀏覽器的預設字型高都是16px。
所有未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em,10px=0.625em。
為了簡化font-size的換算，需要在css中的body選擇器中宣告font-size=62.5%，這就使em值變為 16px*62.5%=10px,也就 是說只需要將你的原來的px數值除以10，然後換上em作為單位就行了，如12px=1.2em, 10px=1em。
但是要注意所有字型都是相對於當前物件的，要小心字型大小的疊加
/*樣式*/
<style>
html{
font-size: 62.5%;
}
p{
font-size: 1.6em;
}
i{
font-size: 2em;
}
</style>
/*主體*/
<body>
<div>
我是文字1
<p>我是文字2
<i>我是文字3</i>
</p>
</div>
</body>
- rem
通過它既可以做到只修改根元素就成比例地調整所有字型大小，又可以避免字型大小逐層複合的連鎖反應。目前，除了IE8及更早版本外，所有瀏覽器均已支援rem。
修改上面程式碼的字型單位為rem,且設定html的預設字型大小為font-size: 12px;結果如下圖所示：
字型自適應
法一：媒體查詢
@media screen and (max-width: 300px) {
//文件寬度小於 300 畫素時的CSS樣式
}法二：利用 rem
利用rem作為字型大小的單位時，要利用下述的js程式碼來控制字型自適應
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);注意：利用rem作為字型單位時，最好要設定body的字型大小，如果設定html的字型，body裡面的所有元素都會有一個font-size，這就會導致元素之間不能對齊，出現偏移。
相關推薦
設計稿750px移動端字型自適應，1rem=100px
<script type="text/javascript"> //JS監聽瀏覽器文字大小程式碼 "use strict"; (function (doc, win) { var
移動端字型自適應
完美適口： 移動裝置上的viewport就是裝置的螢幕上能用來顯示我們的網頁的那一塊區域 就是瀏覽器上(也可能是一個app中的webview)用來顯示網頁的那部分割槽域，但viewport又不侷限於瀏覽器可視區域的大小，它可能比瀏覽
移動端常見自適應圖片載入時頁面塌陷問題解決方案
<style> .box{ width:100%; height:0; overflow:hidden; padding-bottom:24.6%; } img{ width:100%; } </style> <div class="box"&
移動端螢幕自適應的js設定和css設定講解
1，js需要的設定 (function () { var b = document.documentElement, a = function () { var a = b.getBoundingClientRect().width; b.style.fontS
淺談移動端的自適應問題——響應式、rem/em、利用Js動態實現移動端自適應
隨著3G的普及，越來越多的人使用手機上網。移動裝置正超過桌面裝置，成為訪問網際網路的最常見終端。於是，網頁設計師不得不面對一個難題：如何才能在不同大小的裝置上呈現同樣的網頁？本篇文章將講述自適應網頁設計的概念和方法，使網頁開發人員維護同一個網頁程式碼，即可使網站在多種裝置上具
移動端rem自適應方案
假設設計妹妹給我們的設計稿尺寸為750 * 1340。結合網易、淘寶移動端首頁html元素上的font-size屬性，html5設計稿尺寸以及前端與設計之間協作流程一般分為下面兩種： 一、網易做法： 引入：頁面開頭處引入下面這段程式碼，用於動態計算font-size
移動端的自適應rem佈局
相信很多剛開始寫移動端頁面的同學都要面對頁面自適應的問題，當然解決方案很多，比如：百分比佈局，彈性佈局flex（什麼是flex），也都能獲得不錯的效果，這裡主要介紹的是本人在實踐中用的最順手最簡單的佈局方案——rem（什麼是rem）佈局 rem佈局非常簡單，首頁你只需在
Html5移動端頁面自適應佈局詳解(rem佈局)
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title>
淺談PC和移動端的自適應
做網頁時，我們通常需要考慮到不同電腦螢幕尺寸，以及不同手機螢幕大小等問題，解決樣式發生改變的情況，那麼如何解決呢？現在主要是採用自適應來解決高度，寬度的，以及圖片自適應問題，下面就PC端和移動端來總結一下，通常進行自適應高度和寬度，圖片時，一般與頁面的佈局存在關係。
關於一個前端移動端高度自適應例子
這兩天做專案，在對移動端前端頁面做頁面高度自適應固定時遇到了問題，顯示效果是：整個頁面為一個整體，上半部分顯示地圖，下半部分顯示對應的駕校班型（我們是做駕校產品的），地圖沒有上間距，和班型下間距1-2個rem，班型和底部按鈕間距為1-2rem，適應於不同手機和不同大
移動端webapp自適應佈局
0.一些基礎 請看這篇：HcySunYang的blog：一篇真正教會你開發移動端頁面的文章(二) width=device-width 這段程式碼是讓佈局視口的尺寸等於理想視口。 裝置畫素比（DPR） = 裝置畫素個數 / 理想視口畫素個數（device-
【Vue】Vue移動端頁面自適應解決方案
移動端頁面自適應解決方案 該方案使用相當簡單，把下面這段已壓縮過的 原生JS（僅1kb，原始碼已在文章底部更新，2017/5/3） 放到 HTML 的 head 標籤中即可（注:不要手動設定viewport，該方案自動幫你設定） <scri
移動端的自適應佈局神器—Flex Box(2)
之前的例子中，都是按照水平方向為例的，這些例子中的元素，高度都是相同的。如果元素的高度不同，在縱向方向上，也需要設定一些對齊方式。Flex佈局中也為我們提供了在另一個方向上對齊的設定，這個屬性就是align-item。align-items有五個選項值，它們分別是：stret
如何在CSS中新增手機端（移動端）自適應樣式
通用手機端樣式： @media all and (orientation : portrait) { /*豎屏*/ } @media all and (orientation : landscape) { /*橫屏*/ } 指定手機端高度樣式： @medi
移動端 圖片自適應
/*移動端圖片自適應 精華 */ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圖片自適應<
用css3解決移動端頁面自適應橫屏豎屏的思考
之前對於橫屏的webapp做過一些嘗試，但是始終不是很好的解決方案，前段時間又接觸了類似的需求，嘗試了感覺更好的解決方案。 這裡舉的例子還是平時常見的移動端的滑動頁面，也就是上下切換頁面的”H5“。 首先要做的準備： 1、html佈局 <div id="wrap"
移動端web自適應適配布局解決方案
理想 適配 dev 還需 line pix ner 問題 max 100%還原設計圖，要註意： 看布局，分析結構。 感覺難點在於： 1.測量精度（ps測量數據）； 2.文字的行高。 前段時間寫個移動端適配的頁面（剛接觸這方面），查了一些資料，用以下方法能實現： 1
移動端(手機端)頁面自適應解決方案—rem佈局篇
動端(手機端)頁面自適應解決方案—rem佈局 假設設計妹妹給我們的設計稿尺寸為750 * 1340。結合網易、淘寶移動端首頁html元素上的動態font-size屬性、設計稿尺寸、前端與設計之間協作流程一般分為下面兩種： 一、網易做法： 引入：頁面開頭處引入下面這段程式
在手機端使用rem。字型自適應。手機端的列表一排兩個
var html = document.documentElement;var whtml =html.getBoundingClientRect().width; //Element.getBoundingClientRect()方法返回元素的大小及其相對於視口的
【移動端】基於rem實現手機端頁面自適應--動態改變dpr和font-size
這兩天還是在寫手機端的那個表單頁面，我好苦惱啊。明明在chrome上除錯的時候都是可以的，但是真的用手機去掃碼看的時候，就出現問題了。 蘋果手機麼有問題，都是根據dpr來設定meta標籤，動態設定font-size，顯示的跟預期的一樣。用三星手機掃也是可以的，