響應式網頁要求設計出來的網頁在不同的顯示裝置（如大屏、普通電腦端、手機端、平闆電腦端）都能自适應顯示。這就要求設計軟體具備響應式網頁設計的能力。金蜘蛛網頁設計對響應式網頁設計支援非常好，無需要寫任何HTML代碼就能實作。本文介紹一種利用金蜘蛛網頁設計器實作響應試網頁設計的方法，非常簡單實用。上一節說到了菜單，本節講Div面闆的響應式設計，主要利用其屬性“按顯示裝置設定位置、大小、字型大小”。
二、div面闆響應式設計
1.應用例子
div面闆在網頁設計時一般用作容器建構網頁的架構。一般的Div面闆作為架構主要部分可以使用自動高度來适應響應式設計，無需要特别的設計。但如果Div面闆的高度是固定的，在不同的分辨率的裝置下顯示時，如果不随着改變，就有可能很生硬，另外如一些局部的部分往往也要随着分辨大小做響應設計。
如我們的官網(www.wyeditor.com)首頁的“立即下載下傳”（見下圖）放置于一居中的Div面闆中，在電腦端正常的浏覽器顯示是227X58大小。
這時我們改變浏覽器的寬度至于電闆電腦或手機裝置的大小，如下圖，相同的面闆大小已變為189X48了。其實上面的文字大小也改變了，後面會講到如何設定。
2.控件的屬性“按顯示裝置設定位置、大小、字型大小”
Div面闆的響應式通過“按顯示裝置設定位置、大小、字型大小”屬性實作。不隻是Div面闆有“按顯示裝置設定位置、大小、字型大小”屬性，除了一些特定的UI(如layUI、WeUI，這些控件的本身大多數已支援響應式)、還有一些如已标明有響應式的菜單外，所有的控件都有此屬性，如面闆、按鈕、文本框、下拉框、多行文本框等等。
“按顯示裝置設定位置、大小、字型大小”支援手機、平闆電腦、超大屏裝置，再加上預設的普通電腦裝置設定，一共支援四種裝置的分辨率。每種裝置可以設定的屬性項目是一樣的，如下圖：
啟用
要啟用該裝置下的設定，當然“啟用”要先裝置為“true”。啟用後後面的屬性如“隐藏”、“寬度”、“高度”、“内外邊距”等才會生效。
隐藏
該值設定為“true”後，該控件在該裝置下不顯示，不否則顯示。
寬度
該控件在此裝置下的寬度，如果為空，表示使用預設的寬度。該屬性可以設定一個百分數，如設定為90%，則表示是父控件寬度的90%；如果想設定為普通電腦下的寬度的90%，則要設定為“90%%”。
高度
該控件在此裝置下的高度，如果為空，表示使用預設的高度。該屬性可以設定一個百分數，如設定為90%，則表示是父控件高度的90%；如果想設定為普通電腦下的高度的90%，則要設定為“90%%”。
内外邊距
該控件在此裝置下的内外邊距，如果為空，表示使用預設的内外邊距。
字型大小
該控件在此裝置下的字型大小，如果為空，表示使用預設的字型大小。注意：該屬性隻對如文本框、輸入框、多行輸入框、按鈕等有顯示文字的才生效。該屬性可以屬性一個百分數，如80%表示是普通電腦設定的字型大小的80%。
增加樣式
允許自定義樣式。
3.設定例子
下面将以Div面闆設定為例，具體說明一下.
如下圖，點“建立移動網頁”建立一個空白的網頁（說明：電腦網頁不适應移動裝置下顯示，但移動網頁既可以适應電腦裝置也可以适應移動裝置顯示，是以響應式網頁都要建立移動網頁）。
在這個空白的網中建立一個面闆，分别如下設定：
位置、大小->左邊距：0；寬度：400；高度：200。
顔色->顔色：紅色。
“按顯示裝置設定位置、大小、字型大小”->“手機”->啟用：true；寬度：100%；高度：100。
“按顯示裝置設定位置、大小、字型大小”->“平闆電腦”->啟用：true；寬度：100%。
設定好後如下圖：
我們預覽看一下效果，下圖是電腦浏覽器正常情況下：
改小浏覽器寬度到742px-1024px之間(平闆電腦分辨率大小)，這時面闆的寬度已是父的100%，如下圖：
繼續改小浏覽器寬度小于742px(手機分辨率大小)，這時面闆的寬度已是父的100%，高度已變為100px，如下圖：
以上的效果正是我們在“按顯示裝置設定位置、大小、字型大小”所設定的響應式效果，更多例子可以在官網下載下傳：www.wyeditor.com/example.html。
下一節我們講響應式文本框和圖檔，敬請關注！