響應式開發---網頁的佈局方式、媒體查詢、柵格化佈局、less語言

一、響應式開發介紹

　　a、網頁佈局方式

　　　　

　　b、響應式佈局

　　　　

　　　　優勢：用一個頁面適配不一樣終端的展現

　　　　缺點：產生代碼冗餘，同時使網頁體積變得很龐大，不會由於終端的改變而改變網頁的體積，不一樣終端上有些沒有顯示出來的實際上也加載個渲染了只是看不到，可是那些資源都請求了，那對瀏覽頁面速度和流量而言影響也很大，因此在移動端會帶來性能問題

　　　　

　　　　

二、媒體查詢介紹和應用

　　　　

　　　　

　　　　媒體查詢用法

　　　　一、第一種

　　　　　　

　　　　二、第二種

　　　　

　　　　

 

　　　　

三、bootstrap介紹

　　css框架----組件框架----強大之處在於響應式佈局（柵格化佈局 ）

　　

　　　　bootstrap框架

　　　　

　　　　

　　　　

　　　　bootstrap使用----bootstrap是基於jquery的css框架

　　　　　　一、下載包

　　　　　　二、使用

　　　　　　　　a、設置meta，引入文件------搭建bootstrap運行環境

　　　　　　　　

　　　　　　　　b、運用組件

　　　　　　　　　　　　不單單是簡單的複製代碼，你能夠本身去修改樣式，定製效果

　　　　　　　　

　　　　柵格化佈局

　　　　　　12等分  流式佈局（放不下的自動換行）　

　　　　　　

　　　　　　

 　　　　　　

　　　　　　其餘的柵格樣式

　　　　　　

　　　　　　

　　　　　　

　　　　設置元素是否在某一個屏幕下隱藏

　　　　

　　　　源碼

　　　　

四、less語法

　　　　

　　　　

　　　

　　　　less環境的安裝和使用

　　　　less裏有工具把  .less文件編譯解析生成一個對應的   .css文件

　　　　less語法說明

　　　　　　註釋：

                               

　　　　　　變量：

　　　　　　　　

　　　　　　混入（函數）：

　　　　　　　　

　　　　　　嵌套：用的最多的