網站響應式佈局/網站自適應問題+rem、em、px、pt及網站字體大小設配

---

• Bootstrap 網格系統；
• Bootstrap CSS；
• Bootstrap 組件及插件；

1、什麼是響應式佈局?

      響應式佈局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站可以兼容多個終端——而不是爲每一個終端作一個特定的版本。

      這個概念是爲解決移動互聯網瀏覽而誕生的。響應式佈局能夠爲不一樣終端的用戶提供更加溫馨的界面和更好的用戶體驗，並且隨着目前大屏幕移動設備的普及，用大勢所趨來形容也不爲過。
 隨着愈來愈多的設計師採用這個技術，咱們不只看到不少的創新，還看到了一些成形的模式。

2、響應式佈局有哪些優勢和缺點?

優勢：

面對不一樣分辨率設備靈活性強
可以快捷解決多設備顯示適應問題
 ####缺點：

兼容各類設備工做量大，效率低下；

代碼累贅，會出現隱藏無用的元素，加載時間加長；

其實這是一種折衷性質的設計解決方案，多方面因素影響而達不到最佳效果；

必定程度上改變了網站原有的佈局結構，會出現用戶混淆的狀況；
 
 ####響應式佈局該怎麼設計?
/* 超小設備（手機，小於 768px） // Bootstrap 中默認狀況下沒有媒體查詢 /
/ 小型設備（平板電腦，768px 起） /@media (min-width: @screen-sm-min) { ... }
/ 中型設備（臺式電腦，992px 起） /@media (min-width: @screen-md-min) { ... }
/ 大型設備（大臺式電腦，1200px 起） */@media (min-width: @screen-lg-min) { ... }

Bootstrap 網格系統：

一個響應式的、移動設備優先的、不固定的網格系統,能夠隨着設備或視口大小的增長而適當地擴展最多 12 列.

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

<!-- 可選的Bootstrap主題文件（通常不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<!-- jQuery文件。務必在bootstrap.min.js 以前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<div class="container">
   <div class="row">
      <div class="col-md-1  col-sm-1"></div>
      <div class="col-md-10  col-sm-10">
             <div class="col-md-4 col-sm-4"></div>
             <div class="col-md-4 col-sm-4"></div>
             <div class="col-md-4 col-sm-4"></div>
      </div>    
      <div class="col-md-1  col-sm-1"></div> 
   </div>

   <div class="row">...</div>
</div>

超小設備收集（<768px）	小型設備平板電腦（≥768px）	中型設備臺式電腦（≥992px）	大型設備臺式電腦（≥1200px）
.col-xs-num	.col-sm-num	.col-md-num	.col-lg-num
列排序:.col-md-push-num  ||  偏移列:.col-md-offset-num  ||   嵌套列:.col-md-num 內嵌套.col-md-num12  ||  可見\隱藏：.visible-xs-bloc  ||  打印機隱藏.hidden-print

媒體查詢(自適應)：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

width = device-width：寬度等於當前設備的寬度

initial-scale： 初始的縮放比例（默認設置爲1.0）

minimum-scale：容許用戶縮放到的最小比例（默認設置爲1.0）

maximum-scale：容許用戶縮放到的最大比例（默認設置爲1.0）

user-scalable：用戶是否能夠手動縮放（默認設置爲no，由於咱們不但願用戶放大縮小頁面）

不一樣大小顯示屏(響應式)：

@media only screen and (max-width:768px){..css樣式..}
@media (max-width: @screen-xs-max) {..css樣式.. }//最大寬度時
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ..css樣式..}//最小和最大寬度之間時

boostrap可視化佈局工具 在線

屏幕適配原理及實現

rem、em、px、pt及網站字體大小設配

• rem:相對的只是HTML根元素字體尺寸;
• em:相對於當前對象內文本的字體尺寸(值不是固定且繼承父級元素的字體大小);
• px像素（Pixel）：對於顯示器屏幕分辨率而言的;
• pt：point，是印刷行業經常使用單位，等於1/72英寸100%=100pt。
• %：相似em。

使用 rem 實現 適配各類屏幕布局

方法一：用JS來動態的設置html的font-size：

(function (doc, win) {
/*初始化 默認寬度、字體、最小最大比例*/
    var init_w = 640,
    init_fs = 10,
    max_scale = 1,
    min_scale = 0.5;
    var docEl = doc.documentElement,
    resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
    recalc = function () {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        var percentage = clientWidth / init_w;
        percentage = percentage > max_scale?max_scale: percentage <min_scale?min_scale: percentage ;

        docEl.style.fontSize = init_fs * percentage + ‘px‘;
    };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener(‘DOMContentLoaded‘, recalc, false);
})(document, window);

另一種利用css3中的 媒體查詢來根據不一樣的屏幕大小來寫定html的font-size：

html {font-size : 10px;}

@media only screen and (min-width: 401px){
html {font-size: 6px !important;}
}

@media only screen and (min-width: 428px){
html {font-size: 6.5px !important;}
}

@media only screen and (min-width: 481px){
html {font-size: 7.25px !important; }
}

@media only screen and (min-width: 569px){
html {font-size: 8.625px !important; }
}

@media only screen and (min-width: 641px){
html {font-size: 10px !important; }
}

注意：

谷歌下css設置字體最小爲12px，因此HTML根元素font-size字體尺寸基數儘可能大:25px 40px 50px 75px 100px

<style>

p{font-size:10px;-webkit-transform:scale(0.8);}
/*這裏的數字0.8，... 0.1是縮放比例，能夠根據狀況變化。*/

</style>

<p>字體10px</p>

px rem em 在線換算工具

---

純屬我的觀點,僅供參考！