兩個div左右布局 有html、css和JavaScript基礎(chǔ),但是沒有響應(yīng)式和流式布局等經(jīng)驗(yàn),應(yīng)該看什么書?
有html、css和JavaScript基礎(chǔ),但是沒有響應(yīng)式和流式布局等經(jīng)驗(yàn),應(yīng)該看什么書?我覺得沒有必要讀一本關(guān)于響應(yīng)和流式布局的書。這只是一個基本用法的問題。讀幾篇文章就行了!或者看看相關(guān)的API
有html、css和JavaScript基礎(chǔ),但是沒有響應(yīng)式和流式布局等經(jīng)驗(yàn),應(yīng)該看什么書?
我覺得沒有必要讀一本關(guān)于響應(yīng)和流式布局的書。這只是一個基本用法的問題。讀幾篇文章就行了!或者看看相關(guān)的API文檔就行了
!這種東西不是技術(shù)的問題,個人感覺是熟練使用的問題,是記憶的問題,經(jīng)常使用。
解釋響應(yīng)式布局,怎么實(shí)現(xiàn)的?有幾種方法實(shí)現(xiàn)?
1. 本機(jī)代碼的實(shí)現(xiàn)。
目前國內(nèi)網(wǎng)頁設(shè)計(jì)一般分為PC端和移動端兩類。但是,在某些情況下,只需設(shè)計(jì)一個頁面就可以正常使用不同的端口,因此采用了自適應(yīng)的方法。
使用本機(jī)代碼的根源是media query@media的設(shè)置。
@Media screen可以查詢當(dāng)前瀏覽器的大小,因此可以使用此方法為同一頁面設(shè)置不同的CSS樣式,以滿足不同分辨率的要求。
2. 使用bootstrap framework layout
bootstrap framework layout完成頁面自動對應(yīng)的自適應(yīng)效果。
但是,在編寫時,我們應(yīng)該嚴(yán)格遵循bootstrap的編寫標(biāo)準(zhǔn),這樣就不會出現(xiàn)奇怪的問題。
注意:最后一個數(shù)字對應(yīng)于Div占用的列數(shù)。
Col-md-6表示六個圍欄,或其中的一半,在PC側(cè)顯示為一行。
Col-sm-6表示div也顯示在平板電腦上,占當(dāng)前行的一半。
Col-xs-12表示移動終端上顯示的當(dāng)前行的100%填充。
3. 還有其他方法,如jQuery和響應(yīng)JS文件,如nicebox,可以實(shí)現(xiàn)自適應(yīng)效果和響應(yīng)布局。