RWD:修訂版本之間的差異

出自福留子孫
跳轉到: 導覽搜尋
圖片
 
(未顯示2位用戶所作出之3次版本)
第 1 行: 第 1 行:
 
[[分類:程式語言]]
 
[[分類:程式語言]]
 +
==概論==
 
===何為響應式網頁?===
 
===何為響應式網頁?===
 +
響應式網頁設計(英語:Responsive web design,通常縮寫為RWD),或稱自適應網頁設計、回應式網頁設計、對應式網頁設計。 是一種網頁設計的技術做法,該設計可使網站在不同的裝置(從桌面電腦顯示器到行動電話或其他行動產品裝置)上瀏覽時對應不同解析度皆有適合的呈現,減少使用者進行縮放、平移和捲動等操作行為。
 +
 +
==方法==
 +
===圖片===
 +
<pre>img{
 +
    max-width:100%; /*不使用width:100% 是因避免圖片解析度不好,隨父元素被放大時會糊掉*/
 +
    height:auto;
 +
}</pre>
 +
 +
參考[https://ithelp.ithome.com.tw/articles/10220731 響應式圖片設計],待續。
 +
====要領====
 +
#RWD網頁中,LOGO建議是用svg格式的圖片,才不會因瀏覽器的大小而導致圖片失真。

2021年5月29日 (六) 20:46的最新修訂版本

概論

何為響應式網頁?

響應式網頁設計(英語:Responsive web design,通常縮寫為RWD),或稱自適應網頁設計、回應式網頁設計、對應式網頁設計。 是一種網頁設計的技術做法,該設計可使網站在不同的裝置(從桌面電腦顯示器到行動電話或其他行動產品裝置)上瀏覽時對應不同解析度皆有適合的呈現,減少使用者進行縮放、平移和捲動等操作行為。

方法

圖片

img{
    max-width:100%; /*不使用width:100% 是因避免圖片解析度不好,隨父元素被放大時會糊掉*/
    height:auto;
}

參考響應式圖片設計,待續。

要領

  1. RWD網頁中,LOGO建議是用svg格式的圖片,才不會因瀏覽器的大小而導致圖片失真。