響應(yīng)式設(shè)計(jì)
三大設(shè)計(jì)理念:
1.流動(dòng)網(wǎng)格(彈性網(wǎng)格)
2.彈性圖片
3.媒體查詢
優(yōu)點(diǎn):
1.減少工作量。改變 js腳本,css樣式。
2.節(jié)省時(shí)間,提高效率。
3.適應(yīng)多設(shè)備,用戶體驗(yàn),用戶分布。
4.搜索優(yōu)化
rem IE8以下不支持。
兼容的話 把px寫前面,在寫rem。
瀏覽器狀況
360雙核 。 急速時(shí)用的是webkit,兼容用IE。
qq用的是X5內(nèi)核。
媒體查詢
css2 就有,css3增強(qiáng)。
@meida only screen and( ?)
不要省略only。老舊瀏覽器無法識(shí)別only,讀到only后不解析后面的,省略only 會(huì)全部情況下應(yīng)用此樣式。
斷點(diǎn)設(shè)計(jì)
1.針對(duì)屏幕大小進(jìn)行分割比較合理(相對(duì)于對(duì)特定設(shè)備)
2優(yōu)雅降級(jí)最好
組織項(xiàng)目目錄結(jié)構(gòu)
1.約定優(yōu)于配置
2約定命名規(guī)范,代碼結(jié)構(gòu)減少配置。
網(wǎng)站LOGO
比特蟲網(wǎng)站制作icon。
favicon.ico
MarkDown
readme.md
程序,軟件說明,比txt要好點(diǎn)。
HTML5
section 區(qū)塊
article 特殊的section
b 引起注意
em 強(qiáng)調(diào),這很重要
class 用于樣式,一般寫成abc-123
id用于JS操作,一般用駝峰大小寫
CSS
resets.css 清除默認(rèn)的瀏覽器樣式,統(tǒng)一初始。
normolize.css 更針對(duì)每個(gè)標(biāo)簽進(jìn)行必要的初始化, bootstrap等框架使用的初始樣式表
:not() 偽類選擇選,括號(hào)里不能再寫其他的帶冒號(hào)的
響應(yīng)式下的表格處理
1 隱藏某些表格
2 將一些行變成列。
組件挑選方式
1使用人數(shù)
2是不是有文檔
3是不是還有人繼續(xù)維護(hù)
4 小巧夠用
響應(yīng)式圖片
以流量,體驗(yàn)為主,加載與用戶頁面相應(yīng)的圖片。
實(shí)現(xiàn)方式:
1 JS或者服務(wù)器端實(shí)現(xiàn) ?查詢屏幕寬度,改變圖片的src。
2 srcset屬性方式 ?在CSS中實(shí)現(xiàn)。
img src="img/Star.png" alt="star"
srcset="img/Star.png 345w, img/Star@2x.png 690w, img/Star@3x.png 1035w"
3 picture元素,設(shè)置source。
配合picturefill.js插件使用
picture
source srcset="img/Star@3x.png" media="(min-width: 1000px)"
source srcset="img/Star@3x.png" media="(min-width: 1000px)"
img srcset="img/Star.png" alt="star"
/picture
4 svg圖像。