RWD - 修訂歷史

林芸伍：/* 三、參考資料 */

2022-03-11T11:42:58Z

‎三、參考資料

林芸伍：/* 三、參考資料 */

2022-03-11T11:41:52Z

‎三、參考資料

林芸伍：/* 一、簡介 */

2022-03-11T11:40:59Z

‎一、簡介

顯示變更

林芸伍：/* 一、簡介 */

2022-03-04T12:18:37Z

‎一、簡介

林芸伍：/* 三、參考資料 */

2022-02-18T07:57:20Z

‎三、參考資料

林芸伍：/* 一、簡介 */

2022-02-18T07:50:06Z

‎一、簡介

林芸伍：/* 一、簡介 */

2022-02-18T07:47:58Z

‎一、簡介

林芸伍：/* 一、簡介 */

2022-02-18T06:08:27Z

‎一、簡介

林芸伍：/* 一、簡介 */

2022-02-18T03:09:07Z

‎一、簡介

林芸伍：/* 三、參考資料 */

2022-02-18T02:17:11Z

‎三、參考資料

@@ 行 63： / 行 63： @@
 ##*平台可支援的事件整理 https://www.quirksmode.org/mobile/tableTouch.html
 ##*拖曳及事件範例  https://iter01.com/577194.html
 #漢堡選單：https://sinlin0908.github.io/2020/02/15/web_practice/hamburger-menu/
 #下拉選單參考網頁

@@ 行 58： / 行 58： @@
 ##*CSS  https://www.casper.tw/css/2016/12/06/css-status/
 ##*JAVA https://medium.com/@shizukuichi/mouse-event-%E5%B0%8F%E7%AD%86%E8%A8%98-feb5dd866b0
-##手機、平板點擊
+##手機、平板點擊、拖曳
 ##*touch & mouse event https://medium.com/frochu/touch-and-mouse-together-76fb69114c04
 ##*touch event https://developer.mozilla.org/zh-TW/docs/Web/API/Touch_events
 ##*平台可支援的事件整理 https://www.quirksmode.org/mobile/tableTouch.html
 #漢堡選單：https://sinlin0908.github.io/2020/02/15/web_practice/hamburger-menu/
 #下拉選單參考網頁

@@ 行 56： / 行 56： @@
 ##*此外，APP開發時還有 iOS pt 與 dp (Android)，換算公式如右：1 iOS pt ≈ 1/163 inch, 1 dp ≈ 1/160 inch<br>在開發網頁或是APP時，裝置會自動根據用戶手機來呈現布局與圖檔大小。
 ##相對單位(em,px,vw,vh,%) <br>因為在電腦上看1公分很小，但在手機上看1公分比例佔很大，所以我們會需要相對單位。<br><b>註：最常用的為CSS px 及 vw,vh,%</b>
-###em<br>它僅僅表示字體大小，我們可以在最外層設定字體大小(font-size:20px)，這樣1em就是20px，若在下方子元素中都使用em來表示長度及字體大小，這樣文字大小就可以保持比例，也可以統一調整最外層字體大小來縮放。<br>舉例來說： text-indent: 1.5em 以及 margin: .5em 在css中都很常見<br>也可以應用在padding,border等CSS元素中。
+###em<br>它僅僅表示字體大小，我們可以設定字體大小(font-size:20px)，這樣1em就是20px，這樣其他元素中都可使用em來表示長度及字體大小，這樣文字大小與其他長度、寬度就可以保持比例，(若是不寫會直接繼承父元素的font-size，也可以統一調整最外層字體大小來縮放。)<br>舉例來說： text-indent: 1.5em 以及 margin: .5em 在css中都很常見<br>也可以應用在padding,border等CSS元素中。
 ###Pixel<br>又稱px(為避免與CSS px混淆，以下都會稱Pixel)，是指像素點，比如說電腦螢幕寬度1920x1440 這邊的單位就是Pixel，表示電腦螢幕長1920像素點，寬1440像素點。<br>對於螢幕來說，這邊就可以引進PPI(Pixel per Inch)，也就是每英吋中有多少Pixel。<br>科技日新月異，手機的PPI在近十年突破性的發展，隨便都破400PPI (有的手機甚至是1284x2778)，這樣會影響RWD的發展，所以就出現了專門為css設計的px單位。
 ###CSS px<br>其與字體無關，也與絕對長度無關。其被定義為小但仍可見，他並不是不變的，而是會隨著裝置與使用方法而變。<br>他與螢幕像素之間有個倍率關係，而使得手機的px可以落在300~400左右。目前我們查到的裝置螢幕寬度大部分都是換算後的px結果。<br>若真的要與絕對長度對比，有個簡單的參考定義如右：筆電:1 px ≈ 1/125 inch 智慧型手機/平板:1 px ≈ 1/160 inch

