目前位置: 首頁 > HTML5、CSS3、其他 > 006、Editplus 設定網頁的 Viewport (多檔案的取代方法)

006、Editplus 設定網頁的 Viewport (多檔案的取代方法) 超大 稍大 微大

ECSHOP 繁體中文版-響應式模板-虛擬主機::ECSHOP2.7.3繁體中文全支援-原來如此 發表於: 2017-10-06

網頁若要能支援響應式布局,viewport 的設定就非常重要,因為 viewport 會告訴瀏覽器,應該使用何種標準來自動調整頁面布局,讓不同寬度的設備能在同一套模板中都能順利瀏覽,除了易於管理外,也提高了消費者更好的瀏覽體驗...


viewport 比較常用的屬性設定如下 :

用戶設備寬度 : device-width
初始縮放比率 : initial-scale:最小0.25,最大5
最小縮放比率 : minimum-scale:最小0.25,最大5
最大縮放比率 : maximum-scale:最小0.25,最大5
是否允許縮放 : user-scalable:1 或 0 (yes 或 no)


<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=0;">
這個例子中的 initial-scale=1.0;user-scalable=0,其實就是不讓使用者縮放,以維持頁面的設計,但這對視力不好的人來說不太友好


<meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=3.0; user-scalable=1;">
這個例子中的 user-scalable=1,就是允許使用者在1至3被之間縮放,至於如何設定請自行按照需求設置


雖然之前介紹過 Brackets 在多檔取代上的用法,不過 Brackets 並沒有經過確認就直接存檔,這對某些人來說非常危險,如果不想因為大意而一切重來,倒是可以考慮使用 Editplus 來做某些工作,Editplus 小巧輕盈啟動快,對於文字編輯功能有其獨特之處,至於下載與使用網路上應該很多,本文只教你如何使用 Editplus 做多檔案的取代方法


用 Editplus 開啟所有 DWT 模板檔,下圖是將 DWT 檔案設定為HTML類型:
Editplus多檔案的取代方法
Editplus多檔案的取代方法


選取 <meta charset="UTF-8" />然後按 Ctrl + H開啟取代面板:
Editplus多檔案的取代方法


取代內容文字框輸入 <meta charset="UTF-8" /><meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=0;">然後按 全部取代所有修改過檔案名稱前的圓點都已變成紅色
Editplus多檔案的取代方法


在檔案名稱上按右鍵可以選擇儲存或關閉所有修改的檔案,也可以選擇只儲存或關閉目前選擇的檔案,這樣的取代方式是不是比較符合你的需求:
Editplus多檔案的取代方法

只有本站虛擬主機會員才能對文章發表問題
如果你是本站虛擬主機會員請先至會員中心首頁綁定主機帳號
其他會員請至留言板提問!