day2

響應(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圖像。


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 5.一次完整的HTTP事務(wù)是怎樣的一個(gè)過程? 詳細(xì)版 1、瀏覽器會(huì)開啟一個(gè)線程來處理這個(gè)請(qǐng)求,對(duì) URL 分析判斷...
    公子七閱讀 229評(píng)論 0 0
  • 課程大綱 考試流程 托福寫作有兩個(gè)板塊:(沒有大小重要之分,兩個(gè)都是15分) 綜合寫作:閱讀+聽力+寫(150-2...
    Babus閱讀 897評(píng)論 0 2
  • 這一天的課程分兩節(jié)課進(jìn)行講解,兩節(jié)課沒有太深入的內(nèi)容,主要還是進(jìn)行科普為后面的技術(shù)延伸講解做準(zhǔn)備。一節(jié)講接口測(cè)試分...
    新版黑巖射手閱讀 523評(píng)論 1 3
  • 1.CSS的作用HTML:它是整個(gè)網(wǎng)站的骨架。CSS:它是對(duì)整個(gè)網(wǎng)站骨架的內(nèi)容進(jìn)行美化修飾2.CSS的引入方式 C...
    路人愛早茶閱讀 256評(píng)論 0 0
  • 我讀初中時(shí),是1999年。那時(shí)方便面5角錢一帶,對(duì)于一周只有10元伙食費(fèi)的我們來說,是非常奢侈的零食。而方便面調(diào)料...
    微凹閱讀 736評(píng)論 3 5

友情鏈接更多精彩內(nèi)容