@@ 行 102： / 行 102： @@
 #*https://www.w3.org/Style/Examples/007/units.zh_HK.html
 #*https://editor.leonh.space/2021/rediscover-pixel-dpi-ppi-and-pixel-density/
-#滑鼠事件參考：
+#事件參考：
-#*CSS 偽類  https://developer.mozilla.org/zh-TW/docs/Web/CSS/Pseudo-classes
+##滑鼠
-#*CSS  https://www.casper.tw/css/2016/12/06/css-status/
+##*CSS 偽類  https://developer.mozilla.org/zh-TW/docs/Web/CSS/Pseudo-classes
-#*JAVA https://medium.com/@shizukuichi/mouse-event-%E5%B0%8F%E7%AD%86%E8%A8%98-feb5dd866b0
+##*CSS  https://www.casper.tw/css/2016/12/06/css-status/
 #漢堡選單：https://sinlin0908.github.io/2020/02/15/web_practice/hamburger-menu/
 #下拉選單參考網頁

@@ 行 87： / 行 87： @@
 ##*點擊事件的觸發順序為 mousedown > mouseup > click
 ##*mouseenter 和 mouseleave 的觸發行為跟 CSS 的 hover 非常相似，mouseenter 在滑鼠完全離開元素 (mouseleave) 前不會再次觸發。
-##*最後建議，手機或平板上最好是用click比較恰當，因為沒有滑鼠，須盡量避免CSS的寫法。
+##*<b>最後建議，手機或平板上最好是用click比較恰當，因為沒有滑鼠，須盡量避免CSS的寫法。</b>
 ====二、方法 ====

@@ 行 55： / 行 55： @@
 ##*所謂的絕對單位就是實際上的長度單位，如果電腦解析度夠高就可以精確的表示出1公分或是1英吋。通常會用在影印紙張時，為求精確設定而存在。<br>可如右式互相換算：1in = 2.54cm= 25.4mm = 72pt = 6pc
 ##*此外，APP開發時還有 iOS pt 與 dp (Android)，換算公式如右：1 iOS pt ≈ 1/163 inch, 1 dp ≈ 1/160 inch<br>在開發網頁或是APP時，裝置會自動根據用戶手機來呈現布局與圖檔大小。
-##相對單位(em,px,vw,vh,%)<br>因為在電腦上看1公分很小，但在手機上看1公分比例佔很大，所以我們會需要相對單位。
+##相對單位(em,px,vw,vh,%) <br>因為在電腦上看1公分很小，但在手機上看1公分比例佔很大，所以我們會需要相對單位。<br><b>註：最常用的為CSS px 及 vw,vh,%</b>
-###em<br>它僅僅表示字體大小，在2英吋的元素中，1em就是2英吋，這樣文字大小就可以保持比例。<br>而 text-indent: 1.5em 以及 margin: 1em 在css中都常見
+###em<br>它僅僅表示字體大小，我們可以在最外層設定字體大小(font-size:20px)，這樣1em就是20px，若在下方子元素中都使用em來表示長度及字體大小，這樣文字大小就可以保持比例，也可以統一調整最外層字體大小來縮放。<br>舉例來說： text-indent: 1.5em 以及 margin: .5em 在css中都很常見<br>也可以應用在padding,border等CSS元素中。
 ###Pixel<br>又稱px(為避免與CSS px混淆，以下都會稱Pixel)，是指像素點，比如說電腦螢幕寬度1920x1440 這邊的單位就是Pixel，表示電腦螢幕長1920像素點，寬1440像素點。<br>對於螢幕來說，這邊就可以引進PPI(Pixel per Inch)，也就是每英吋中有多少Pixel。<br>科技日新月異，手機的PPI在近十年突破性的發展，隨便都破400PPI (有的手機甚至是1284x2778)，這樣會影響RWD的發展，所以就出現了專門為css設計的px單位。
 ###CSS px<br>其與字體無關，也與絕對長度無關。其被定義為小但仍可見，他並不是不變的，而是會隨著裝置與使用方法而變。<br>他與螢幕像素之間有個倍率關係，而使得手機的px可以落在300~400左右。目前我們查到的裝置螢幕寬度大部分都是換算後的px結果。<br>若真的要與絕對長度對比，有個簡單的參考定義如右：筆電:1 px ≈ 1/125 inch 智慧型手機/平板:1 px ≈ 1/160 inch
