1. 自適應佈局(BFC觸發)
左側固定右側自適應:
.left {
width: 200px;
height: 200px;
background-color: green;
float: left;
}
.right {
height: 300px;
background-color: red;
overflow: hidden;
/* 當給元素設置了overflow:hidden ,此時元素會構造BFC, 觸發了BFC的元素 不會和浮動元素有交集 */
}
<div class="left"></div>
<div class="right"></div>
右側固定左側自適應:
.left {
width: 200px;
height: 200px;
background-color: green;
float: right;
}
.right {
height: 300px;
background-color: red;
overflow: hidden;
/* 當給元素設置了overflow:hidden ,此時元素會構造BFC, 觸發了BFC的元素 不會和浮動元素有交集 */
}
<div class="left"></div>
<div class="right"></div>
兩側固定中間自適應:
.left,
.right {
width: 200px;
height: 200px;
background-color: green;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
height: 300px;
background-color: red;
overflow: hidden; /* 觸發BFC*/
}
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
2. touch事件
移動端新增了4個與手指觸摸相關的事件。
//touchstart:手指放到屏幕上時觸發
//touchmove:手指在屏幕上滑動式觸發(會觸發多次)
//touchend:手指離開屏幕時觸發
//touchcancel:系統取消touch事件的時候觸發,比如電話
每個觸摸事件被觸發後,會生成一個event對象,event對象中changedTouches
會記錄手指滑動的信息。
e.touches;//當前屏幕上的手指
e.targetTouches;//當前dom元素上的手指。
e.changedTouches;//觸摸時發生改變的手指。
這些列表裏的每次觸摸由touch對象組成,touch對象裏包含着觸摸信息,主要屬性如下 :
clientX / clientY: //觸摸點相對瀏覽器窗口的位置
pageX / pageY: //觸摸點相對於頁面的位置
<script>
var box = document.querySelector('.box');
//綁定touch事件
//定義變量記錄觸屏數據
var startX = 0; //記錄手指接觸時座標值
var moveX = 0; //記錄手指當前移動座標值
var distancX = 0; //記錄當前手指位置 和 起始位置差值
box.addEventListener('touchstart', function (e) {
console.log('start');
startX = e.targetTouches[0].clientX;
// console.log(startX);
})
box.addEventListener('touchmove', function (e) {
console.log('move');
//觸屏移動式獲取當前手指移動距離
moveX = e.targetTouches[0].clientX;
// console.log(moveX);
//計算距離差值
distancX = moveX - startX;
// console.log(distancX);
})
box.addEventListener('touchend', function (e) {
console.log('end');
//觸屏結束是判斷 用戶滑動方向
if (distancX > 0) {
console.log('右滑動');
}
if(distancX < 0) {
console.log('左滑動');
}
//數據重置
startX = 0;
moveX = 0;
distancX = 0;
})
</script>
在移動觸屏之後,會優先觸發touch事件, 在300ms之後會觸發click事件,在移動點擊事件會有性能問題;
優化:
在touch事件中出去點擊是邏輯, 需要判斷用戶的行爲是點擊事件才行;
touch中判斷是點擊事件條件:
觸屏過程中, 手指沒有在屏幕上移動;觸屏的時間比較 至小>150ms
3. 關於tap事件與click事件
1)click事件在pc端非常用,但是在移動端會有300ms左右的延遲,比較影響用戶的體驗,300ms用於判斷雙擊還是長按事件,只有當沒有後續的的動作發生時,纔會觸發click事件;
2)tap事件只要輕觸了,就會觸發,體驗更好。
/*
* 由於移動端的點擊事件click 有300左右的延遲, 用戶體驗有待提升
* 希望 能用touch事件封裝一個相應速度更快的 點擊事件 tap
*
* touch判斷爲點擊事件的條件:
*
* 1、觸屏開始 到觸屏結束 手指沒有移動
* 2、接觸屏幕的時間 小於指定的值 150ms *
*
* 滿足以上兩個條件 可以認爲是點擊事件觸發了
* */
/*
* 插件功能:
* 給指定的元素 綁定優化後的移動的點擊事件--- tap事件
* 參數:
* obj:要綁定優化後點擊事件的元素
* callback: 當點擊事件觸發 執行什麼操作
* */
var itcast={
tap:function(obj,callback){
if(typeof obj=='object'){ //判斷傳入的obj是否爲對象
var startTime=0;//記錄起始事件
var isMove=false; //記錄是否移動
obj.addEventListener('touchstart',function(){
startTime=Date.now(); //獲取當前時間戳
});
obj.addEventListener('touchmove',function(){
isMove=true; //記錄移動
});
obj.addEventListener('touchend',function(e){
//判斷是否滿足點擊的條件
if(!isMove&&Date.now()-startTime<150){
//tap點擊事件觸發
//if(callback){
// callback();
//}
callback&&callback(e);
}
//數據重置
isMove=false;
startTime=0;
});
}
}
}
4. zepto框架介紹
Zepto是一個輕量級的針對現代高級瀏覽器的JavaScript庫, 它與jquery有着類似的api。 如果你會用jquery,那麼你也會用zepto。
github地址 (https://github.com/madrobby/zepto )
中文文檔 (http://www.css88.com/doc/zeptojs_api/ )
zepto與jquery的區別
-
jquery針對pc端,主要用於解決瀏覽器兼容性問題,zepto主要針對移動端。
-
zepto比jquery輕量,文件體積更小
-
zepto封裝了一些移動端的手勢事件
zepto的基本使用
zepto的使用與jquery基本一致,zepto是分模塊的,需要某個功能,就需要引入某個zepto的文件。
<script src="zepto/zepto.js"></script>
<script src="zepto/event.js"></script>
<script src="zepto/fx.js"></script>
<script>
$(function () {
$(".box").addClass("demo");
$("button").on("click", function () {
$(".box").animate({width:500}, 1000);
});
});
</script>
zepto手勢事件
zepto中根據touchstart touchmove touchend
封裝了一些常用的手勢事件
tap // 輕觸事件,用於替代移動端的click事件,因爲click事件在老版本中會有300ms的延遲
//穿透的問題 fastclick:
swipe //手指滑動時觸發
swipeLeft //左滑
swipeRight //右滑
swipeUp //上滑
swipeDown //下滑
5. 響應式頁面
什麼是響應式佈局?
響應式佈局(respond layout)是Ethan Marcotte在2010年5月份提出的一個概念,簡而言之,就是一個網站能夠兼容多個終端(手機、平板、pc電腦、手錶,電視) ——而不是爲每個終端做一個特定的版本。這個概念是爲解決移動互聯網瀏覽而誕生的。
爲什麼要有響應式佈局?
-
在移動互聯日益成熟的時候,在PC端開發的網頁已經無法滿足移動設備的要求。
-
通常的做法是針對移動端單獨做一套特定的版本。
-
如果終端越來越多,那麼需要開發的版本就會越來越多(大屏設備的普及)
-
響應式佈局 :一個網站能夠兼容多個終端(節約開發成本)
優點:
面對不同分辨率設備靈活性強
能夠快捷解決多設備顯示適應問題
缺點:
兼容各種設備工作量大,效率低下
代碼累贅,會出現隱藏無用的元素,加載時間加長
其實這是一種折中性質的設計解決方案,多方面因素影響而達不到最佳效果
一定程度上改變了網站原有的佈局結構,會出現用戶混淆的情況
響應式開發現狀:
-
如果已經存在PC的網站了,那麼一般不會使用響應式開發,而是針對移動端再開發一套系統(比如京東、淘寶)
-
在新建站點 上採用響應式開發的越來越多。
-
在國內,響應式開發還不是特別的流行。但響應式開發是大勢所趨,會越來越流行。
響應式開發與移動web開發的比較
開發方式 | 移動web開發+pc開發 | 響應式開發 |
---|---|---|
引用場景 | 一般已經有了PC端網站,只需要端獨開發移動端網站即可 | 針對一些新建網站,並且要求適配移動端 |
開發 | 針對性強,開發效率高 | 兼容各種終端,效率低 |
適配 | 只能適配移動端或者PC端,pad上體驗比較差 | 可以適配各種終端 |
效率 | 代碼簡潔,加載快 | 代碼相對複雜,加載慢 |
響應式 :一個頁面,可以在任何設備上進行完美佈局;
要求網頁能檢測設備屏幕--> 寬高 --> 寬(最主要的就是寬)
如何動態檢測當前設備屏幕寬度:
1-可以用js動態獲取
2-css3中新增 媒體查詢技術
媒體查詢技術作用: 可以動態檢測當前設備寬度,根據不同設備寬度給盒子加載不同樣式
6. 媒體查詢
媒體查詢(Media Query)是CSS提出來的一個新的屬性,通過媒體查詢可以查詢到screen的寬度,從而指定某個寬度區間的網頁佈局。
設備分類
分類 | 寬度範圍 |
---|---|
大屏設備 | >1200px |
中屏設備 | 992px~1200px |
小屏設備 | 768px~992px |
超小屏設備 | < 768px |
媒體查詢的使用
需求:響應式開發的原理:使用媒體查詢實現不同終端的佈局和樣式的切換。
<!--
需求:
大屏設備(>1200px) 版心:1170px 背景色:紅色
中屏設備(992-1200) 版心:970px 背景色:藍色
小屏設備(768-992) 版心:750px 背景色:黃色
超小屏設備(<768px) 版心:100% 背景色:綠色
-->
媒體查詢語法:
/*查詢屏幕*/
@media screen and 條件 {
}
/*條件的寫法*/
/*min-width:只要屏幕寬度超過這個值的設備樣式就能生效*/
/*max-width:只要屏幕寬度小於這個值的設備樣式就能生效*/
@media screen and (min-width: 1200px) {
.container {
width: 1170px;
background-color: red;
}
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
.container {
width: 970px;
background-color: blue;
}
}
@media screen and (min-width: 768px) and (max-width: 992px) {
.container {
width: 750px;
background-color: yellow;
}
}
@media screen and (max-width: 768px) {
.container {
width: 100%;
background-color: green;
}
}
弊端:現在只有一個div,要做一套響應式佈局,就需要如此多的代碼,非常的麻煩,因此我們會更多的藉助一些響應式的框架,比如bootstrap。
7. bootstrap框架
bootstrap中文網 (http://www.bootcss.com/ )
寫原生的響應佈局會很繁瑣,實際工作中使用bootstrap框架 ---> 柵格系統
Bootstrap,來自 Twitter,是目前很受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的,它簡潔靈活,使得 Web 開發更加快捷。
特點:
-
組件簡潔大方、代碼規範精簡、界面自定義性強。
-
Bootstrap是基於HTML5和CSS3開發的,它在jQuery的基礎上進行了更爲個性化和人性化的完善,形成一套自己獨有的網站風格,併兼容大部分jQuery插件。
-
Bootstrap中包含了豐富的Web組件,根據這些組件,可以快速的搭建一個漂亮、功能完備的網站。
優點:
-
有自己的生態圈,不斷的更新迭代
-
提供了一套簡潔、直觀、強悍的組件
-
標準化的HTML+CSS編碼規範
-
讓開發更簡單,提高了開發效率。
-
擴展性強,雖然界面組件樣式已經定義好了,我們還可以自定義,修改默認樣式。
版本:
-
2.x.x 停止維護
-
優點:兼容性好
-
缺點:代碼不夠簡潔、功能不夠完善
-
-
3.x.x 目前使用最多
-
優點:穩定,偏向於開發響應式佈局,移動設備優先的WEB項目
-
缺點:放棄了IE67,對IE8支持但是界面效果不友好
-
-
4.x.x 測試階段
基本模板
目錄結構說明:
<!DOCTYPE html>
<!--使用HTML5文檔,使用中文簡體-->
<html lang="zh-CN">
<head>
<!--meta1. 使用utf-8編碼-->
<meta charset="utf-8">
<!--meta2. 當前頁面在在IE瀏覽器訪問時,使用最新的ie瀏覽器內核進行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--meta3. 視口設置-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- 上述3個meta標籤*必須*放在最前面,任何其他內容都必須跟隨其後! -->
<title>bootstrap基本模板</title>
<!--引入bootstrap的核心樣式文件-->
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- html5shiv是用來解決IE8以下瀏覽器不支持HTML5語義化標籤的問題 -->
<!--respond是用來解決IE8以下瀏覽器不支持媒體查詢的問題,注意:respond不支持file協議打開-->
<!--條件註釋:IE瀏覽器專屬-->
<!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好,世界!</h1>
<!--bootstrap依賴與jquery,因此需要在bootstrap之前引入jquery文件-->
<script src="lib/jquery/jquery-1.12.4.js"></script>
<!--引入bootstrap的核心js文件-->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
全局樣式
normalize.css
Normalize.css是一種CSS reset的替代方案。經過@necolas和@jon_neal花了幾百個小時來努力研究不同瀏覽器的默認樣式的差異,這個項目終於變成了現在這樣。
官網 (http://necolas.github.io/normalize.css/ )
github網址 (https://github.com/necolas/normalize.css )
normalize的特點:
-
保護有用的瀏覽器默認樣式而不是完全去掉它們
-
一般化的樣式:爲大部分HTML元素提供
-
修復瀏覽器自身的bug並保證各瀏覽器的一致性
-
優化CSS可用性:用一些小技巧
Normalize.css
支持包括手機瀏覽器在內的超多瀏覽器,同時對HTML5元素、排版、列表、嵌入的內容、表單和表格都進行了一般化。儘管這個項目基於一般化的原則,但我們還是在合適的地方使用了更實用的默認值。
container容器
Bootstrap 需要爲頁面內容和柵格系統包裹一個 .container 容器。默認帶了15px的padding值。
.container
類用於固定寬度並支持響應式佈局的容器。
<div class="container">
...
</div>
.container-fluid
類用於 100% 寬度,佔據全部視口(viewport)的容器。
<div class="container-fluid">
...
</div>
柵格系統
柵格系統,也叫網格系統
-
.row
用於抵消.container
容器的15px的padding值 -
可以在
.row
中嵌套column
柵格系統常用類(總共12列)
類名 | 例子 | 解釋 |
---|---|---|
.col-xs-xx | .col-xs-6 | 在超小屏幕(及以上)生效 |
.col-sm-xx | .col-sm-6 | 在小屏幕(及以上)生效 |
.col-md-xx | .col-md-6 | 在中屏幕(及以上)生效 |
.col-lg-xx | .col-lg-3 | 在大屏幕及生效,佔1/4 |
.col-lg-xx | .col-lg-4 | 在大屏幕及生效,佔1/3 |
.col-lg-xx | .col-lg-6 | 在大屏幕及生效,佔1/2 |
響應式柵格:
lg: 4: 4: 4
md:5: 2: 5
sm: 3: 6: 3
xs: 1: 10 : 1
<div class="row">
<div class="col-lg-4 col-md-5 col-sm-3 col-xs-1">1</div>
<div class="col-lg-4 col-md-2 col-sm-6 col-xs-10">2</div>
<div class="col-lg-4 col-md-5 col-sm-3 col-xs-1">3</div>
</div>
列嵌套:
<div class="col-lg-4">
<!--柵格系統無處不在,只要父盒子有寬度,就可以使用柵格系統-->
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>
</div>
列偏移:
<!-- 使用 .col-md-offset-* 類可以將列向右側偏移。-->
<div class="row">
<div class="col-lg-3"></div>
<!--col-lg-offset-3:在大屏下,這個div將向右側偏移3個單位-->
<div class="col-lg-6 col-lg-offset-3"></div>
</div>
<h4>列偏移:col-*-offset-n(整體向右偏移)</h4>
<!-- 列偏移 -->
<div class="row">
<div class="col-lg-4 col-lg-offset-4"></div>
<div class="col-lg-2"></div>
</div>
<!-- 向左偏移 向右偏移 -->
<h4>col-xs-push-n 向右推n列 col-xs-pull-n 向左拉n列 (偏移是當前列)</h4>
<h4></h4>
<div class="row">
<div class="col-xs-4 col-xs-push-2">1</div>
<div class="col-xs-2 col-xs-pull-4">2</div>
</div>
響應式工具(推薦使用hidden相關的屬性 )
其他
bootstrap內置的東西是在太多,不可能每一個都詳細的講,但是bootstrap文檔簡潔明瞭,當我們用到了相關的東西的時候,再來詳細的查閱文檔。
向css文件中引入圖標字體模板:
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
<style>
/*將圖標字體引入到頁面中*/
@font-face {
font-family:'my-font';
src: url('font/iconfont.eot');
src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
url('font/iconfont.woff') format('woff'),
url('font/iconfont.ttf') format('truetype'),
url('font/iconfont.svg#iconfont') format('svg');
}
h1 {
font-family:'my-font';
}
.car::before {
/*  */
content:"\e605";
font-family:'my-font';
}
.pig::before {
content: "\e66b";
font-family:'my-font';
}
</style>
</head>
<body>
<p class="car"></p>
<h1 class="car"></h1>
<em class="pig"></em>
</body>
8. REM
各種佈局特徵的對比
由於市面上手機種類繁多,導致移動端的屏幕種類非常的混亂,比如有常見的320px 360px 375px 384px 480px 640px
等。在開發中,美工一般只會提供750px或者是640px的設計稿,這就要求我們通過一張設計稿能夠適配所有的屏幕。
通常解決方案如下:
-
流式佈局:可以讓各種屏幕都適配,只是在大屏幕中顯示效果不是非常的友好, 即使這樣, 由於開發效率高, 成本低, 目前使用流式佈局的公司還是非常多的,比如 亞馬遜 、京東 、攜程
-
響應式佈局:國內很少有大型網站使用,主要原因是工作大,可維護性不好 。所以一般都是中小型的門戶或者博客類站點會採用響應式,因爲這樣可以節約成本。
rem是什麼?
rem
(font size of the root element)是指相對於根元素
的字體大小的單位。它是一個相對單位。
em(font size of the element)是指相對於當前元素的字體大小的單位。它也是一個相對單位。
html{
font-size:16px;
}
body {
font-size:20px;
}
div.em {
/*em的計算方式參照的當前元素的font-size,如果不設置,默認繼承自父盒子*/
width:2em;
height:2em;
background-color:red;
}
/*rem的計算方式參照的是html的font-size*/
div.rem {
width:2rem;
height:2rem;
background-color:blue;
}
rem與響應式
因爲rem的基準點是根元素html的字體大小,因此我們只需要設置不同屏幕的html的font-size大小不一樣就可以達到不同屏幕的適配了。
rem與媒體查詢
使用rem配合媒體查詢可以適配多個終端
@media (min-width: 320px) {
html {
/*font-size: 100/750 * 320px*/
font-size: 42.67px;
}
}
@media (min-width: 375px) {
html {
font-size: 50px;;
}
}
@media (min-width: 414px) {
html {
font-size: 55.2px;;
}
}
@media (min-width: 480px) {
html {
font-size: 64px;;
}
}
@media (min-width: 640px) {
html {
font-size: 85.33px;
}
}
@media (min-width: 750px) {
html {
font-size: 100px;;
}
}
優點:使用媒體查詢適配,速度快。
缺點:適配多個終端時,需要添加響應的代碼。
rem與javascript
通過javascript獲取可視區的寬度,計算font-size的值,也可以適配多個終端。
使用rem進行佈局步驟:
基於設計佈局時 設置1rem = 100px ;
1-將頁面中所有單位 換算成rem
2-動態檢測屏幕寬度 給改變rem的值
var base = 100;
var design = 750;
function responsive() {
var pageWidth = window.innerWidth;
if ( pageWidth <= 320 ) {
pageWidth = 320;
}
if ( pageWidth >= 750 ) {
pageWidth = 750;
}
var size = base / design * pageWidth;
document.documentElement.style.fontSize = size + "px";
}
responsive();
window.addEventListener("resize", responsive);
優點:直接適配所有的終端
缺點:必須在頁面加載之前設置html的font-size值,不然會出現文字大小調動的情況。