當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端知识点总结—-响应式

發布時間：2025/4/16 HTML 46 豆豆

生活随笔收集整理的這篇文章主要介紹了前端知识点总结—-响应式小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前端知識點總結—-響應式

1.Responsive Web Page:響應式網頁/自適應的網頁2010年提出,

一個網頁，會自動根據用戶瀏覽設備不同，自動必變布局,可以被PC/PAD/PHONE 正常瀏覽

2:響應式網頁必備

(1)流式布局 float:left;
(2)可以改變尺寸圖片文字 font-size:1em;
響應式布局不足:代碼更加復雜，不適合大型網頁

3:如何測試網頁

(1)使用真實物理設備
(2)使用第三方模擬器軟件
(3)使用chrome 內置設備模擬器

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%;
}

(4)所有文字使用相對尺寸，不用絕對尺寸
body{
/font-size:12px;/
font-size:2em;
}

(5)所有圖片使用相對尺寸，不用絕對尺寸
img{
width:25%;
}

(6)（最重要原則）使用CSS3 Media Query技術

5: CSS3 Media Query技術

Media:指瀏覽網頁的設備,如screen(pc/pad/phone),print,tv,tty.Media Query:查詢當前瀏覽網頁設備類型，以及特性(對比度，尺尺，手持方向等),而選擇性執行某些css代碼，而忽略另外一些.媒體查詢使用方法兩種

(1) 根據媒體查詢結果執行不同的css文件

(2) 根據媒體查詢結果執行css片段中不同部分

6:自定義響應式布局(重點)

(1)聲明viewport 視口
(2)流式布局
(3)所有容器.文字.圖片:相對尺寸不同絕對尺雨
(4)使用CSS3 Media Query

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>

</form>

10.2:Bootstrap 組件—(下拉菜單:字體圖標:導航條-重點)

下拉菜單三級結構
<div class=”dropdown”>

</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.htmljs/ 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

總結

以上是生活随笔為你收集整理的前端知识点总结—-响应式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

知识点

上一篇： elastic search2.3.1(
下一篇：关于tensorflow的变量(vari