-###RWD常用<br>vw & vh，分別代表視窗的100分之1的高度與寬度；<br>%則是相對於元件的比例。三者都常被應用於RWD網頁中。
+###RWD常用<br>vh & vw，分別代表視窗的100分之1的高度與寬度；<br>%則是相對於元件的比例。三者都常被應用於RWD網頁中。<br><b>在RWD中需盡量把px改成%,vw,vh，在縮放比例時才能適應螢幕寬度。</b>
 #滑鼠事件<br>
 ##在CSS中，想要寫出互動狀態或是特別的情況就會需要偽類，可以偵測瀏覽歷史、內容狀態、滑鼠位置等等。常見的CSS偽類如下：
@@ 行 79： / 行 79： @@
 ##*mouseover event    滑鼠經過不同元素時觸發。
 ##*mouseout event     滑鼠離開元素時觸發。
 ##重點提醒
 ##*click event 在電腦和手機上都能觸發

@@ 行 51： / 行 51： @@
 ##*中間有寫一段javascript code 讓一小部分可以更新，加快速度與提供互動性。
 ##*架構部分有寫出banner 圖片、點圖片可返回首頁、並設定圖片位置、globalnav(導航列設定)並放入剛剛製作的strnav，最後放html2做結尾。
-#RWD 螢幕大小設定(施工中)<br>在製作RWD設計時，我們會需要分辨手機、平板和電腦，利用他們畫面長度的不同來區分不同的css檔案。而實際需要怎麼區分呢？<br>而在css設計時，我們會寫px,em...等等單位，這些單位又代表甚麼呢？以下簡單介紹這些單位：<br>
+#RWD 螢幕大小設定<br>在製作RWD設計時，我們會需要分辨手機、平板和電腦，利用他們畫面長度的不同來區分不同的css檔案。而這些長度要怎麼看呢？<br>而在css設計時，我們會寫px,em...等等單位，這些單位又代表甚麼呢？<br>這些單位與性質無關，而與輸出媒體有關(螢幕、列印)，一般來說可參照以下的分類：<br/>螢幕： em,px,%<br/>紙張： em,cm,mm,in,pt,pc,%<br>以下簡單介紹這些單位：
-##這些單位與性質無關，而與輸出媒體有關(螢幕、列印)，
+##絕對單位(cm,mm,in,pt,pc,iOs pt ,dp)
-##*一般來說可參照以下的分類：
+##*所謂的絕對單位就是實際上的長度單位，如果電腦解析度夠高就可以精確的表示出1公分或是1英吋。通常會用在影印紙張時，為求精確設定而存在。<br>可如右式互相換算：1in = 2.54cm= 25.4mm = 72pt = 6pc
-##*螢幕：em,px,%
+##*此外，APP開發時還有 iOS pt 與 dp (Android)，換算公式如右：1 iOS pt ≈ 1/163 inch, 1 dp ≈ 1/160 inch<br>在開發網頁或是APP時，裝置會自動根據用戶手機來呈現布局與圖檔大小。
-##*紙張：em,cm,mm,in,pt,pc,%
+##相對單位(em,px,vw,vh,%)<br>因為在電腦上看1公分很小，但在手機上看1公分比例佔很大，所以我們會需要相對單位。
-##絕對單位可如右式換算：1in = 2.54cm= 25.4mm = 72pt = 6pc
+###em<br>它僅僅表示字體大小，在2英吋的元素中，1em就是2英吋，這樣文字大小就可以保持比例。<br>而 text-indent: 1.5em 以及 margin: 1em 在css中都常見
-##*所謂的絕對單位(cm,mm,in,pt,pc)就是實際上的單位，如果電腦解析度夠高就可以精確的表示出1公分或是1英吋。通常會用在影印紙張時，為求精確設定而存在。
+###Pixel<br>又稱px(為避免與CSS px混淆，以下都會稱Pixel)，是指像素點，比如說電腦螢幕寬度1920x1440 這邊的單位就是Pixel，表示電腦螢幕長1920像素點，寬1440像素點。<br>對於螢幕來說，這邊就可以引進PPI(Pixel per Inch)，也就是每英吋中有多少Pixel。<br>科技日新月異，手機的PPI在近十年突破性的發展，隨便都破400PPI (有的手機甚至是1284x2778)，這樣會影響RWD的發展，所以就出現了專門為css設計的px單位。
-##*因為在電腦上看1公分很小，但在手機上看1公分比例佔很大，所以我們會需要相對單位。
+###CSS px<br>其與字體無關，也與絕對長度無關。其被定義為小但仍可見，他並不是不變的，而是會隨著裝置與使用方法而變。<br>他與螢幕像素之間有個倍率關係，而使得手機的px可以落在300~400左右。目前我們查到的裝置螢幕寬度大部分都是換算後的px結果。<br>若真的要與絕對長度對比，有個簡單的參考定義如右：筆電:1 px ≈ 1/125 inch 智慧型手機/平板:1 px ≈ 1/160 inch
-##*像是相對單位em，它僅僅表示字體大小，在2英吋的元素中，1em就是2英吋，這樣文字大小就可以保持比例。
+###RWD常用<br>vw & vh，分別代表視窗的100分之1的高度與寬度；%則是相對於元件的比例。三者都常被應用於RWD網頁中。
-##*舉例：text-indent: 1.5em以及margin: 1em在css中都常見
+#滑鼠事件<br>
-##原本px(為避免混淆，以下都會稱Pixel)是指像素點，比如說電腦螢幕寬度1920x1440 這邊的單位就是Pixel，表示電腦螢幕長1920像素點，寬1440像素點。
+##在CSS中，想要寫出互動狀態或是特別的情況就會需要偽類，可以偵測瀏覽歷史、內容狀態、滑鼠位置等等。常見的CSS偽類如下：
 ##* &#58;active 滑鼠按下的樣式
 ##* &#58;focus 鍵盤聚焦的樣式
