響應式頁面-@media介紹
我們為什么要寫自適應的頁面(響應式頁面)
眾所周知,電腦、平板、手機的屏幕是差距很大的,假如在電腦上寫好了一個頁面,在電腦上看起來不錯,但是如果放到手機上的話,那可能就會亂的一塌糊塗,這時候怎么解決呢?以前,可以再專門為手機定制一個頁面,當用戶訪問的時候,判斷設備是手機還是電腦,如果是手機就跳轉到相應的手機頁面,例如百度的就是,手機訪問www.baidu.com就會跳轉到m.baidu.com,這樣做簡直就是費力不討好的活,所以聰明的程序員開發了一種自適應寫法,即一次開發,處處顯示!這到底是一個什么樣的神器東西呢,接下來就揭曉它的神秘面紗。
CSS3 的 @media 查詢
定義和使用
使用 @media 查詢,你可以針對不同的屏幕大小定義不同的樣式。 @media 可以針對不同的屏幕尺寸設置不同的樣式,特別是如果你需要設置設計響應式的頁面,@media 是非常有用的。 當你重置瀏覽器大小的過程中,頁面也會根據瀏覽器的寬度和高度重新渲染頁面,這對調試來說是一個極大的便利。
@media mediaType and|not|only (media feature) { /*CSS-Code;*/ }
媒體類型(mediaType ) 類型有很多,在這里不一一列出來了,只列出了常用的幾個。
screen: 用於電腦屏幕,平板電腦,智能手機等。(最常用) speech 應用於屏幕閱讀器等發聲設備 媒體功能
media feature:
1.max-width:定義輸出設備中的頁面最大可見區域寬度
2.min-width:定義輸出設備中的頁面最小可見區域寬度
開始編寫響應式頁面
准備工作1:設置Meta標簽
首先我們在使用 @media 的時候需要先設置下面這段代碼,來兼容移動設備的展示效果:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
這段代碼的幾個參數解釋:
width = device-width:寬度等於當前設備的寬度
initial-scale:初始的縮放比例(默認設置為1.0,即代表不縮放)
user-scalable:用戶是否可以手動縮放(默認設置為no,因為我們不希望用戶放大縮小頁面)
准備工作2:加載兼容文件JS
因為IE8既不支持HTML5也不支持CSS3 @media ,所以我們需要加載兩個JS文件,來保證我們的代碼實現兼容效果:
<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]-->
准備工作3:設置IE渲染方式默認為最高(可選) 現在有很多人的IE瀏覽器都升級到IE9以上了,所以這個時候就有又很多詭異的事情發生了,例如現在是IE9的瀏覽器,但是瀏覽器的文檔模式卻是IE8 為了防止這種情況,我們需要下面這段代碼來讓IE的文檔渲染模式永遠都是最新的
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
ps:這段代碼后面加了一個chrome=1,如果用戶的電腦里安裝了 chrome,就可以讓電腦里面的IE不管是哪個版本的都可以使用Webkit引擎及V8引擎進行排版及運算,如果沒有安裝,就顯示IE最新的渲染模式。
代碼示例:
1、如果文檔寬度大於等於 1170px 則應用花括號內的樣式——修改body的背景顏色(background-color):
@media screen and (min-width: 1170px) { body { background-color:lightblue; } }
從上面的代碼可以看出,媒體類型是屏幕(screen),使用 一個 and 連接后面的媒體功能,這里寫的是 max-width:300px ,也就是說,當屏幕的最大寬度 大於於等於 1170px 的時候,就應用花括號里面的樣式。
2.如果文檔寬度大於等於 992px 則應用花括號內的樣式——修改body的背景顏色(background-color):
@media screen and (min-width: 992px) { body { background-color:red; } }
3、當文檔寬度大於等於 768px 並且小於等於992px ( width >=768 && width <=992)的時候顯示的樣式
@media screen and (min-width:768px) and (max-width:992px) { /* CSS 代碼 */ }
需要注意的是:
不要被 min-width 和 max-width 所迷惑,初學者很容易誤以為 min-width 的意思是小於xxx的時候才應用,然而這就陷入誤區了,其實它的意思是:當設置了 min-width 的時候,文檔的寬度如果小於設置的值,就不會應用這個區塊里的CSS樣式,所以 min-width 它才能實現大於等於設置的值得時候,才會應用區塊里的CSS樣式,max-width 也是如此。
移動端單位
在頁面整體布局中,頁面元素的尺寸大小(長度、寬度、內外邊距等)和頁面字體的大小也是重要的工作之一。一個合理設置,則會讓頁面看起來層次分明,重點鮮明,賞心悅目。反之,一個不友好的頁面尺寸和字體大小設置,則會增加頁面的復雜性,增加用戶對頁面理解的復雜性;甚至在當下訪問終端(iPhone、iPad、PC、Android…)層出不窮的今天,適應各式各樣的訪問終端,將成為手中的一塊“燙手的山芋”。所以在近幾年,“九宮格”式的“流式布局”再度回歸。為了提供頁面布局,及其它的可維護性、可擴展性,我們嘗試將頁面元素的大小,以及字體大小都設置為相對值,不再是孤立的固定像素點。使其能在父元素的尺寸變化的同時,子元素也能隨之適應變化。以及結合少量最新CSS3的@media查詢,來實現“響應式布局”,bootstrap這類CSS框架大勢興起。
然而在CSS中,W3C文檔把尺寸單位划為為兩類:相對長度單位和絕對長度單位
然而相對長度單位按照不同的參考元素,又可以分為字體相對單位和視窗相對單位
字體相對單位有:em、ex、ch、rem;
視窗相對單位則包含:vw、vh、vmin、vmax幾種
絕對定位則是固定尺寸,它們采用的是物理度量單位:cm、mm、in、px、pt以及pc。但在實際應用中,我們使用最廣泛的則是em、rem、px以及百分比(%)來度量頁面元素的尺寸。
px: 絕對(固定)單位
缺點:任何情況下都是固定值,會導致布局在不同尺寸下的設備錯位
%:相對定位(會有影響發生變化)相對於父級(自身)大小進行定位
缺點:能確定范圍的還是比較好計算的,對於不太好確定值得地方不好使用百分比,並且會導致變形,高度一般不好控制
em: 相對定位 (會有影響發生變化) em=當前字體大小
缺點:會根據當前容器字體大小發生變化,假如每個容器字體大小不一致,那么計算會非常麻煩
rem
r==root
em=字體大小 font-size
rem 相對單位
只依賴於html字體大小
可以認為它沒啥缺點吧!反正我個人還是挺喜歡的
動態的修改根元素的font-size:
需要通過js去控制:
/*獲得頁面寬度后動態修改html上的fontsize * 320為iphone5設計稿下的頁面寬度,如下設置后頁面的頁面在iphone5等寬屏幕上html * 的font-size會變為20px,即 1rem = 100px 1px=0.05rem * 所以設置元素尺寸的時候,如果測量設計稿 15px 則需設置尺寸為 (0.05*15)rem = 0.75rem */ !(function(doc, win) { var docEle = doc.documentElement, evt = "onorientationchange" in window ? "orientationchange" : "resize", fn = function() { var width = docEle.clientWidth; console.log(width) width && (docEle.style.fontSize = 20 * (width / 320) + "px"); }; win.addEventListener(evt, fn, false); doc.addEventListener("DOMContentLoaded", fn, false); }(document, window));
將上面的文件引入到當前項目中,

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"> <title>移動端布局</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } .clearfix:after{ content: ''; display: block; clear: both; } html{ width: 100%; height: 100%; /*font-size: 30px;*/ overflow: hidden; } body{ width: 100%; height: 100%; overflow: auto; } .head-box{ width: 100%; height: 4rem; background-color: red; position: absolute; top: 0; left: 0; } .list{ margin-top: 4rem; font-size: 1.5rem; } .list .item{ float: left; width: 7rem; height: 7rem; border: 1px solid black; margin: 0.25rem; } </style> </head> <body> <header class="head-box"> <div class="head-top"></div> <div class="head-bottom"></div> </header> <ul class="list clearfix"> <li class="item">1111111</li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> </ul> </body> <script src="./js/resize.js"></script> </html>
Bootstrap相關內容
一、Bootstrap的介紹
凡是使用過Bootstrap的開發者,都不在乎做這么兩件事情:復制and粘貼。哈哈~,是的使用Bootstrap非常簡單,但是在復制粘貼之前,需要先對Bootstrap的用法一一熟悉之后我們才開始干活!
Bootstrap,來自 Twitter,是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、javascript 的,它簡潔靈活,使得 Web 開發更加快捷。
它用於開發響應式布局、移動設備優先的 WEB 項目
二、Bootstrap的下載
2.1使用Bootstrap第一步,先將生成環境的Bootstrap下載下來。然后將下載,然后引入到自己建好的當前目錄中
2.2點到起步中的基本模板
將看到的整段代碼復制粘貼到建好的index.html文件中
官網明確表示: 使用此給出的這份超級簡單的HTML模板,或者修改這些實例。我們強烈建議你對這些實例按照自己的需求進行修改,而不要簡單的復制、粘貼
Bootstrap支持移動設備優先
也就是說使用Bootstrap可以在移動設備上運行。為了確保適當的繪制和觸屏縮放,需要在<head>
之中添加viewport元數據標簽
<meta name="viewport" content="width=device-width, initial-scale=1">
在移動設備瀏覽器上,通過為視口(viewport)設置 meta 屬性為 user-scalable=no 可以禁用其縮放(zooming)功能。這樣禁用縮放功能后,用戶只能滾動屏幕,就能讓你的網站看上去更像原生應用的感覺。注意,這種方式我們並不推薦所有網站使用,還是要看你自己的情況而定!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Bootstrap重置樣式
為了增強跨瀏覽器表現的一致性,我們使用了 Normalize.css,這是由 Nicolas Gallagher 和 Jonathan Neal 維護的一個CSS 重置樣式庫。
布局容器
Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 容器。我們提供了兩個作此用處的類。注意,由於 padding 等屬性的原因,這兩種 容器類不能互相嵌套。
.container 類用於固定寬度並支持響應式布局的容器。
<div class="container"> ... </div>
.container-fluid 類用於 100% 寬度,占據全部視口(viewport)的容器。
<div class="container-fluid"> ... </div>
柵格系統
柵格系統的鼻祖是 https://960.gs/.
Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統,隨着屏幕或視口(viewport)尺寸的增加,系統會自動分為最多12列
柵格系統用於通過一系列的行(row)與列(column)的組合來創建頁面布局,你的內容就可以放入這些創建好的布局中。下面就介紹一下 Bootstrap 柵格系統的工作原理:
柵格參數
使用單一的一組 .col-md-* 柵格類,就可以創建一個基本的柵格系統,在手機和平板設備上一開始是堆疊在一起的(超小屏幕到小屏幕這一范圍),在桌面(中等)屏幕設備上變為水平排列。所有“列(column)必須放在 ” .row 內。
一些常使用網站
阿里巴巴圖標庫網站:
如果想做圖表,那可以去官網:http://echarts.baidu.com/或者https://chartjs.bootcss.com/
PS:還是那句話,使用Bootstrap非常簡單,根據項目的需求適當去官網復制粘貼,然后根據需求更改自己的內容,如果想修改自己的樣式,可以添加類,按照之前咱們學習css一樣的方式,給它相應的樣式
...