前端知识点总结—-响应式
前端知識點總結—-響應式
1.Responsive Web Page:響應式網(wǎng)頁/自適應的網(wǎng)頁2010年提出,
一個網(wǎng)頁，會自動根據(jù)用戶瀏覽設備不同，自動必變布局,可以被PC/PAD/PHONE 正常瀏覽2:響應式網(wǎng)頁必備
(1)流式布局 float:left;
(2)可以改變尺寸圖片文字 font-size:1em;
響應式布局不足:代碼更加復雜，不適合大型網(wǎng)頁
3:如何測試網(wǎng)頁
(1)使用真實物理設備
(2)使用第三方模擬器軟件
(3)使用chrome 內(nèi)置設備模擬器
4:如何編寫響應式網(wǎng)頁
(1)聲明viewport元標簽<meta name="viewport" content="width=device-width, initial-scale=1">viewport 元標簽
早期3G手機為瀏覽器大尺寸網(wǎng)頁，只能強行頁面縮小,
導致圖片/文字/鏈接
IOS提出”視口”概念:虛擬窗口，大小與設備相同，如
瀏覽大型網(wǎng)頁，滑動.
Android 也借鑒該概念
(3)所有容器使用相對尺寸，不用絕對尺寸
.container{
/width:500px;/
width:50%;
}
(4)所有文字使用相對尺寸，不用絕對尺寸
body{
/font-size:12px;/
font-size:2em;
}
(5)所有圖片使用相對尺寸，不用絕對尺寸
img{
width:25%;
}
(6)（最重要原則）使用CSS3 Media Query技術
5: CSS3 Media Query技術
Media:指瀏覽網(wǎng)頁的設備,如screen(pc/pad/phone),print,tv,tty.Media Query:查詢當前瀏覽網(wǎng)頁設備類型，以及特性(對比度，尺尺，手持方向等),而選擇性執(zhí)行某些css代碼，而忽略另外一些.媒體查詢使用方法兩種(1) 根據(jù)媒體查詢結果執(zhí)行不同的css文件
<link media=”screen” href=”1.css”/><link media=”print” href=”2.css”/>(2) 根據(jù)媒體查詢結果執(zhí)行css片段中不同部分
6:自定義響應式布局(重點)
(1)聲明viewport 視口
(2)流式布局
(3)所有容器.文字.圖片:相對尺寸不同絕對尺雨
(4)使用CSS3 Media Query
7: CSS3 Media Query查詢方式
(1)根據(jù)媒體查詢結果執(zhí)行不同css文件(少)
(2)根據(jù)媒體查詢結果執(zhí)行不同css片段(多)
選擇器{樣式設定}
}
8:Bootstrap 全局樣式
bootstrap: 起步/引導程序
8.1:Twitter Bootstrap 框架
#官方網(wǎng)站 http://www.bootcss.com/
Bootstrap是一個HTML/CSS/JS 框架,用于開發(fā)響應式布局，移動設備優(yōu)先項目.
(1)起步
(2)全局CSS樣式(重要—{柵格布局})
(3)組件
(4)js插件(圖片輪播)
(5)定制—自定義bootstarp 樣式
提示:Bootstrap 知識點不難,1000+單詞記憶
8.2:起步
下載 css fonts js
基本模板
<html lang="zh-CN">
language:指定當前網(wǎng)頁所使用自然語言,如zh-CN zh-hk en-US ja
作用兩個:為瀏覽器的翻譯功能確定基礎語言，為讀屏軟件確定基礎發(fā)音
<meta http-equiv="X-UA-Compatible" content="IE=edge">
擴展HTTP響應頭消息
指定IE瀏覽器的兼容性-僅IE瀏覽器支持可以識別
網(wǎng)景<==>微軟 IE
IE 6 內(nèi)核6
IE 7 內(nèi)核6/7
IE 8 內(nèi)核6/7/8
IE 9 內(nèi)核6/7/8/9
IE 10 內(nèi)核6/7/8/9/10
IE 11內(nèi)核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 行內(nèi)列表
9:Bootstrap 全局樣式-(屏幕分類)
(1)大型PC屏幕 lg w>=1200px (2)中等PC屏幕 md 1200px>w>992px (3)小型PAD屏幕 sm 992px>w>768px (4)超小PHONE屏幕 xs 768px>x9.1:Bootstrap 全局樣式-表格
.table .table-bordered 帶邊框的表格 .table-striped 隔行變色 .table-hover 帶懸停變色 .table-responsive 響應式表[添加特殊要求]Bootlint 是Bootstrap官方提供HTML檢測工具，檢測出網(wǎng)頁中常見的HTML/CSS錯誤，還能檢測class層級結構錯誤!
9.2：Bootstrap 全局樣式-柵格(重點)
網(wǎng)頁布局可用方法:
(1) TABLE布局
好處：簡單易控制
不足: 語義錯誤,頁面渲染效率低
(2) DIV+CSS布局
好處: 語義正確,頁面渲染效率高
不足: 不容易控制
(3)Bootstrap 柵格
好處:相對簡單易于控制，渲染效率高，支持響應式
不足:頁面簡單
使用方法:
(1) 最外層必須使用容器
div.container和div.container-fluid
(2) 容器里可以放置任何內(nèi)容，若想使用柵格，必須div.row
.container > .row [行]
(3) 一個.row中不能放置其他內(nèi)容,只能放置 .col,列中可以放置其它內(nèi)容
.container > .row > .col
(4) Bootstrap中行默認12均等分，每個列必須指定行中占比
(5) 柵格系統(tǒng)針對不同屏幕提供不同列
.col-lg-1/2/3.../12
.col-md-1/2/3../12
(6) 可以使用”列偏移”實現(xiàn)指定列及其后的列向右偏移的效果.
如果不足12列居右對齊
(7) 需要注意不同屏幕下列的適全性問題
.col-xs-* 適用于xs/sm/md/lg 屏幕
(8) 一個列可以指定在不同屏幕下的寬度占比
div.col-xs-12/.col-sm-9/.col-md-6
(9) 一個列可以指定特定的屏幕隱藏
.hidden-xs 僅在xs屏幕下隱藏.hidden-sm 僅在sm屏幕下隱藏.hidden-md 僅在md屏幕下隱藏.hidden-lg 僅在lg 屏幕下隱藏.hidden10:Bootstrap 柵格式系統(tǒng)
10.1:Bootstrap 表單
(1)默認表單
(2)行內(nèi)表單
<form><div class=”form-inline”><input type=”text” class=”form-control”/><span class=”sr-only”>用戶名格式:6~12位</span></div></form>(3)水平表單
水表表單=表單+柵格系統(tǒng)默認柵格系統(tǒng) 水平表單最外層元素 div.container form.form-horizontal
行 div.row div.form-group
列 div.col-- div.col--
<form class=” form-horizontal”>
</div>
</div></form>
10.2:Bootstrap 組件—(下拉菜單:字體圖標:導航條-重點)
下拉菜單三級結構
<div class=”dropdown”>
</div>
10.3: Bootstrap 組件—(字體圖標)
web項目中常用圖標字體
(1)FontAwesome – 675 個免費圖標
(2)Glyphicons - 800 個收費圖標
服務器字體使用
(1)web 服務器項目目錄下必需有字體文件
(2)css中聲明一個新的字體文件，并且指定下載位置
}
(3)聲明一個基礎class 使用字體
}
(4)在html頁面中輸入圖標對應編碼
10.4: Bootstrap 組件—(進度條)
.progress > .progress-bar
10.5: 面包屑 .bread-crum /徽章/巨幕/水井
11:Bootstrap第四部分:jquery插件---折疊(手風琴)
<a data-toggle=”collapse” href=”my-target1”>觸發(fā)元素</a><button data-toggle=”collapse” data-target=”my-target1”>觸發(fā)元素</button><div id=”my-target1” class=”collapse in”>展開收起元素</div>12:彈幕
1:html
<canvas id=”can1”/> 顯示彈幕文字<canvas id=”can2”/> 視頻畫在畫布上(1)視頻按照圖片繪制畫布上 ctx2.drawImage();(2)創(chuàng)建定時器[]/循環(huán)繪制視頻(3)視頻元素動態(tài)創(chuàng)建追加 body最后子元素并且隱藏2:js
3:目錄結構
13:Bootstrap js插件---(導航條)
.navbar-toggle 媒體查詢:屏幕寬度大于768px 就隱藏
.navbar-collapse 媒體查詢:屏幕寬度大于768px 絕對定位在
.navbar-header內(nèi);否則相對定位.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)讓頻視在小窗口內(nèi)播放，
能不同跳出全屏播放
playsinline="true" (IOS)微信瀏覽?支持小窗口內(nèi)播放
x5-video-player-type="h5" (Android)同層播放
示例:
<video webkit-playsinline="true" playsinline="true"
x5-video-player-type="h5" ></video>
解決問題: 全屏設置如果不設置如下屬性，橫屏會錯位
x5-video-player-fullscreen="true"
全屏設置對過監(jiān)聽resize事件實現(xiàn) (Android )
x5-video-orientation="portraint">
14.2:video 專用樣式
object-fit:選項
(1) fill默認 失真
(2) contain 包含(留白)
(3) conver 覆蓋(調(diào)整視頻比例)
14.3:video 事件
(1)canplaythought 可以播放視頻，視頻全部加載完成#iphone 點擊播放#android 可以加完成觸發(fā)事件(2)ended 播放結束15:less兩種使用方法
(1)在客戶端使用—學習(效率差)
編寫一個x.less
在HTML中引入x.less文件，同時再引入LESS編譯程序:
less.js
客戶端請求html,下載x.less以及l(fā)ess.js 在客戶端運行js文件
less編譯為css
會減慢客戶端樣式的呈現(xiàn)速度
(2)在服務器端使用-Less(必需掌握)
編寫x.less 在開發(fā)電腦安裝less編譯環(huán)境(Nodejs/lessc),執(zhí)行x.less編譯x.css 再編寫html文件，引入編譯x.css客戶端發(fā)出請求html/下載css
15.1:LESS語法
(1)Less支持所有CSS語法
(2)Less支持多行/單行注釋
/**/ 多行注釋
// 單行注釋—推薦使用(注釋內(nèi)容不會編譯css文件)
(3) Less 支持(變量)
定義:@變量名:值;
使用:color:@變量名;
變量可以取值為任何合法樣式值
(4)Less 支持變量和常量算術運算
- / %
(5)less支持一個選擇器中”混入”另一個選擇器的樣式
選擇器1{...}
選擇器2{.. 選擇器1}
(6)less在樣式混入時可以指定參數(shù)
選擇器1(@參數(shù)1,@參數(shù)2..){}
選擇器2{選擇器1(值1,值2...)}
(7)less支持樣式嵌套(*)
選擇器1{
}
}
上述代碼會被編譯為:
選擇器1{}
選擇器 2{}
15.2:通過修改Bootstrap的less源文件實現(xiàn)定制
達到三個目標
(1)瘦身:刪除不需要樣式
(2)粗粒度定制
(3)細粒度定制 針對某個組件細節(jié)修改
修改組件對應less文件. dropdown.less15.3:如何實現(xiàn)定制
(1)下載并且安裝nodejs – (js解析器)
在命令行 node –v 可以看到版本信息(2)下載less編譯程序
e:\node_modules\less\bin\lessc示例:e:\node_modules\less\bin\lessc x.less x.css15.4: 定制Bootstrap
(1) 查找software/bootstrap/less
(2) e:node_moduleslessbinlessc less/bootstrap.less bootstrap.css
總結
以上是生活随笔為你收集整理的前端知识点总结—-响应式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： elastic search2.3.1(
- 下一篇： 关于tensorflow的变量(vari