@@ 行 77： / 行 67： @@
 ##* &#58;link 還沒被訪問的樣式
 ##* &#58;visited 被訪問過的樣式
-##* &#58;disabled 無法選取的狀態
+##* &#58;disabled 無法選取的狀態<br>比如說html 產生一個元件header<br>如果想要寫他的CSS特性和滑鼠滑過的特性，程式碼就會如下：<br>header{...} /*CSS特性*/<br>header :hover{...}/*滑鼠滑過特性*/<br>
 ##在JAVA中，如果想要寫跟滑鼠有關的，通常會寫出Mouse Event相關的程式碼。
-##*常用事件介紹
+##*click event        左鍵點擊時觸發，(類似 mousedown+mouseup)
-##*click event     左鍵點擊時觸發，(類似 mousedown+mouseup)
+##*mousedown event    任一滑鼠按鍵按下時觸發，相當於手機上的 touchstart。
-##*mousedown event 任一滑鼠按鍵按下時觸發，相當於手機上的 touchstart。
+##*mouseup event      任一滑鼠按鍵放開時觸發，相當於手機上的 touchend。
 ##*contextmenu event  右鍵點擊觸發，常用在偵測右鍵點擊，可以用 event.preventDefault() 防止目錄出現。
-##*dbclick event   短時間內雙擊左鍵觸發。
+##*dbclick event      短時間內雙擊左鍵觸發。
-##*mousemove event 滑鼠移動時觸發，通常在需要用到時才綁定，避免不斷觸發。
+##*mousemove event    滑鼠移動時觸發，通常在需要用到時才綁定，避免不斷觸發。
-##*mouseenter event滑鼠進入元素邊界時觸發。
+##*mouseenter event   滑鼠進入元素邊界時觸發。
-##*mouseleave event滑鼠完全離開元素時觸發。
+##*mouseleave event   滑鼠完全離開元素時觸發。
-##*mouseover event 滑鼠經過不同元素時觸發。
+##*mouseover event    滑鼠經過不同元素時觸發。
-##*mouseout event  滑鼠離開元素時觸發。
+##*mouseout event     滑鼠離開元素時觸發。
 ##重點提醒
 ##*click event 在電腦和手機上都能觸發
 ##*點擊事件的觸發順序為 mousedown > mouseup > click
 ##*mouseenter 和 mouseleave 的觸發行為跟 CSS 的 hover 非常相似，mouseenter 在滑鼠完全離開元素 (mouseleave) 前不會再次觸發。
 ##*最後建議，手機或平板上最好是用click比較恰當，因為沒有滑鼠，須盡量避免CSS的寫法。