基本知識(shí)點(diǎn)
媒體查詢
- 關(guān)鍵字
- and
- or
- not（not 的范圍到逗號(hào)為止）
media = "only screen and (min-width:401px)"
使用媒體查詢的時(shí)候最好帶上 only 關(guān)鍵字誉察，因?yàn)榕f的瀏覽器不支持媒體查詢這樣反而不識(shí)別這段查詢代碼，不會(huì)響應(yīng)布局惹谐。如果不帶關(guān)鍵字 only 那么瀏覽器會(huì)只識(shí)別 `media = "screen..."持偏，就只會(huì)有一種布局。
-
常用的屬性簡(jiǎn)介
- width/height：視口寬度/布局視口
- device-width/height：屏幕寬度/可視視口
- 以上四個(gè)屬性都可以添加
min-/max-前綴 - orientation：設(shè)備方向
理想視口
<meta name="viewport" content="width=device-width" />
分析設(shè)計(jì)圖
- 設(shè)計(jì)原則
- 漸進(jìn)增強(qiáng)
- 優(yōu)雅降級(jí)（推薦）
- 先設(shè)計(jì)大屏還是小屏根據(jù)實(shí)際案例
- 先在一個(gè)瀏覽器調(diào)試好（推薦谷歌）
- 設(shè)置斷點(diǎn)（屏幕分辨率的分界點(diǎn)）
- 一般根據(jù)屏幕尺寸類別（大中胁虮恰）設(shè)置臨界點(diǎn)而不不是針對(duì)某個(gè)特定手機(jī)分辨率
一般小型項(xiàng)目的目錄結(jié)構(gòu)
- ResponsiveWeb（總項(xiàng)目）
- doc(項(xiàng)目相關(guān)文檔文件夾)
- .editorconfig（統(tǒng)一代碼風(fēng)格综液，編輯器會(huì)優(yōu)先按照里面的設(shè)置來(lái)格式化代碼）
- .gitignore（git提交時(shí)要忽略的文件）
- LICENSE.txt（保存版權(quán)聲明）
- README.md（項(xiàng)目簡(jiǎn)介）
- CHANGLOG.md（項(xiàng)目版本更新、修復(fù)內(nèi)容介紹）
- src（源代碼）
- css
- main.css（通用）
- normalize.css（重置）
- login.css（對(duì)應(yīng)頁(yè)面）
- js
- main.js（通用頁(yè)面）
- verdor（第三方庫(kù)文件夾）
- jquery.js
- img（圖片）
- index.html
- login.html（功能頁(yè)面）
- 404.html（默認(rèn)錯(cuò)誤頁(yè)）
- robots.txt（搜索引擎查看的文件儒飒，確定可以抓取的內(nèi)容（非強(qiáng)制））
- favicon.ico(網(wǎng)站logo)
- humans.txt（保存網(wǎng)站團(tuán)隊(duì)信息等谬莹，給別人看的）
開始編寫代碼
編碼格式
<meta charset="utf-8">，要放在 title 之前桩了，否則會(huì)無(wú)效兼容模式（IE8后開始附帽，IE11后此文檔模式被棄用）
<meta http-equiv="x-ua-compatible" content="ie-edge">
<!-- equiv中的內(nèi)容表示對(duì) IE 瀏覽器開啟兼容模式，content 中的內(nèi)容表示渲染模式井誉，edge表示強(qiáng)制使用 IE 最新的渲染模式,content="ie=EmulateIE7"表示IE7渲染模式 -->
- IE條件注釋
//IE hack gt（大于）,lt（小于）,gte（大于等于）,lte蕉扮。IE8不支持H5和媒體查詢,注意IE 和版本號(hào)之間要有空格
<!--[if lte IE 8]>
<p>您的瀏覽器版本過低，請(qǐng)更新<a >browsehappy</a></p>
<![endif]-->
-
命名規(guī)范
注意標(biāo)簽語(yǔ)義化颗圣，class 命名使用-分割喳钟，id 命名一般用于 js屁使，使用_分割（或者駝峰命名法）。- section,article 最好有標(biāo)題奔则，沒有合適的標(biāo)題用 DIV 嵌套即可蛮寂。
使用圖片
必不可少的圖片使用<img>引入，而裝飾線的圖片可以使用 CSS 樣式引入易茬。
PC 端開發(fā)
CSS Resets（重置默認(rèn)樣式）
推薦使用 Normalize.css酬蹋。-
px,em,rem
響應(yīng)式布局一般使用 em/rem，響應(yīng)式布局一般不要求百分百還原抽莱。- rem
- 不建議使用 rem 設(shè)置行高范抓，因?yàn)楣雀铻g覽器有字體號(hào)下限
- rem
小技巧
關(guān)于相鄰選擇符
設(shè)置導(dǎo)航欄時(shí)，有的時(shí)候第一個(gè)元素不需要設(shè)置樣式食铐，可以通過相鄰選擇符來(lái)設(shè)置匕垫，比如li + li-
關(guān)于 inline-block 產(chǎn)生的間距解決方案
- 可以給子元素設(shè)置 margin 負(fù)值
- 刪除 html 中子元素的空白字符
- 給父元素 font-size:0 子元素再設(shè)置 font-size
- 給父元素和子元素設(shè)置不同的 letter-spacing
-
雪碧圖 siprites
- 利用 background-position 定位
-
透明度
- 只需要背景色透明，利用 RGBA
-
box-sizing
- 可以改變盒模型的計(jì)算方式璃岳，對(duì)于inline-block 的布局可以簡(jiǎn)化計(jì)算
-
content 中的空格
- 使用
content:'最新公告：\00a0\00a0';//\00a0即空格
- 使用
文字不換行并使用省略號(hào)
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
-
相同圖片不同顏色
- 使用濾鏡 filter 屬性
- 前綴可以通過 在線添加前綴網(wǎng)站 生成
-
清除浮動(dòng)
父容器末尾添加一個(gè)子元素年缎，樣式
clear:both（不建議）給父容器添加
overflow:auto/hidden;屬性給父元素也設(shè)置浮動(dòng)屬性（不建議悔捶，影響頁(yè)面布局）
-
使用
:after偽元素.clearfix:after { content: "."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { zoom: 1;//為了兼容 IE6铃慷，IE7，觸發(fā) haslayout } -
觸發(fā) BFC（原理就是觸發(fā)BFC）
- float
- overflow:auto/hidden
- display:table-cell/table-caption/inbline-block
- position:fixed/absolute
-
改進(jìn)方案
.clearfix:before, .clearfix:after { //before防止頂部疊加 content: " "; display: table; } .clearfix:after { clear: both; }
移動(dòng)端開發(fā)
媒體查詢
可以寫在樣式表最后或則每個(gè)變化元素之后蜕该。-
確定斷點(diǎn)
- 根據(jù)設(shè)計(jì)稿來(lái)設(shè)計(jì)犁柜。利用谷歌開發(fā)者工具查看。最低寬度可以限制為 320px堂淡，低于這個(gè)就不需要適配了馋缅。
- 寫媒體查詢的時(shí)候可以同屏顯示兩個(gè)窗口，方便寫樣式
CSS3選擇器
-
表格響應(yīng)式處理（在小屏幕下的解決方案）
- 隱藏表格不重要的列
- 表格橫列倒置
- 轉(zhuǎn)變成表單格式展示
針對(duì)打印的 樣式
@media print {
*,
*:before,
*:after { // 清除背景色
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited { // 加下劃線
text-decoration: underline;
}
a[href]:after {
content: "("attr"(href)")";
}
footer {
width: 100%;
}
a[href^="#"]:after,
a[href^="javascript:"]:after { // js調(diào)試的不用打
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 {
orphans: 3; // 分頁(yè)時(shí)底部保留的最少行數(shù)
widows: 3; // 分頁(yè)時(shí)頂部保留的最少行數(shù)
}
h2,
h3 {
page-break-after: avoid; //避免在元素后插入分頁(yè)符
}
}
-
響應(yīng)式廣告和圖片
- 挑選第三方組件
- 使用人數(shù)
- 是否開源
- 文檔是否齊全
- 活躍性
- 輕量級(jí)
- OwlCarousel2（建議使用绢淀。201610）
- 挑選第三方組件
-
響應(yīng)式圖片
- js 或服務(wù)端
- 獲取客戶端尺寸后動(dòng)態(tài)更改圖片源或者服務(wù)器判斷后返回
- srcset 屬性配合 sizes（實(shí)現(xiàn)在不同分辨率下顯示一張圖片的不同規(guī)格）
<img srcset="img/480.png 480w,img/800.png 800w" sizes="(min-width:800px) 800px, 100vw">- w 為圖片尺寸萤悴，vw 為視口寬度，sizes 告訴瀏覽器圖片的寬度占整個(gè)div的百分比皆的，瀏覽器也會(huì)根據(jù)此來(lái)設(shè)置圖片寬度覆履，可以設(shè)置媒體查詢 瀏覽器會(huì)用自己的規(guī)則（網(wǎng)絡(luò)，尺寸等）綜合考慮后更改圖片源
- picture（實(shí)現(xiàn)多組圖片匹配）
<picture> <source media="(min-width:36em)" srcset="img/xxx.jpg 768w"/> <source media="(min-width:36em)" srcset="img/xxx.jpg 1800w"/> <source type="image/svg+xml" srcset="xxx.svg 800w,xxx.svg 1800w"/>//如果瀏覽器支持該格式的圖片就會(huì)顯示 <img src="xxx.jpg"> </picture> // 瀏覽器會(huì)匹配媒體查詢/或者條件查詢后的結(jié)果然后顯示對(duì)應(yīng)的圖片 - js 或服務(wù)端
-
小工具
- polyfill（填平瀏覽器兼容的坑费薄，解決兼容性的統(tǒng)稱硝全，腳本，可以放心的使用新特效）
- picturefill 庫(kù)（可以使用上面提到的 picture srcset）
- 圖片在線壓縮網(wǎng)站
- polyfill（填平瀏覽器兼容的坑费薄，解決兼容性的統(tǒng)稱硝全，腳本，可以放心的使用新特效）
設(shè)備兼容性調(diào)試
發(fā)布前需要進(jìn)行兼容性測(cè)試楞抡，虛擬機(jī)伟众。
安卓虛擬機(jī)
iOS虛擬機(jī)可以用 XCode
-
兼容性解決
- 使用新特性前去 caniuse 查看
- 瀏覽器hacks
- 使用庫(kù)
- polyfill
- resopnd（IE678 媒體查詢）
- shiv
- html5shiv（HTML5新標(biāo)簽）
- Modernizr（檢測(cè)新特性的兼容性，再做不同情況的樣式處理）
- polyfill
-
在多個(gè)設(shè)備進(jìn)行測(cè)試
browsersync
可以多個(gè)瀏覽器同時(shí)查看網(wǎng)頁(yè)召廷。http://www.browsersync.cn/凳厢≌穗剩可以通過 npm 安裝-
啟動(dòng)服務(wù)
- `browser-sync start --server "目錄" --files "監(jiān)聽的文件，可以通配符或者文件夾先紫，寫目錄也行"
Node.js簡(jiǎn)介
是一個(gè)基于 Chrome V8 引擎的 JS 運(yùn)行環(huán)境找爱。可以在非 JS 環(huán)境下運(yùn)行 JS 代碼泡孩。npm 是其中一個(gè)功能车摄。
npm 的使用
-
install xx
在當(dāng)前文件目錄下執(zhí)行
npm install jquery就會(huì)安裝插件 -
node_modules 文件夾
使用 npm 安裝的第三方庫(kù)會(huì)統(tǒng)一安裝到這個(gè)目錄下，沒有必要進(jìn)行 git,svn 版本管理仑鸥，使用 package.json 進(jìn)行統(tǒng)一的包管理即可吮播。
-
package.json
運(yùn)行命令
npm init，向?qū)渲煤笊梢粋€(gè) json 文件
{
"name": "nodetest",
"version": "1.0.0",
"description": "readme.txt",
"main": "test.js",
"dependencies": {
"jquery": "^3.1.1"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
}
"author": "",
"license": "ISC"
}
dependencies眼俊，生產(chǎn)環(huán)境（上線）所需要的包
devDependencies意狠，開發(fā)項(xiàng)目時(shí)需要的包寫在這里
-
"jquery": "^3.1.1"- ^ 表示大版本號(hào)要一致，總的版本號(hào)要大于等于該版本
- ~ 表示前幾位要一致疮胖，后一位可以不同
- 如果無(wú)前綴則是精確版本
-
利用 npm 安裝依賴包
直接運(yùn)行 npm install 即可环戈，會(huì)根據(jù) package.json 安裝依賴的包
-
npm install xx --production安裝到生產(chǎn)包 -
npm install xx --dev安裝到開發(fā)環(huán)境包 -
npm install -g jquery安裝后全部本地項(xiàng)目不需要安裝
-
-
更新 package.json
安裝包的時(shí)候加上后綴。
-
--save-dev開發(fā)環(huán)境 -
--save生產(chǎn)環(huán)境
-
-
卸載包
uninstall澎灸，要更新 package.json 也要加上 save 后綴
-
更新包
update 包
局域網(wǎng)訪問（遠(yuǎn)程訪問）
-
使用 http-server
npm install http-server -g -
設(shè)定根目錄
-
http-server [path][options]//path 即文件路徑院塞。啟動(dòng)后會(huì)提供兩個(gè)地址，一個(gè)本地一個(gè)局域網(wǎng) -
http-server [path] -p [端口號(hào)]指定端口
-
Ctrl+C結(jié)束服務(wù)性昭。
打包發(fā)布
發(fā)布前的代碼優(yōu)化
- 壓縮/合并/增加版本號(hào)
- 手動(dòng)在線壓縮
- 使用工具
- Grunt/自動(dòng)化構(gòu)建工具
- Gulp/自動(dòng)化構(gòu)建工具拦止，推薦
- Webpack/靜態(tài)資源打包工具
Gulp 介紹
npm 安裝，一般作為開發(fā)依賴項(xiàng)安裝糜颠，生產(chǎn)環(huán)境不需要使用汹族。npm install gulp --save-dev
注意：該包全局安裝后還需要在項(xiàng)目安裝一次。繼續(xù)安裝插件（可以在gulp官網(wǎng)查詢功能）
npm install gulp-rev gulp-rev-replace gulp-useref gulp-filter gulp-uglify gulp-csso --save-dev
- gulp-rev 添加版本號(hào)其兴，給文件名添加哈希碼顶瞒，內(nèi)容更新后哈希碼會(huì)改變，告訴客戶端的緩存需要更新元旬。減少人工維護(hù)
- gulp-rev-replace 添加哈希碼后榴徐，更新文件中的引用名
- gulp-useref 可以在HTML里通過注釋的形式寫方法，告訴 gulp 應(yīng)該如何操作注釋里面的內(nèi)容
<!-- build:css css/combined.css -->
引用CSS//把全部CSS壓縮為 combined.css
<!-- endbuild -->
<!-- build:js js/combined.js -->
引用js
<!-- endbuild -->
- gulp-filter 過濾器法绵，比如篩選出全部js文件壓縮后放回箕速，再選擇其他文件操作
- gulp-uglify 壓縮 js 代碼
- gulp-csso 壓縮 css 代碼
創(chuàng)建 gulpfile.js 定義 gulp 的任務(wù)，在里面定義好任務(wù)朋譬，然后通過 gulp taskName//若名字為 default 即默認(rèn)任務(wù) 執(zhí)行任務(wù)盐茎。
// 簡(jiǎn)單的一個(gè)打包壓縮代碼，gulpfile.js
var gulp = require('gulp');
var rev = require('gulp-rev');
var revReplace = require('gulp-rev-replace');
var useref = require('gulp-useref');
var filter = require('gulp-filter');
var uglify = require('gulp-uglify');
var csso = require('gulp-csso');
// 如果是default任務(wù)名徙赢，執(zhí)行時(shí)可不聲明
gulp.task('default',function(){
var jsFilter = filter('**/*.js',{restore: true});
var cssFilter = filter('**/*.css',{restore: true});
var indexHtmlFilter = filter(['**/*','!**/index.html'],{restore: true})//抓取全部文件但排除index.html（為了保留默認(rèn)首頁(yè)文件名）;
return gulp.src('src/index.html')//這里src設(shè)置要操作的文件
.pipe(useref())//抓取注釋后需要操作的代碼到“水流中”
.pipe(jsFilter)//篩選出JS
.pipe(uglify())//進(jìn)行壓縮操作
.pipe(jsFilter.restore)//操作完JS后扔回流里
.pipe(cssFilter)
.pipe(csso())
.pipe(cssFilter.restore)
.pipe(indexHtmlFilter)
.pipe(rev())//生成哈希號(hào)版本名
.pipe(indexHtmlFilter.restore)
.pipe(revReplace())//更新引用
.pipe(gulp.dest('dist'));//扔入到該目錄
});
//注意：注釋中 `/*! 這樣寫的注釋不會(huì)被壓縮 */ `
壓縮完改動(dòng)后生成的舊版本 css 不要去刪除字柠，因?yàn)榭赡苡杏脩粼谠L問探越，除非過去很多個(gè)版本了。
