如何制作響應(yīng)式網(wǎng)站？HTML5做一個(gè)響應(yīng)式的網(wǎng)頁，需要考慮是全平臺適配還是僅僅移動(dòng)適配。這里以一個(gè)移動(dòng)響應(yīng)式網(wǎng)站為例，介紹如何制作響應(yīng)式網(wǎng)頁。1、選定的基本設(shè)計(jì)尺寸，一般以1080為基礎(chǔ)。確定響應(yīng)式網(wǎng)

如何制作響應(yīng)式網(wǎng)站？

HTML5做一個(gè)響應(yīng)式的網(wǎng)頁，需要考慮是全平臺適配還是僅僅移動(dòng)適配。這里以一個(gè)移動(dòng)響應(yīng)式網(wǎng)站為例，介紹如何制作響應(yīng)式網(wǎng)頁。

1、選定的基本設(shè)計(jì)尺寸，一般以1080為基礎(chǔ)。確定響應(yīng)式網(wǎng)頁設(shè)計(jì)的應(yīng)用場景后，與美工(或設(shè)計(jì)師)溝通。之前一般需要美工畫幾套主流移動(dòng)設(shè)備屏幕分辨率的設(shè)計(jì)圖?，F(xiàn)在，根據(jù)移動(dòng)設(shè)備最常用的屏幕分辨率，一套設(shè)計(jì)圖可以用于流式布局和rem。

2.美工完成設(shè)計(jì)，前端工程師的工作就開始了。這時(shí)候可以用PS或者FW來切圖。一般來說Fireworkscs6切圖比較快，但是有時(shí)候在Fireworks中會發(fā)生畫面失真的情況，所以有時(shí)候需要使用PS來配合，PS有切片工具可以專門用來切圖。

解釋響應(yīng)式布局，怎么實(shí)現(xiàn)的？有幾種方法實(shí)現(xiàn)？

1 .原生代碼實(shí)現(xiàn)。

目前國內(nèi)設(shè)計(jì)一個(gè)網(wǎng)頁時(shí)，一般分為PC端和移動(dòng)端兩套頁面。但在某些情況下，必須滿足只設(shè)計(jì)一個(gè)頁面，不同端口可以正常使用。

因此，將使用自適應(yīng)方法。

原生代碼實(shí)現(xiàn)的，在于media query @media的設(shè)置。

@media screen可以查詢當(dāng)前瀏覽器的大小，所以可以用這個(gè)方法為同一個(gè)頁面設(shè)置不同的CSS樣式，以滿足不同的分辨率要求。

2.采用bootstrap框架布局。

bootstrap框架布局的頁面是自動(dòng)對應(yīng)的自適應(yīng)效果。

然而，在寫作時(shí)，我們應(yīng)該嚴(yán)格遵循bootstrap 的寫作規(guī)范，這樣就不會出現(xiàn)怪異的問題。

寫作范例:

注意:最后一個(gè)數(shù)字對應(yīng)于div占據(jù)的圍欄中的列數(shù)。

Col-md-6代表PC端一行顯示的六個(gè)柵欄，也就是一半。

Col-sm-6表示div占平板當(dāng)前行的一半。

Col-xs-12代表移動(dòng)上顯示的當(dāng)前行的100%填充。

3.還有其他，比如專門做響應(yīng)的JQuery和JS文件，比如nicebox，可以實(shí)現(xiàn)自適應(yīng)的效果和響應(yīng)式的布局。

HTML中的響應(yīng)式是什么？

反應(yīng)就是這個(gè)問題衍生出來的一個(gè)概念。它可以自動(dòng)識別屏幕寬度，并對網(wǎng)頁設(shè)計(jì)做出相應(yīng)的調(diào)整，版面和顯示內(nèi)容可能會發(fā)生變化。

響應(yīng):根據(jù)不同的設(shè)備、不同的寬度、不同的特性，相應(yīng)調(diào)整頁面上內(nèi)容的樣式，調(diào)整響應(yīng)的布局和內(nèi)容。

如何使用axure 7.0為你設(shè)計(jì)響應(yīng)式的網(wǎng)站？

點(diǎn)擊標(biāo)尺旁邊的響應(yīng)式設(shè)置按鈕，進(jìn)入設(shè)置不同條件的頁面，然后繪制要在相應(yīng)頁面顯示的內(nèi)容?？梢赃x擇繼承。