前端知識點總結—-響應式
前端知識點總結—-響應式
1.Responsive Web Page:響應式網頁/自適應的網頁2010年提出,
一個網頁，會自動根據用戶瀏覽設備不一樣，自動必變佈局, 能夠被PC/PAD/PHONE 正常瀏覽
2:響應式網頁必備
(1)流式佈局 float:left;
(2)能夠改變尺寸圖片文字 font-size:1em;
響應式佈局不足:代碼更加複雜，不適合大型網頁css
3:如何測試網頁
(1)使用真實物理設備
(2)使用第三方模擬器軟件
(3)使用chrome 內置設備模擬器html
4:如何編寫響應式網頁
(1)聲明viewport元標籤 <meta name="viewport" content="width=device-width, initial-scale=1">
viewport 元標籤
早期3G手機爲瀏覽器大尺寸網頁，只能強行頁面縮小,
致使圖片/文字/連接
IOS提出」視口」概念:虛擬窗口，大小與設備相同，如
瀏覽大型網頁，滑動.
Android 也借鑑該概念前端
width=device-width 視口寬度=設備寬度 initial-scale=1 表示初始化視頻大小1原始大小 user-scalable=no 用戶是不順能夠調整視頻大小 (2)使用流式佈局 實現方法:float:left
(3)全部容器使用相對尺寸，不用絕對尺寸
.container{
/width:500px;/
width:50%;
}html5
(4)全部文字使用相對尺寸，不用絕對尺寸
body{
/font-size:12px;/
font-size:2em;
}node
(5)全部圖片使用相對尺寸，不用絕對尺寸
img{
width:25%;
}jquery
(6)（最重要原則）使用CSS3 Media Query技術android
5: CSS3 Media Query技術
Media:指瀏覽網頁的設備,如screen(pc/pad/phone),print,tv,tty. Media Query:查詢當前瀏覽網頁設備類型，以及特性(對比度，尺尺，手持方向等), 而選擇性執行某些css代碼，而忽略另一些. 媒體查詢使用方法兩種
(1) 根據媒體查詢結果執行不一樣的css文件ios
<link media=」screen」 href=」1.css」/>
<link media=」print」 href=」2.css」/>
(2) 根據媒體查詢結果執行css片斷中不一樣部分web
6:自定義響應式佈局(重點)
(1)聲明viewport 視口
(2)流式佈局
(3)全部容器.文字.圖片:相對尺寸不一樣絕對尺雨
(4)使用CSS3 Media Querychrome
7: CSS3 Media Query查詢方式
(1)根據媒體查詢結果執行不一樣css文件(少)
(2)根據媒體查詢結果執行不一樣css片斷(多)
@media screen and (min-width:768px) and (max-width:991px){
選擇器{樣式設定}
}
8:Bootstrap 全局樣式
bootstrap: 起步/引導程序
8.1:Twitter Bootstrap 框架
#官方網站 http://www.bootcss.com/
Bootstrap是一個HTML/CSS/JS 框架,用於開發響應式佈局，移動設備優先項目.
(1)起步
(2)全局CSS樣式(重要—{柵格佈局})
(3)組件
(4)js插件(圖片輪播)
(5)定製—自定義bootstarp 樣式
提示:Bootstrap 知識點不難,1000+單詞記憶
8.2:起步
下載 css fonts js
基本模板
<html lang="zh-CN">
language:指定當前網頁所使用天然語言,如zh-CN zh-hk en-US ja
做用兩個:爲瀏覽器的翻譯功能肯定基礎語言，爲讀屏軟件肯定基礎發音
<meta http-equiv="X-UA-Compatible" content="IE=edge">
擴展HTTP響應頭消息
指定IE瀏覽器的兼容性-僅IE瀏覽器支持能夠識別
網景<==>微軟 IE
IE 6 內核6
IE 7 內核6/7
IE 8 內核6/7/8
IE 9 內核6/7/8/9
IE 10 內核6/7/8/9/10
IE 11內核6/7/8/9/10/11
html5shiv.js
第三方編寫的js文件，讓老IE兼容html5新標籤... header..
respond.js
第三方編寫的js文件,讓老IE兼容 CSS3 Media Query
8.3:Bootstrap 全局樣式—按鈕
.btn 按鈕的基礎樣式
.btn-default 白底黑字的按鈕
.btn-danger/warning/success/info/primary 五種顏色的按鈕
.btn-lg/sm/xs 按鈕四種大小
.btn-block 塊級按鈕
8.4:Bootstrap 全局樣式—圖片
.img-rounded 圓角圖片 .img-circle 圓形圖片 .img-thumbnail 縮略圖 .img-responsive 響應式圖片
8.5:Bootstrap 全局樣式—文本
.text-danger/success/warning/info/primary 文字顏色
.bg-danger/success/warning/info/primary 背景顏色
.text-left/center/right/justify 對齊方式
.text-uppercase/lowercase/capitalize
8.6:Bootstrap 全局樣式—列表
.list-unstyle 去除提示符號
.list-inline 行內列表
9:Bootstrap 全局樣式-(屏幕分類)
(1)大型PC屏幕 lg w>=1200px (2)中等PC屏幕 md 1200px>w>992px (3)小型PAD屏幕 sm 992px>w>768px (4)超小PHONE屏幕 xs 768px>x
9.1:Bootstrap 全局樣式-表格
.table .table-bordered 帶邊框的表格 .table-striped 隔行變色 .table-hover 帶懸停變色 .table-responsive 響應式表[添加特殊要求]
Bootlint 是Bootstrap官方提供HTML檢測工具，檢測出網頁中常見的HTML/CSS錯誤，還能檢測class層級結構錯誤!
9.2：Bootstrap 全局樣式-柵格(重點)
網頁佈局可用方法:
(1) TABLE佈局
好處：簡單易控制
不足: 語義錯誤,頁面渲染效率低
(2) DIV+CSS佈局
好處: 語義正確,頁面渲染效率高
不足: 不容易控制
(3)Bootstrap 柵格
好處:相對簡單易於控制，渲染效率高，支持響應式
不足:頁面簡單
使用方法:
(1) 最外層必須使用容器
div.container和div.container-fluid
(2) 容器裏能夠放置任何內容，若想使用柵格，必須div.row
.container > .row [行]
(3) 一個.row中不能放置其餘內容,只能放置 .col,列中能夠放置其它內容
.container > .row > .col
(4) Bootstrap中行默認12均等分，每一個列必須指定行中佔比
(5) 柵格系統針對不一樣屏幕提供不一樣列
.col-lg-1/2/3.../12
.col-md-1/2/3../12
.col-sm-1/2./3../12
.col-xs-1/2./...12
(6) 可使用」列偏移」實現指定列及其後的列向右偏移的效果.
若是不足12列居右對齊
.col-lg-offset-1/2...12 .col-md-offset-1/2...12 .col-sm-offset-1/2...12 .col-xs-offset-1/2...12
(7) 須要注意不一樣屏幕下列的適全性問題
.col-xs-* 適用於xs/sm/md/lg 屏幕
.col-sm-* 適用於 sm/md/lg 屏幕 .col-md-* 適用於 md/lg 屏幕 .col-lg-* 適用於 lg 屏幕
(8) 一個列能夠指定在不一樣屏幕下的寬度佔比
div.col-xs-12/.col-sm-9/.col-md-6
div.col-xs-12/col-md-6 常見錯誤: div.col-xs-6/.col-md-6
(9) 一個列能夠指定特定的屏幕隱藏
.hidden-xs 僅在xs屏幕下隱藏
.hidden-sm 僅在sm屏幕下隱藏
.hidden-md 僅在md屏幕下隱藏
.hidden-lg 僅在lg 屏幕下隱藏
.hidden
10:Bootstrap 柵格式系統
10.1:Bootstrap 表單
(1)默認表單
<form>
<div class=」form-group」>
<label class=」control-label」>用戶名</label>
<input type=」text」 class=」form-control」/>
<span class=」help-block」>用戶名格式:6~12位</span>
</div>
</form>
(2)行內表單
<form>
<div class=」form-inline」>
<input type=」text」 class=」form-control」/>
<span class=」sr-only」>用戶名格式:6~12位</span>
</div>
</form>
(3)水平表單
水錶表單=表單+柵格系統 默認柵格系統 水平表單
最外層元素 div.container form.form-horizontal
行 div.row div.form-group
列 div.col-- div.col--
<form class=」 form-horizontal」>
<div class=」form-group」>
<div class=」col-*-*」>
<label class...
</div>
</div>
</form>
10.2:Bootstrap 組件—(下拉菜單:字體圖標:導航條-重點)
下拉菜單三級結構
<div class=」dropdown」>
<a href=」#」 data-toggle=」dropdown」>觸發元素</a> <div/ul class=」dropdown-menu」>隱藏元素</div/ul>
</div>
10.3: Bootstrap 組件—(字體圖標)
web項目中經常使用圖標字體
(1)FontAwesome – 675 個免費圖標
(2)Glyphicons - 800 個收費圖標
服務器字體使用
(1)web 服務器項目目錄下必需有字體文件
(2)css中聲明一個新的字體文件，而且指定下載位置
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix')
}
(3)聲明一個基礎class 使用字體
.glyphicon{
font-family: 'Glyphicons Halflings';
}
(4)在html頁面中輸入圖標對應編碼
10.4: Bootstrap 組件—(進度條)
.progress > .progress-bar
10.5: 麪包屑 .bread-crum /徽章/巨幕/水井
11:Bootstrap第四部分:jquery插件---摺疊(手風琴)
<a data-toggle=」collapse」 href=」my-target1」>觸發元素</a> <button data-toggle=」collapse」 data-target=」my-target1」>觸發元素</button> <div id=」my-target1」 class=」collapse in」>展開收起元素</div>
12:彈幕
1:html
<canvas id=」can1」/> 顯示彈幕文字 <canvas id=」can2」/> 視頻畫在畫布上 (1)視頻按照圖片繪製畫布上 ctx2.drawImage(); (2)建立定時器[]/循環繪製視頻 (3)視頻元素動態建立追加 body最後子元素而且隱藏
2:js
3:目錄結構
index.html
js/ video.js 完成:視頻顯示
data.js 完成:彈幕
公共函數庫文件
res/1.mp4 視頻文件
13:Bootstrap js插件---(導航條)
.navbar-toggle 媒體查詢:屏幕寬度大於768px 就隱藏
.navbar-collapse 媒體查詢:屏幕寬度大於768px 絕對定位在
.navbar-header內;不然相對定位.navbar-header
14:視頻項目
<video src=」」 autoplay loop controls muted poster=」」
preload=」」></video>
video 弱 [不能對視頻加密/視頻丟失]
video 弱 直播不行
強 微信 小程序 公衆號 [pc/pad/ios/android]
14.1:同層播放 (蘋果手機)
當點擊視頻播放,IOS手機默認行爲,自動將視頻彈出在一個獨立，
窗口播放.(二個窗口)
解決問題:同一層窗口播放視頻
在<video>標籤中添加二個屬性
webkit-playsinline="true" (IOS)讓頻視在小窗口內播放，
能不同跳出全屏播放
playsinline="true" (IOS)微信瀏覽器支持小窗口內播放
x5-video-player-type="h5" (Android)同層播放
示例:
<video webkit-playsinline="true" playsinline="true"
x5-video-player-type="h5" ></video>
解決問題: 全屏設置若是不設置以下屬性，橫屏會錯位
x5-video-player-fullscreen="true"
全屏設置對過監聽resize事件實現 (Android )
x5-video-orientation="portraint">
14.2:video 專用樣式
object-fit:選項
(1) fill默認 失真
(2) contain 包含(留白)
(3) conver 覆蓋(調整視頻比例)
14.3:video 事件
(1)canplaythought 能夠播放視頻，視頻所有加載完成
#iphone 點擊播放
#android 能夠加完成觸發事件
(2)ended 播放結束
15:less兩種使用方法
(1)在客戶端使用—學習(效率差)
編寫一個x.less
在HTML中引入x.less文件，同時再引入LESS編譯程序:
less.js
客戶端請求html,下載x.less以及less.js 在客戶端運行js文件
less編譯爲css
會減慢客戶端樣式的呈現速度
(2)在服務器端使用-Less(必需掌握)
編寫x.less 在開發電腦安裝less編譯環境(Nodejs/lessc),執行x.less編譯x.css 再編寫html文件，引入編譯x.css
客戶端發出請求html/下載css
15.1:LESS語法
(1)Less支持全部CSS語法
(2)Less支持多行/單行註釋
/**/ 多行註釋
// 單行註釋—推薦使用(註釋內容不會編譯css文件)
(3) Less 支持(變量)
定義:@變量名:值;
使用:color:@變量名;
變量能夠取值爲任何合法樣式值
(4)Less 支持變量和常量算術運算
-
-
- / %
-
(5)less支持一個選擇器中」混入」另外一個選擇器的樣式
選擇器1{...}
選擇器2{.. 選擇器1}
(6)less在樣式混入時能夠指定參數
選擇器1(@參數1,@參數2..){}
選擇器2{選擇器1(值1,值2...)}
(7)less支持樣式嵌套(*)
選擇器1{
選擇器2{
}
}
上述代碼會被編譯爲:
選擇器1{}
選擇器 2{}
15.2:經過修改Bootstrap的less源文件實現定製
達到三個目標
(1)瘦身:刪除不須要樣式
(2)粗粒度定製
只須要修改variables.less中定的變量值便可
(3)細粒度定製 針對某個組件細節修改
修改組件對應less文件. dropdown.less
15.3:如何實現定製
(1)下載而且安裝nodejs – (js解析器)
在命令行 node –v 能夠看到版本信息
(2)下載less編譯程序
e:\node_modules\less\bin\lessc 示例: e:\node_modules\less\bin\lessc x.less x.css
15.4: 定製Bootstrap
(1) 查找software/bootstrap/less (2) e:node_moduleslessbinlessc less/bootstrap.less bootstrap.css
- 1. 前端知識點總結
- 2. 前端知識點 總結
- 3. web前端響應式設計總結
- 4. 前端知識點整理系列（一）—— 響應式佈局
- 5. 前端知識點學習總結
- 6. 2018前端學習知識點總結
- 7. 前端知識點總結（一）
- 8. 前端知識點總結——HTML
- 9. 前端學習知識點總結
- 10. 前端知識點細節總結(二)
- 更多相關文章...
- • 如何僞造ARP響應？ - TCP/IP教程
- • HTTP 響應頭信息 - HTTP 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 算法總結-雙指針
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 前端知識點總結
- 2. 前端知識點 總結
- 3. web前端響應式設計總結
- 4. 前端知識點整理系列（一）—— 響應式佈局
- 5. 前端知識點學習總結
- 6. 2018前端學習知識點總結
- 7. 前端知識點總結（一）
- 8. 前端知識點總結——HTML
- 9. 前端學習知識點總結
- 10. 前端知識點細節總結(二)