響應式開發
什麼是響應式開發
就是一個網站可以兼容多個終端。javascript
在移動互聯日益成熟的時候，咱們在桌面瀏覽器上開發的網頁已經沒法知足移動設備的閱讀。css
一般的作法是針對移動端單獨作一套特定的版本。html
可是若是終端愈來愈多那麼你須要開發的版本就會愈來愈多（大屏移動設備普及）。前端
那麼Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，html5
在開發當中，一套頁面能響應多種終端而且在各類終端下顯示的佈局和內容不同並且展現的比較合理，或者說一個網站能適配多種屏幕尺寸類型的網站。這樣的一個開發模式就是響應式。java
咱們通常用bootstrap來幫助咱們完成響應式建站。node
響應式開發的原理
CSS3中的Media Query（媒介查詢）jquery
代碼：web
@media screen and (min-width: 768px){}
@media screen and (min-width: 992px){}
@media screen and (min-width: 1200px){}npm也能夠
@media (max-width: 767px){}
@media (min-width: 768px) and (max-width: 991px){}
@media (min-width: 992px) and (max-width: 1199px){}
@media (min-width: 1200px){}
媒體查詢能夠指定查詢的屬性screen也能夠不指定默認回去查詢屏幕。
可使用css覆蓋的原理，也能夠定義區間範圍，能夠多條件查詢。
/*利用媒體查詢*/
/*不寫screen默認的是它*/
/*1.當屏幕寬度超過1200px的時候 版心寬度限制爲1170px 背景顏色是紅色*/
@media screen and (min-width: 1200px){
.container{
width: 1170px;
background: red;
}
}/*利用媒體查詢*/
/*不寫screen默認的是它*/
/* 3.當屏幕寬度超過768px不超過992px的時候 版心寬度限制爲750px 背景顏色是綠色*/
@media (min-width: 768px){
.container{
width: 750px;
background: green;
}
}
經過查詢screen的寬度來指定某個寬度區間的網頁佈局。
超小屏幕（移動設備） 768px如下
小屏設備 768px-992px
中等屏幕 992px-1200px
寬屏設備 1200px以上
響應式開發的前景
如今的移動設備屏幕愈來愈大。
愈來愈多的設計師也採用了這種設計。
在新建站的一些網站如今廣泛採用的響應式開發。
那麼在前端開發當中也是一項必備的技能。
響應式開發和移動web開發的區別
擴展的選擇器
結構選擇器
相鄰選擇符 (E+F)
語法：E+F{ }
說明：選擇緊貼在E元素以後F元素。
兄弟選擇符 (E~F)
語法：E~F{ }
說明：選擇E元素後面的全部兄弟元素F。
/*選擇當前的這個元素的下一個兄弟元素*/聲明新字體圖標
/*div + div{
color: red;
}*/
/*選擇當前的這個元素的下面全部的兄弟元素*/
div ~ div{
color: red;
}
@font-face {
font-family: 'wjs_fonts';
src: 下面的文件是已經準備好的字體圖標庫 直接引入 而後類名聲明
url('../fonts/MiFie-Web-Font.svg') format('svg'),
url('../fonts/MiFie-Web-Font.ttf') format('truetype'),
url('../fonts/MiFie-Web-Font.woff') format('woff'),
url('../fonts/MiFie-Web-Font.eot') format('embedded-opentype');
}
.wjs_icon{
font-family: wjs_fonts;
}
.wjs_icon_phone::before{
content: "\e908";
}
Bootstrap框架
<!DOCTYPE html><!--html5文檔格式-->
<html lang="zh-CN"><!--申明語言是中文簡體-->
<head>
<meta charset="utf-8">
<!--當是IE的是試用最新的渲染引擎來渲染頁面-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--讓頁面適配移動端 須要加上 user-scalable=0 讓用戶不予許縮放-->
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
<!--頁面的加載順序和解析順序 -->
<!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
<title>template</title>
<!-- Bootstrap 核心css文件-->
<link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<!--IE8一下就不支持html5標籤和媒體查詢-->
<!--
html5標籤要支持的話？ 引入 html5shiv
media query 要支持的話？ 引入 respond
-->
<!--注意：要已http形式打開你的頁面 否者respond不生效-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--條件註釋-->
<!--[if lt IE 9]>
<script src="../lib/html5shiv/html5shiv.min.js"></script>
<script src="../lib/respond/respond.min.js"></script>
<![endif]-->
<!--TODO 本身項目的文件-->
</head>
<body>
<!--TODO 本身項目頁面內容-->
<h1>你好，世界！</h1>
<!--引入jquery 由於bootstrap是依賴-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../lib/jquery/jquery.min.js"></script>
<!-- bootstrap 核心js文件-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
<!--TODO 本身項目js文件-->
</body>
<!--模塊化 導航條 默認樣式的導航條-->
<nav class="navbar navbar-default">
<!--導航內容的容器-->
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!--漢堡菜單-->
<!--
data-toggle 當前這個組件是 collapse組件 顯示吟唱
data-target 當前這個組件控制的元素是誰 目標是誰？
-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<!--screen read only 默認隱藏-->
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--logo區塊-->
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
!-- 加上carousel 指定當前的容器是輪播圖 data-ride="carousel" 申明是一個輪播圖組件-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!--點容器-->
<ol class="carousel-indicators">
<!-- data-target 控制是那個輪播圖 data-slide-to 控制的是輪播圖當中的第幾章圖 索引指定是內容容器的item的索引-->
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-tar
<ul class="nav nav-tabs" role="tablist">
<!--data-toggle=tab 申明的是一個tab組件 href指向控制的目標元素-->
<li role="presentation"
輪播圖
在pc端：使用的是背景圖片
在移動端使用的是圖片
在寫靜態demo的時候使用的是響應是工具來完成的圖片響應
可是會加載兩種圖片
那麼這時候就須要作圖片的響應式了
首先咱們準備了json 中有兩種數據
而後經過模版引擎解析成html
最終把解析完成的html渲染在頁面當中。
underscore插件 中的template模板引擎
<!--<div>
<p><span>xjj</span>:<span>10</span></p>
<p><span>xxj</span>:<span>11</span></p>
</div>-->
<div id="box"></div>
<!--<script type="text/javascript"></script>-->
<!--/*模版就是一段html不會解析的字符串*/-->
<!--在 <% js代碼 %>-->
<!-- 怎麼樣去值 經過=號取值 渲染成html標籤 還能夠經過-獲取 文本字符-->
<script id="box_template" type="text/template">
<%_.each(model,function(obj,index){%>
<p><span style="color: red"></span>:<span><%=obj.age%></span></p>
<%});%>
</script>
<script>
/*準備一個數組*/
var dataList = [
{name:'xdsjj',age:'<script>alert(0);<\/script>'},
{name:'xdsxj',age:'11111'}
]
/*準備模版*/
/*模版就是一段html不會解析的字符串*/
/*轉化成模版方法*/
/*jquery是$. underscore 調用方法是 _.*/
/*模版當中的字符串*/
var templateStr = document.querySelector('#box_template').innerHTML;
console.log(templateStr);
/*獲得一個模版方法 function*/
var templateFuc = _.template(templateStr);
/*把你想要解析的數據傳遞給這個方法 就能夠返還給你想要的解析後的html結構*/
/*給你想要傳遞的數據取一個名字*/
var templateHtml = templateFuc({model:dataList});
console.log(templateHtml);
/*把html字符渲染到頁面上*/
document.querySelector('#box').innerHTML = templateHtml;簡介
做者：Twitter 公司兩位前端工程師（mark otto && jacob thornton）在2011發起開發完成的。
中文網站：中文官網 http://www.bootcss.com/
特色：
爲何選擇bootstrap
優勢：
有本身的生態圈，不斷的更新迭代。
提供了一套簡潔、直觀、強悍的組件。
標配準化的html+css編碼規範。
讓開發更簡單，提升了開發的效率。
注意：雖然界面組件樣式已經定義好了，可是擴展性相對較強，也就是說咱們還能夠自定義，修改默認樣式。把默認樣式粘貼 到當前css中 改類名或添加模塊類名
版本
2.x.x 中止維護
優勢：兼容性好
缺點：代碼不夠簡潔，功能不夠完善。
3.x.x 目前使用最多
穩定，可是放棄了IE6-IE7。對IE8支持可是界面效果很差。
偏向用於開發響應式佈局、移動設備優先的 WEB 項目。
4.x.x 測試階段
M ap文件更偏響應式，移動設備，代碼更精簡。
一般使用css和js 壓縮的過程。
若是出錯 顯示瀏覽會提示那一行出錯。
Map就是提供了記錄代碼位置的文件
Bootstrap經常使用樣式
container類
用於定義一個固定寬度且居中的版心
row類
由於每個列默認有一個15px的左右外邊距，row類的一個做用就是經過左右-15px屏蔽掉這個邊距
col-**-*類
col-xs-[列數]：在超小屏幕下展現幾份
col-sm-[列數]：在小屏幕下展現幾份
col-md-[列數]：在中等屏幕下展現幾份
col-lg-[列數]：在大屏幕下展現幾份
xs : 超小屏幕 手機 (<768px)
sm : 小屏幕 平板 (≥768px)
md : 中等屏幕 桌面顯示器 (≥992px)
lg : 大屏幕 大桌面顯示器 (≥1200px)
push pull
hidden 類
hidden-xs,hidden-sm,hidden-md,hidden-lg在不一樣的屏幕下隱藏。
text-* 類
text-center 文本居中
text-left 文本左對齊
text-right 文本右對齊
pull-* 類
pull-left 左浮動類
pull-right 右浮動類
center-block 類
讓一個固定寬度的元素居中。
標籤屬性
這些屬性都是提供給屏幕閱讀器的，咱們能夠忽略。
role
aria-*
class="sr-only"
指定插件類型，和被控制的目標元素
data-toggle
data-target
/*a標籤也能夠經過href來指定被控制的目標元素*/
rem
/*em的大小是基於父元素來計算的 更本的講就是自己 字體大小*/
/*默認的字體大小是多少 16px*/
font-size: 2em;
*?REM到底以誰爲基準？ R？指的是root 根元素 html 以html的字體大小來計算的*/
/*默認的字體大小是多少 16px*/
font-size: 2rem;
1 rem和媒體查詢 結合能夠自適應
@media screen and (max-width: 640px){
html{
font-size: 100px;
}
}
@media screen and (max-width: 480px){
html{
font-size: 75px;
}
}
@media screen and (max-width: 320px){
html{
font-size: 50px;
}
}
header{
height: 1rem;
/*320px 50px*/
/*640px 100px*/
width: 100%;
background: green;
font-size: 0.5rem;
line-height: 1rem;
text-align: center;
color: #fff;
}
2 js和 rem結合 自適應
header{
height: 1rem;
/*320px 50px*/
/*640px 100px*/
width: 100%;
background: green;
font-size: 0.5rem;
line-height: 1rem;
text-align: center;
color: #fff;
}
</style>
<script>
window.onresize = function(){
var size = 50;/*基準是320*/
var width = window.innerWidth;
/*根據當前的屏幕尺寸計算fontSize的值*/
var fontSize = 50/320*width;
/*動態設置字體大小*/
document.querySelector('html').style.fontSize = fontSize + 'px';
}
less
Less環境安裝
安裝nodejs
在部分win8系統當中沒法安裝
（解決辦法的是 已管理員權限運行cmd而後再按寫命令切換到安裝包目錄，直接命令執行）
安裝完成nodejs以後
檢測是否安裝完成 node –v 查看版本
而後檢測 npm是否自帶 npm –v 查看版本
在線安裝
而後 運行 npm install –g less (部分電腦要 sudo 管理權限)
Lessc –v 查看版本 是否安裝成功
離線安裝
Npm.Zip解壓進去。
Webstorm配置
bstorm配
學習less
[官網](http://lesscss.org/)
[中文網](http://lesscss.cn/)
Webstrom 插件
Lessc less.less less.css 編譯less文件成css
簡介
CSS（層疊樣式表）是一門歷史悠久的標記性語言，同 HTML 一道，被普遍應用於萬維網（World Wide Web）中。HTML 主要負責文檔結構的定義，CSS 負責文檔表現形式或樣式的定義。
做爲一門標記性語言，CSS 的語法相對簡單，對使用者的要求較低，但同時也帶來一些問題：CSS 須要書寫大量看似沒有邏輯的代碼，不方便維護及擴展，不利於複用，尤爲對於非前端開發工程師來說，每每會由於缺乏 CSS 編寫經驗而很難寫出組織良好且易於維護的 CSS 代碼，形成這些困難的很大緣由源於 CSS 是一門非程序式語言，沒有變量、函數、SCOPE（做用域）等概念。LESS 爲 Web 開發者帶來了福音，它在 CSS 的語法基礎之上，引入了變量，Mixin（混入），運算以及函數等功能，大大簡化了 CSS 的編寫，而且下降了 CSS 的維護成本，就像它的名稱所說的那樣，LESS 可讓咱們用更少的代碼作更多的事情。
LESS 原理及使用方式
本質上，LESS 包含一套自定義的語法及一個解析器，用戶根據這些語法定義本身的樣式規則，這些規則最終會經過解析器，編譯生成對應的 CSS 文件。LESS 並無裁剪 CSS 原有的特性，更不是用來取代 CSS 的，而是在現有 CSS 語法的基礎上，爲 CSS 加入程序式語言的特性。
語法
變量
Mixin混入
嵌套
Import
函數（內置函數）
變量
LESS 容許開發者自定義變量，變量能夠在全局樣式中使用，變量使得樣式修改起來更加簡單。
/*-----------------變量-----------------*/
@mainColor:#E93223;
body{
color: @mainColor;
}
Mixin混入
Mixin（混入）功能對用開發者來講並不陌生，不少動態語言都支持 Mixin（混入）特性，它是多重繼承的一種實現，在 LESS 中，混入是指在一個 CLASS 中引入另一個已經定義的 CLASS，就像在當前 CLASS 中增長一個屬性同樣。
/*-----------------mixin 混入----------------*/
/*顏色*/
.red{
color: @mainColor;
}
.border{
border: 1px solid #ccc;
}
.redBorder(){
color: @mainColor;
border: 1px solid #ccc;
}
.mixin-class{
.red();
.border();
}
.mixin-fuc{
.redBorder();
}
嵌套
在咱們書寫標準 CSS 的時候，遇到多層的元素嵌套這種狀況時，咱們要麼採用從外到內的選擇器嵌套定義，要麼採用給特定元素加 CLASS 或 ID 的方式
/*------------------嵌套------------------*/
/*輪播圖*/
#wjs_banner{
.carousel-inner{
> div.item{
a.img_box{
background: url("../images/slide_01_2000x410.jpg") no-repeat center center;
height: 410px;
/*調用redBorder mixin*/
display: block;
.redBorder();
/*調用@mainColor 變量*/
&:hover{
color: @mainColor;
}
}
a.img_mobile{
width: 100%;
display: block;
img{
width: 100%;
display: block;
}
}
}
}
}
Import 導入
/*---------------------Import 引入------------------------*/
@import "base";
.f_left{
float: @right;
}
運算及函數
在咱們的 CSS 中充斥着大量的數值型的 value，好比 color、padding、margin 等，這些數值之間在某些狀況下是有着必定關係的，那麼咱們怎樣利用 LESS 來組織咱們這些數值之間的關係呢？
http://www.1024i.com/demo/less/reference.html
escape(@string); // 經過 URL-encoding 編碼字符串
e(@string); // 對字符串轉義
%(@string, values...); // 格式化字符串
unit(@dimension, [@unit: ""]); // 移除或替換屬性值的單位
color(@string); // 將字符串解析爲顏色值
data-uri([mimetype,] url); // * 將資源內嵌到css中，可能回退到url()
ceil(@number); // 向上取整
floor(@number); // 向下取整
percentage(@number); // 將數字轉換爲百分比，例如 0.5 -> 50%
round(number, [places: 0]); // 四捨五入取整
sqrt(number); // * 計算數字的平方根
abs(number); // * 數字的絕對值
sin(number); // * sin函數
asin(number); // * arcsin函數
cos(number); // * cos函數
acos(number); // * arccos函數
tan(number); // * tan函數
atan(number); // * arctan函數
pi(); // * 返回PI
pow(@base, @exponent); // * 返回@base的@exponent次方
mod(number, number); // * 第一個參數對第二個參數取餘
convert(number, units); // * 在數字之間轉換
unit(number, units); // * 不轉換的狀況下替換數字的單位
color(string); // 將字符串或者轉義後的值轉換成顏色
rgb(@r, @g, @b); // 轉換爲顏色值
rgba(@r, @g, @b, @a); // 轉換爲顏色值
argb(@color); // 建立 #AARRGGBB 格式的顏色值
hsl(@hue, @saturation, @lightness); // 建立顏色值
hsla(@hue, @saturation, @lightness, @alpha); // 建立顏色值
hsv(@hue, @saturation, @value); // 建立顏色值
hsva(@hue, @saturation, @value, @alpha); // 建立顏色值
hue(@color); // 從顏色值中提取 hue 值（色相）
saturation(@color); // 從顏色值中提取 saturation 值（飽和度）
lightness(@color); // 從顏色值中提取 'lightness' 值（亮度）
hsvhue(@color); // * 從顏色中提取 hue 值，以HSV色彩空間表示（色相）
hsvsaturation(@color); // * 從顏色中提取 saturation 值，以HSV色彩空間表示（飽和度）
hsvvalue(@color); // * 從顏色中提取 value 值，以HSV色彩空間表示（色調）
red(@color); // 從顏色值中提取 'red' 值（紅色）
green(@color); // 從顏色值中提取 'green' 值（綠色）
blue(@color); // 從顏色值中提取 'blue' 值（藍色）
alpha(@color); // 從顏色值中提取 'alpha' 值（透明度）
luma(@color); // 從顏色值中提取 'luma' 值（亮度的百分比表示法）
saturate(@color, 10%); // 飽和度增長 10%
desaturate(@color, 10%); // 飽和度下降 10%
lighten(@color, 10%); // 亮度增長 10%
darken(@color, 10%); // 亮度下降 10%
fadein(@color, 10%); // 透明度增長 10%
fadeout(@color, 10%); // 透明度下降 10%
fade(@color, 50%); // 設定透明度爲 50%
spin(@color, 10); // 色相值增長 10
mix(@color1, @color2, [@weight: 50%]); // 混合兩種顏色
greyscale(@color); // 徹底移除飽和度，輸出灰色
contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); // 若是 @color1 的 luma 值 > 43% 輸出 @darkcolor，不然輸出 @lightcolor
multiply(@color1, @color2);
screen(@color1, @color2);
overlay(@color1, @color2);
softlight(@color1, @color2);
hardlight(@color1, @color2);
difference(@color1, @color2);
exclusion(@color1, @color2);
average(@color1, @color2);
negation(@color1, @color2);
iscolor(@colorOrAnything); // 判斷一個值是不是顏色
isnumber(@numberOrAnything); // 判斷一個值是不是數字（可含單位）
isstring(@stringOrAnything); // 判斷一個值是不是字符串
iskeyword(@keywordOrAnything); // 判斷一個值是不是關鍵字
isurl(@urlOrAnything); // 判斷一個值是不是url
ispixel(@pixelOrAnything); // 判斷一個值是不是以px爲單位的數值
ispercentage(@percentageOrAnything); // 判斷一個值是不是百分數
isem(@emOrAnything); // 判斷一個值是不是以em爲單位的數值
isunit(@numberOrAnything, "rem"); // * 判斷一個值是不是指定單位的數值
例子
/*-------------------運算和函數--------------------------*/
@back:#333;
.test{
border: 1px solid @back*2;
background: lighten(#000, 10%);
color:darken(#000, 10%);}
- 1. 響應式開發
- 2. 前端響應式開發
- 3. RxAndroid響應式開發（三）
- 4. 響應式開發心得
- 5. 響應式佈局開發
- 6. 響應式開發架構
- 7. 響應式開發總結
- 8. 響應式開發網站
- 9. AYUI7 響應式開發
- 10. vue開發PC端響應式項目
- 更多相關文章...
- • 週期性發送ARP響應包 - TCP/IP教程
- • 如何僞造ARP響應？ - TCP/IP教程
- • PHP開發工具
- • 委託模式
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 響應式開發
- 2. 前端響應式開發
- 3. RxAndroid響應式開發（三）
- 4. 響應式開發心得
- 5. 響應式佈局開發
- 6. 響應式開發架構
- 7. 響應式開發總結
- 8. 響應式開發網站
- 9. AYUI7 響應式開發
- 10. vue開發PC端響應式項目