響應式網頁製作的一種方法(3)

語言: CN / TW / HK

響應式網頁要求設計出來的網頁在不同的顯示裝置(如大屏、普通電腦端、手機端、平板電腦端)都能自適應顯示。這就要求設計軟體具備響應式網頁設計的能力。金蜘蛛網頁設計器對響應式網頁設計支援非常好,無需要寫任何HTML程式碼就能實現。本文介紹一種利用金蜘蛛網頁設計器實現響應式網頁設計的方法,非常簡單實用。上一節說到了Div面板的響應式設計,本節講圖片、文字框的響應式設計。

三、圖片、文字框的響應式設計

1.圖片的響應式設計

一般在電腦端瀏覽器顯示圖片,由於分辨一般比較大,都會盡量顯示原圖片大小,如果顯示不了原圖大小也會盡量按比例縮小到一個體驗比較好的大小。這樣一張大小的圖片到了手機、平板電腦分辨比較小的裝置顯示如果還按電腦瀏覽器設計的大小顯示,就可能會顯示不全了。如果在這些移動裝置下圖片能自動縮小至裝置的合適顯示的大於,那就完美了。金蜘蛛網頁設計器的圖片功能就自帶了這個功能。

下面我們以例子說明圖片對響應式的支援

如下圖,點“建立移動網頁”建立一個空白的網頁( 說明: 電腦網頁不適應移動裝置下顯示,但移動網頁既可以適應電腦裝置也可以適應移動裝置顯示,所以響應式網頁都要建立移動網頁)。

在這個空白的網中建立一個圖片, 屬性“位置、大小”->“按當前大小比例自適應”為“true”。 另外只把“按原始大小比例自適應”設定為“true”也可以。 區別是“按當前大小比例自適應”也可以應用於其他如面板等控制元件,而“按原始大小比例自適應”只適用於圖片,對於圖片來說用“按原始大小比例自適應”能確保圖片不會變形,但從嚴格意義上來說“按當前大小比例自適應”才是真正的響應式,圖片的可以大小隨著瀏覽器寬度改變而改變,而“按原始大小比例自適應”只是開啟網頁初始化時執行一次,大小不會隨著瀏覽器寬度改變而改變,對於移動裝置下沒有問題,因為移動裝置器的瀏覽器大小一般改不了。 如下圖:

另外,圖片的對應方式我們一般都採用“水平居中對齊_執行網頁後生效”,如上圖。

如上所述,僅需要把圖片的 屬性“位置、大小”->“按當前大小比例自適應”為“true”可以實現響應圖片計。 預覽網頁,不斷改小瀏覽器的寬度,瀏覽器的寬度小到移動設定的寬度後,圖片寬度就一直是瀏覽器寬度的大小;這時再改大瀏覽器的寬度,發現圖片又會隨著瀏覽器寬度大小而改變,直接到達圖片原大小後不再改變。如下圖:

注意:圖片隨著瀏覽器大小改變而改變需要金蜘蛛網頁設計器 V8.2以上的版本才支援,小於此版本的只支援圖片開啟初始時自適應瀏覽器大小。

2.文字框的響應式設計

文字框的響應式設計首先要把: 其屬性“位置、大小”->“自動寬度”、“自動高度”,“自動左邊距”設計為“true”, 如果“自動寬度”不設定為“true”的話,則要把“與父寬度同”設定為“true”,效果是一樣的。另外為了測試需要我們把文字框的字型大小改為25,如圖下圖:

預覽網頁,不斷改小瀏覽器的寬度,文字會隨著瀏覽器的寬度改小而自適應,一行裝不下,又起一行,改大瀏覽器寬度,也是可以自適應的。如下圖:

大家有沒有發現,文字大小並沒有隨著改變。要改變文字大小,需要在“按顯示裝置設定位置、大小、字型大小等”針對不同裝置進行設定。在這裡我們進行了如下圖的設定:

再預覽網頁,不斷改大或改小瀏覽器的寬度,在不同裝置的分辨下文字也會隨著改變。( 說明:字型大小可以是一個百分數或一個固定值,如果是百分數,表示是原字型大小的百分之多少) 如下圖:

本文的響應式網頁設計到此已講完,我們的官網 ​https://wyeditor.com/doc/index.html​ 有更多的資料,歡迎檢視!