bootstrap響應式網頁

時間 2019-11-24

原文原文鏈接

使用bootstrap來完成頁面的響應式佈局，如下內容有viewport、柵格佈局、單位、字體圖標css

bootstrap響應式網頁的特色：

事業開闊多變、信息豐富
排版新穎隨意、設計師發揮空間較大
適用於PC和手機端

viewport

移動端格式：
代碼：html

<meta type="viewport" content="width=device-width,initial-scale=1,maxmum-scale=1,minimum-scale=1,user-scalable=no ">
複製代碼

屬性	屬性詳細	備註
width	寬	移動端寬度
height	高	移動端高度
initial-scale	初始縮放比例，也便是當頁面第一次 load 的時候縮放比例	網頁倍數1/2/...
maxmum-scale	最大倍數	1/2/...
minimum-scale	最小倍數	1/2/...
user-scaleble	用戶是否可縮小/放大網頁	yes/no
device-width	可代替width，自動獲取

電腦像素：1024x768前端

前端面試問題：手機端如ipone等較爲高清的移動端原始網頁邊線、邊框、分隔線變粗了應如何解決面試

阿里淘寶裏面手機端解決方案：判斷是不是視網膜屏（Retina 顯示屏），若是是就把scale動態換成0.5（縮小一倍），或者縮小相應的倍數。手機端開發-ip3以上 initial-scale:0.3/0.5；用js文件動態生成meta中initial-scale倍數問題bootstrap

柵格佈局

bootstrap中的響應式開發原理是柵格佈局，將屏幕橫向分爲12等份。瀏覽器

字符表明	屏幕大小範圍	劃分
xs	＜768px	超小屏幕手機
sm	768-992px	小屏幕平板
md	992-1200px	正常屏幕筆記本正常電腦
lg	>1200px	超大屏電腦，顯示器

元素能夠給根據不一樣屏幕的大小適應相應的大小，如col-lg-3 col-md-4 col-sm-6 col-xs-12 col-lg-offset-3 col-md-offset-4bash

col-lg-3：表示在大屏幕元素寬度大小爲屏幕的3/12,佔3份，即1/4,佈局

col-md-4：表示在中等屏幕元素寬度大小爲屏幕的1/3,字體

col-sm-6：表示在小屏幕元素寬度大小爲屏幕的1/2,ui

col-xs-12：表示在極小屏幕元素寬度大小佔滿整個屏幕大小。

col-lg-offset-3：表示在大屏幕中元素的位置，距離屏幕左邊爲屏幕大小的1/4,

col-md-offset-4：表示在中等屏幕中元素的位置，距離屏幕左邊爲屏幕大小的1/3

1.不一樣屏幕顯示不一樣效果（原理）
<head>
<style>
    .test{
        width:100px;
        height: 200px;
        background: red;
    }
    @media screen and (max-width:900px;) and (min-width:500px){
        width:100%;
        height: 200px; 
        background: blue;
    }
</style>
</head>
<body>
    <div class="test"></div>
</body>

2.柵格
<head>
<style>
    .test{
        height: 200px; 
        background: red;
    }
</style>
</head>
<body>
    <div class="test col-lg-3 col-md-4 col-sm-6 col-xs-12 col-lg-offset-3 col-md-ossset-4"></div>
    <!--在超大屏幕中佔1/4，普通佔1/3 平板1/2 手機1/1  超大屏幕中偏移1/4 普通偏移1/3-->
</body>
複製代碼

單位

相對於顯示屏幕分辨率的長度單位，但其大小沒法跟隨屏幕放大縮小，不過全部的瀏覽器都支持px單位

1em=16px
匯繼承父級元素的字體大小
IE瀏覽器不支持em

rem

與em相似
會繼承根元素的字體大小
html{ font-size:62.5%; }
即HTML的字體大小爲62.5%*16px=10px，因此，10px=1em（我也不知道怎麼就得出這個了）。因此若是要設置字體大小爲16px，只須要設置字體大小爲1.6rem。
若是有兼容性問題,設置字體大小的px寫在前面，rem寫在後面。用rem覆蓋px，就解決兼容性

字體圖標

特色

體積小便於加載-
無需重複設計-
方便引用
bootstrap官方字體圖標v3.bootcss.com/components/，記得引用

<head>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
    .glyphicon-asterisk{
        color: #02a6e3;
        font-size: 100px;
    }
    </style>
</head>

<body>
    <span class="glyphicon glyphicon-asterisk"></span>
</body>
複製代碼