移動端開發佈局

一 viewport:

   視口、viewport就是在瀏覽器上承載顯示頁面的視口。不管你的手機有多寬，在手機瀏覽器內部的寬度，始終會是瀏覽器自己的viewport。

二 控制viewport：

  在瀏覽pc端網頁的時候，由於目前主流瀏覽器的viewport是980px，因此pc端頁面正常顯示；而手機屏幕寬度麼有980px，因此瀏覽器會出現滾動條，同時，即便是基於980的viewport，咱們在移動端瀏覽咱們的pc頁面的體驗其實也並很差，因此，通常的，咱們會專門給瀏覽器設計一個移動端的頁面。

 控制viewport 寫法：在head裏面    meta:vp+tab  ;

viewport默認有6個屬性

• width: 設置viewport的寬度（即以前所說起到的，瀏覽器的寬度詳），這裏能夠爲一個整數，又或者是字符串"width-device"
• initial-scale: 頁面初始的縮放值，爲數字，能夠是小數
• minimum-scale: 容許用戶的最小縮放值，爲數字，能夠是小數
• maximum-scale: 容許用戶的最大縮放值，爲數字，能夠是小數
• height: 設置viewport的高度（咱們通常而言並不能用到）
• user-scalable: 是否容許用戶進行縮放，'no'爲不容許，'yes'爲容許

三 rem佈局：我的習慣

    一、給html 標籤 設置 font-size：100px;

    二、引入一段js控制：

(function (doc, win) {
	var docEl = doc.documentElement,
	resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
	recalc = function () {
	var clientWidth = docEl.clientWidth;
	if (!clientWidth) return;
	if(clientWidth>=640){
	docEl.style.fontSize = '100px';
	}else{
	docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
	}
	};
	if (!doc.addEventListener) return;
	win.addEventListener(resizeEvt, recalc, false);
	doc.addEventListener('DOMContentLoaded', recalc, false);
	})(document, window);

    拿到設計圖時 （假設是 640px的設計圖） 圖中的尺寸 除以100就是 實際的大小。

4、文字適配問題：(用rem 仍是px)

    rem： 可讓頁面總體的文字，也跟隨着html的font-size來進行改變，在任何屏幕下面，咱們的文字都會根據屏幕作一個適應。

     px:固定的尺寸；

   按項目狀況考慮：試想這樣一個場景。你買了一個大屏手機（5.7寸的），而別人用的是4寸的手機。以rem做爲字體單位的話，那大屏手機看到的文字多少和小屏手機確實同樣的了。這樣來作，其實並不符合咱們買大屏手機的期待。同時，以rem做爲字體單位，可能會致使出現不少奇怪的字體大小（畢竟是根據html的font-size動態變化的嘛），同時這其中還涉及到了一個點陣尺寸的概念。

  

【假若一個字體，只提供了12px，14px，16px的點陣。那麼當你寫13px，15px，17px的時候。就並無其字體大小所對應的點陣。那麼這樣就形成了一個問題。他們會使用其相鄰的點陣，好比對應使用了12px，14px，16px的點陣，而致使一個問題，文字佔用的大小確實改變，但點陣卻並無改變。】

 

問題 一; 由於文字有一個瀏覽器最小font-size的緣由 （也多是ipone的dpr緣由）我在項目中設定的字體  在ipone4下 顯示 可能小於最小值 因此在ipone下有幾個字超出容器， 顯示效果很差。 

   解決辦法：用 css3的 scale 屬性  講容器總體縮放。。。