Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
張互賓/Carlos
個人 email: chang.abin@gmail.com
「WebMix - 設計好網站」FB 粉絲專頁
自由工作者 Freelancer,承接網站專案及授課。
成立「WebMix - 設計好網站」粉絲頁 ,分享網站知識及文章。
成立卡斯有限公司,承接主機代管、前端開發、網站架設服務,及分享技術相關知識。
於 Tibame 教學網站開發相關領域課程。
2009 年:進入職場,曾任職於中視、華視、Yahoo!、新創公司。
2013 年:全職的網站前端開發之自由工作者。
2016 年:成立卡斯有限公司:承接網站設計開發、主機代管。
2017 年:承接標案「臺南市政府圖片資料庫平台」
2018 年:網站相關教學
2019 年:合夥存股管家
2020 ~ 2023 年:Tibame 講師
2021 ~ 2023 年:錄製線上課程
長風文教基金會( 手機瀏覽看看:http://fairwindsfoundation.org/ )
台灣雕塑學會 ( 手機瀏覽:http://www.sculpture.org.tw/ )
桌機:瀏覽器中頁面的可視區域。
手機:每個手機的 viewport 都不一樣(例:iphone11 的 viewport 是 414 x 896),對我們網頁來說不太有意義,用不太到,我們需要做的是將頁面寬度設定成「等於」設備寬;以及瞭解目前最小看到的 viewport 寬,還是有到 320px。
The viewport is the user's visible area of a web page. (viewport 是網頁中的可視區域) The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen. (viewport 會因設備異,而且通常手機上的 viewport 大小會比一般桌上型電腦螢幕來得小。) Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size. (在還沒有平板、智慧型手機之前,網頁都是針對電腦螢幕來設計,而且通常都是版型固定大小。) Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen. (然而,在有了平板、智慧型手機之後,大家開始大量使用這些裝置來上網,然而,過去的固定式版型大小通常很大,無法容納於這些行動裝置,所以最快的解決方式,就是瀏覽器將這些網頁直接自動縮小,直到可以容納為止。) This was not perfect!! But a quick fix. (雖然這不是完美的做法,但是是一個最快的解決方式。)
all:所有類型都包含。
screen:針對螢幕裝置。
print:用於列印時。
使用 print 這 media type 來指定列印時,要套用的 CSS:
一般來說,沒有特別指定的話,Media Type 預設都是 all,也就是不管任何情況,都會套用。
如果要指定 Media Type 的話,可按照以下方式來指定:
在 HTML 中:(主要是加上 media
屬性)
如果要指定複數個媒體類型(Media Type),以半形逗號做區隔即可:
在 CSS 中:(設定 @import
或 @media
語法都可)
如果是複數個 Media Type:
當螢幕寬度大於等於 768px 時,連結<a>
的文字顏色會變成紅色。
沒有寫 Media Type
的話,預設都是 all
:
以上的原始碼,如果加上 Media Type 的會,等同於以下:
例:
當螢幕寬度小於等於 767.98px 時,連結<a>
的文字顏色會變成綠色。
例:
當螢幕寬度大於等於 768px 且小於等於 991.98px 時,連結<a>
的文字顏色會變成橘色。
例:
當是螢幕時,螢幕寬度大於等於 768px 且小於等於 991.98px 時,連結<a>
的文字顏色會變成紅色。
例:
以半型逗號做分隔。
orientation 可以設定當手持裝置是橫向或縱向時,需要套用的 CSS,可以設定的值有:
portrait (縱向)
landscape (橫向)
註:即使是桌面裝置,若高度 > 寬度時,會視為直向;寬度 > 高度時,視為橫向。
當是螢幕時,且設備為橫向(landscape)擺放時,連結 <a>
的文字顏色會是紅色;反之,若設備為直向(portrait)擺放時,會是藍色。
遇到 max-width,需扣掉 0.02px,如下示意:
完成結果示意:
請建立 practice/rwd_sample.html
檔案,提供以下的 html:
及 CSS:
註:斷點的數值(記下來):576、768、992、1200、1400。
請執行以下:
一、瀏覽器寬度 >=
1400px 時:(此項已預設完成。)
1、section.content_sec
元素的寬度設定成 1320px。
二、1200px <=
瀏覽器寬度 <=
1399.98px 時:
1、section.content_sec
的寬度設定成 1140px。
三、992px <=
瀏覽器寬度 <=
1199.98px 時:
1、section.content_sec
的寬度設定成 960px。
四、768px <=
瀏覽器寬度 <=
991.98px 時:
1、section.content_sec
的寬度設定成 720px。
五、576px <=
瀏覽器寬度 <=
767.98px 時:
1、section.content_sec
的寬度設定成 540px。
2、div.img_block
的寬度(我使用 flex-basis
),設定成 40%。
六、瀏覽器寬度 <=
575.98px 時:
1、section.content_sec
的寬度設定成 100%。
2、div.block
設定成上圖下文,也就是將 flex-direction
設定成 column。
3、div.img_block
的 flex-basis
設定回預設值,也就是 auto。
4、section.content_sec div.block.img_right div.img_block
的 order
設定成 1。
5、section.content_sec div.block.img_right div.text_block
的 order
設定成 2。
參考作法:
檔名建議:text_cover.html
說明:
整個區塊是一個連結,點擊開新分頁。(連到任意網址皆可)
圓角 5px。
「美麗的風景」文字顏色 #FFF
,背景色 hsla(0, 0%, 0%, .5)
,文字大小 .8rem
。定位在距離上方 10px、距離左側 0px。
「次要說明」文字,樣式同上,但預設看不到,定位在距離左側 0px、距離下方 0px。
滑鼠移過連結區塊,「次要說明」文字,往上滑出(transition):transform .5s
。
螢幕寬度小於等於 767.98px時,「次要說明」直接出現。
結果示意:
提供 html:
參考作法:
display
屬性設定:
grid
:區塊類型的 Grid Layout。
inline-grid
:行內區塊類型的 Grid Layout。
例:
以九宮格為例:
有設定 display 為 grid
或 inline-grid
的元素,就叫做 Grid container
。
在 Grid Container
裡面的第一層子元素,統稱叫做 Grid Items
。
Grid Row Track:
Grid Column Track:
留意每條 Grid Line 都有自己的編號,如下所示;也可以反向的來數,反向的話,就是從 -1
開始數。
Row Axis:也稱做 Inline Axis。
Column Axis:也稱做 Block Axis。
例:
例:
數值指的是 Grid Column Line 的意思。
span 2:指的是擴展兩個欄的意思。
例:
數值指的是 Grid Row Line 的意思。
span 2:指的是擴展兩個欄的意思。
例:
原來九個欄位如下:
將 4 的那個欄位,擴展到 4、5、7、8,變成如下:
例 1:使用 Grid Line 來設定範圍:
例 2:使用 grid-area 來將欄位指定位置(例:將 1 和 9 對調):
例 3: grid-area
也可以用來設定這個 Item 的名稱,然後就可以在 Grid Container
中使用 grid-template-areas
中直接指定名稱。
範例請參考 grid-template-areas
屬性。
請參考 justify-items
。
請參考 align-items
。
請參考 place-items
。
是 justify-self
和 align-self
的簡寫形式,格式如下:
設定 3 欄,每欄寬度自動分佈:
設定 2 欄,第一欄寬度是 100px,第二欄寬度是 150px:
例:
下例:設定第一列的高度為 100px,第二列的高度為 150px,其它列的高度是由內容來撐:
例:
需先瞭解 grid-column
及 grid-row
,才能瞭解 dense
部份。
row
:預設值,設定 Items 沿著 row 的方向依序出現。
column
:設定 Items 沿著 column 的方向依序出現。
row dense
:加上 dense 會讓 Items 遞補。
column dense
:加上 dense 會讓 Items 遞補。
例:
各列高度由 grid-template-rows
來設定,
其它列沒有指定到高度的,如下範例,第一個列設定 200px,下一個列設定 300px,再下一列會是 200px,以此類推:
例:
各欄寬度由 grid-template-columns
來設定,
其它欄沒有指定到寬度的,如下範圍,第一個欄設定 120px,下一個欄設定 180px,再下一欄會是 120px,以此類推:
例:
需先瞭解 grid-area
,才能瞭解 grid-template-areas
部份。
用途:
在 Grid Items 使用 grid-area
來設定各個 Item 的名稱。
然後就可以在 Grid Container 中使用 grid-template-areas
來做排版。
grid-template-areas
的語法:
以雙引號(單引號也可)當做是一個列,然後如果要表達下一個列,那就再使用雙引號,各列的雙引號以空格做區隔。
有一個符號是 .
,代表的意思是沒有名稱的 Grid Item。
例 1:
例1:
例2:
第一個參數:表示「第二個參數的內容」,要重覆幾次。例:
第一欄的寬度是 100px ~ 200px,例:
fr
是 fraction of the free space,也就是剩餘空間,以比例方式來分配,例:
grid-column-gap
在 CSS3 中,已更名為 column-gap
。
grid-row-gap
在 CSS3 中,已更名為 row-gap
。
grid-gap
在 CSS3 中,已更名為 gap
。
例:
設定 Items 沿著 Row(Inline) Axis
來排列。
可設定的屬性值有:
stretch
:預設,寬度填滿整個 Cell。
start
:設定 Item 在自己 Cell 的左邊。
end
:設定 Item 在自己 Cell 的右邊。
center
:設定 Item 在自己 Cell 的中間。
例:
justify-self
是在 Grid Items 上設定,只作用於 Item 自己。
設定 Items 沿著 Column(Block) Axis
來排列。
可設定的屬性值有:
stretch
:預設,高度填滿整個 Cell。
start
:設定 Item 在自己 Cell 的上方。
end
:設定 Item 在自己 Cell 的下方。
center
:設定 Item 在自己 Cell 的中間。
例:
align-self
是在 Grid Items 上設定,只作用於 Item 自己。
是 justify-items
和 align-items
的簡寫形式,格式如下:
place-self
是在 Grid Items 上設定,只作用於 Item 自己。
全部的 Items,一起沿著水平方向 Row(Inline) Axis
的排列,可以設定的屬性值有 7 個,如下:
stretch
:預設值。
start
:置左。
end
:置右。
center
:置中。
space-around
:Grid Items 之間的距離會是最左邊、最右邊的兩倍大。
space-between
:Grid Items 最左邊會靠左、最右邊會靠右,其餘距離均分。
space-evenly
:Grid Items 之間的距離及最左邊、最右邊,距離都是相同的。
例:
全部的 Items,一起沿著垂直方向 Column(Block) Axis
的排列,可以設定的屬性值有 7 個(與 justify-content
屬性相同),如下:
stretch
:預設值。
start
:置頂。
end
:置底。
center
:置中。
space-around
:Grid Items 之間的距離會是最上方、最下方的兩倍大。
space-between
:Grid Items 最上方會置頂、最下方會置底,其餘距離均分。
space-evenly
:Grid Items 之間的距離及最上方、最下方,距離都是相同的。
例:
是 justify-content
和 align-content
的簡寫形式,格式如下:
@keyframes:用來建立一個動畫效果的名稱,然後創造動畫影格。
animation-name:某個動畫效果的名稱。
animation-duration:動畫效果要執行的「期間」。
先瞭解這三樣東西,就可以至少將動畫效果套用至指定元素。
1、動畫名稱、初始狀態、最終狀態,程式碼的撰寫方式,如下圖:
2、設定一個名稱叫做 rotation 的動畫,初始狀態(0%)時,設定 transform 為 rotate(0deg);最終狀態(100%)時,設定 transform 為 rotate(360deg),如下程式碼:
3、讓某個元素套用由 @keyframes
做好的 rotation
動畫,並且設定執行期間為 5 秒:
例:
這樣就完成了一個基本的動畫了。另外 0%
及 100%
有各自的保留字,故 0% 可改寫成用 from
來替代;100% 可改寫成用 to
來替代。
Grid 排版模式中,不允許斷行時,遇到的問題:當 Grid Items 中,裡面有元素設定了「不允許斷行(例:white-space: nowrap;
)」,那麼 Grid Items 若沒有設定固定寬,那 Grid Items 的寬度就會被撐開。
解決方式:在 Grid Items 元素,設定 min-width: 0;
即可解決。
例:
建立 grid_practice.html
來練習,請貼上以下原始碼:
使用 Grid 排版模式,變成如下圖佈局:
例如 header.grid_item
:
參考作法:
給定各個 Item 命名如下:
參考作法:
放背景圖:
建立 practice/animation_loading_icon.html 檔案,提供 HTML 如下:
請完成 Loading Icon。畫面結果請直接參考下方的 codepen。
參考作法:
建立 practice/animation_sprite.html
檔案,試試看以下效果:
一張圖,寬 2000px,高 250px,如下:
圖片路徑:https://alldata.sgp1.digitaloceanspaces.com/images/sprite.png
以下做個劃分,也就是上面這張圖,其實是 8 張圖片,合成一張,如下示意:
使用 animation-timing-function
中的 steps
完成 Sprite 動畫效果。
提供 HTML 如下:
提示的示意圖:
參考作法:
透過使用 animation-timing-function
,可以控制動畫效果的速度曲線,背後的原理是 cubic-bezier。
animation-timing-function 有七種模式:
ease:這是預設。相當於 cubic-bezier(.25, .1, .25, 1)
linear:相當於 cubic-bezier(0, 0, 1, 1)
ease-in:相當於 cubic-bezier(.42, 0, 1, 1)
ease-out:相當於 cubic-bezier(0, 0, .58, 1)
ease-in-out:相當於 cubic-bezier(.42, 0, .58, 1)
cubic-bezier(n, n, n, n)
steps(int, start | end)
ease
:低速 → 加快 → 減速至結束。這是預設值。
linear
:速度保持一致。
示意圖:
例:(一個元素從左邊跑到右邊)
ease-in
:以低速開始。
ease-out
:以低速結束。
ease-in-out
:以低速開始,也以低速結束。
示意圖:
例:
像上述的 ease(預設)、linear、ease-in、ease-out、ease-in-out 等,都是別名,其實背後都是透過 cubic-bezier()
函式來達成。
這裡有兩個不錯的網站:
自訂曲線:自行建立曲線,來創造動畫不同的執行速度。
Easing Functions:列出很多已經建好的函式形式,可以直接套用。
例如 linear
,我們其實也可以用以下來代替(相當於 cubic-bezier(0, 0, 1, 1)
):
所以透過 cubic-bezier()
函式 ,可以自訂任何想要的動畫執行速度快慢。
這會以跳躍式的方式來執行,第一個參數(steps)是一個正整數,表示有幾個間隔;而第二個參數(position)可設定 start 或 end(若沒有提供的話,預設是 end
),來看看範例來瞭解其中差異:
想成如果是 start,就是一開始就要跳。
示意圖:
例:
在螢幕畫面中上下滑動頁面時,滑到指定位置,觸發動畫效果。
在想要套用的元素上,加上 data-aos 屬性及動畫效果,例:
最後再執行以下 JS 程式:
data-aos-duration:0 ~ 3000 毫秒。400 是預設。
data-aos-delay:0 ~ 3000 毫秒。0 是預設。
data-aos-once:是否僅執行一次( true 或 false )。false 是預設。
藉由以下範例,自行測試上述四個屬性:
data-aos-offset:預設是 120,單位是px。當螢幕的下方經過該元素之後,這 120 指的是該元素的上方、螢幕的底部,距離是 120px 時,會觸發動畫效果。
以下範例請將 data-aos-offset
由 120 改為 0,觀察看看,也就是該元素的上方、螢幕的底部碰到的時候,就觸發動畫效果。
data-aos-anchor-placement
:預設值是 top-bottom
,第一個 top 指的是該元素的上方,第二個 bottom 指的是螢幕的下方。分別可以各自改成 top
、center
、bottom
的組合(例 center-center
),以達成該元素的哪個位置碰觸到螢幕的哪個位置時,觸發動畫效果。
以下例子 data-aos-offset
設定成 0,data-aos-anchor-placement
沿用預設值 top-bottom
,以便觀察:
改成 top-center
(該元素的上方、螢幕的中間),然後自己做一個動畫效果的「觸發提示線」,以便觀察:
data-aos-anchor
:將該元素的觸發位置,改由另一個元素去決定觸發時機。
以下例子碰到黃色區域的時候,紅色元素的動畫效果就會觸發:
撰寫如下 css( 屬性 data-aos 等於 rotate-animation ,創造一個旋轉 360 度的動畫效果),接下來直接在標籤加上 data-aos 屬性,然後再加上 rotate-animation
的值,就可以創造自訂的動畫效果了:
觀察:在動畫效果觸發的時候,會自動加上 aos-animate
樣式。
撰寫如下 css( 屬性 data-aos 等於 my-blink-animation ,創造閃爍效果),接下來直接在 data-aos 屬性上,加上 my-blink-animation
的值,就可以創造自訂的 keyframes 動畫效果了:
官網:
說明文件:
data-aos:套用哪個動畫效果,。
data-aos-easing:。ease 是預設。
又稱做 RWD,中譯:響應式設計。 不論任何裝置:桌上型電腦、平板、手機都有著不同的螢幕大小。為了解決在同一份網頁面對這些設備,有不同的版面情況及使用情境,因此有了 RWD 。一切都是為了提供使用者有更好的使用體驗(User Experience):易讀性、操控性。
技術思維:在一個 HTML 頁面,針對不同的螢幕寬度,撰寫不同的 CSS,使得網頁在面對不同的螢幕寬度時,都能正常呈現且維持良好的使用體驗。
註:針對不同的螢幕寬度,撰寫不同的 CSS → 需要靠媒體查詢(Media Query)
。
對網站前端工程領域有興趣。
已經學習過基礎的 HTML、CSS,想進一步瞭解 RWD 主題。
作業繳交直接貼 CodePen 的網址,所以請同學先註冊:
Safari
請在電腦桌面或自己偏好的位置,建立 rwd 資料夾,然後裡面建立 practice 及 assignment_rwd 兩個資料夾。
請用 VS Code 編輯器開啟 rwd 資料夾,及使用 live server。
概念:版面是固定寬度,不論螢幕寬度如何,都不會影響版面大小。
案例參考:台灣雕塑學會
概念:版面寬度是用百分比來佔比例,螢幕在縮放時,版面會跟隨螢幕來縮放。
參考範例:https://jamesblasco.github.io/fluid_layout/#/
概念:鎖定幾個螢幕寬度尺吋,來決定版面主內容應該改變成多少固定尺吋。
例如:
針對螢幕寬度 1400px 以上,版面主內容區塊 1320px。
針對螢幕寬度 1200px ~ 1399px ,版面主內容區塊 1140px。
針對螢幕寬度 992px ~ 1199px,版面主內容區塊 960px。
針對螢幕寬度 768px ~ 991px,版面主內容區塊 720px。
針對螢幕寬度 576px ~ 767px,版面主內容區塊 540px。
針對螢幕寬度 0px ~ 575px,版面主內容區塊 100%。
例:
概念:不論使用者用的螢幕裝置為何(桌機、平板、手機等),版面要能夠自動的調整,以維持易讀性、易用性,讓使用者能夠正常的使用、操作。
以上概念,並非是擇一使用,通常一個網頁當中,是這些概念的混用,以達成我們要呈現給使用者的介面。
例:網站。
一個元素有 A 狀態,有 B 狀態,而 A 狀態 到 B 狀態的過程,就叫做轉場(transition)。
以下的範例,轉場效果:
範例:大正方形 → 小圓形
進到 Bootstrap 官網,然後如下示意圖來下載,也可順便留意所下載的本版:
然後在下圖的示意中,說明了若只需要「Grid System」的話,所需要的檔案:
從剛剛下載的資料夾裡,有 css
資料夾,在裡面找到 bootstrap-grid.min.css
檔案,如下圖:
請複製一份,放到 practice/vendors/bootstrap/
資料夾裡即可。
記得以下這幾個版面的分界點:
xs
:螢幕寬度大於等於 0px。
sm
:螢幕寬度大於等於 576px。
md
:螢幕寬度大於等於 768px。
lg
:螢幕寬度大於等於 992px。
xl
:螢幕寬度大於等於 1200px。
xxl
:螢幕寬度大於等於 1400px。
如下示意圖:
將 列
寫在 container 中。
將 欄
寫在 列中。
每一列共有視覺上看不到的 12 欄可做劃分。
語法:offset-{breakpoint}-{number}
在某個 {breakpoint}
範圍以上,位移 {number}
欄。例:
語法:order-{breakpoint}-{number}
在某個 {breakpoint}
範圍以下,{number}
數值較小的先出現。例:
在 column
裡面的部份,也可以再放 row
來切 12 欄。例:
關於左右 margin 負邊界(未指定寬度的情況下,左右的 margin 為負值時,會創造出額外空間):
因為 Bootstrap 的 row(有負邊界),分別是:
所以當 row 放在其它自己的 div 標籤時,該 div 標籤記得加以下兩行的 css:
例:
透過 animation-direction
來設定動畫效果的執行方向,這裡指的方向,意思是從 0% 到 100%;那反向就是從 100% 到 0%。
normal
:預設值,按照正常方向(0% ~ 100%)。
reverse
:將 normal 的執行方向,反方向來執行。(100% ~ 0%)
alternate
:方向反覆交替,當 animation-iteration-count
大於 1 的時候,才會有效。第一次是正向執行。
alternate-reverse
:方向反覆交替,當 animation-iteration-count
大於 1 的時候,才會有效。第一次是反向執行。
例:
在 assignment_rwd
資料夾下,建立 youtube_layout.html
來撰寫以下各步驟:
第一步:https://youtu.be/_WbrNB61JZ0
假設 header 區域的高:60px。
假設 aside(側邊欄) 區域的寬:240px。
第二步:https://youtu.be/oRDd_HPAGNk
第三步:https://youtu.be/MloMoEBTjKc
第四步:https://youtu.be/EsNq1FjpD1s
寬度小於等於 767.98px
時,介面調整。
模擬漢堡按鈕,點擊後出現導覽列。
於以下網址繳交:
將 assignment_rwd 資料夾
壓縮變成壓縮檔(zip 檔或 rar 檔),繳交該壓縮檔即可。
繳交期限 09/14(四) 晚上 12 點之前。
深入淺出HTML&CSS(第二版) http://www.books.com.tw/products/0010596057
深入淺出行動網站開發 http://www.books.com.tw/products/0010552906
深入淺出網站設計 http://www.books.com.tw/products/0010432289
如何設計好網站:Don't make me think http://www.books.com.tw/products/0010651534
CSS Secrets 中文版:解決網頁設計問題的有效秘訣 http://www.books.com.tw/products/0010702536
你所不知道的 JS | 導讀,型別與文法 (You Don't Know JS: Up & Going)
你所不知道的 JS|範疇與Closures,this與物件原型
所有標籤:https://www.w3schools.com/tags/
更多 Meta Data:https://www.w3schools.com/tags/tag_meta.asp
更多的 HTML Entities:https://www.w3schools.com/html/html_entities.asp
事件列表 https://www.w3schools.com/tags/ref_eventattributes.asp
htmlreference https://htmlreference.io/
Can I Use:https://caniuse.com/
w3schools JS https://www.w3schools.com/js/
jQuery 的 Ajax 完整官網資源 http://api.jquery.com/jQuery.ajax/
Lazy Loading:Lozad.js
所見即所得編輯器:CKEditor
Animate on scroll:AOS
圖表工具:Chart.js
輪播:slick
Sprite 效果:jQuery Sprite
視差滾動:Skrollr
預載圖片:jPreLoader
JSON Parser http://json.parser.online.fr/
XML Viewer https://codebeautify.org/xmlviewer
課外讀物,命名方法論:OOCSS、SMACSS、SUITCSS、BEM、rscss(這個比較簡單)。
作業系統:MacOS、CentOS
版本控管:Git (介面工具:Sourcetree)
使用容器技術佈署:Docker
雲端伺服器平台服務:AWS、DigitalOcean、Google Cloud
檔名建議:btn_hamburger.html
例如以下 apple 行動版官網,影片示意:
提供 html:
切換 class 的 JS 程式:
參考作法:
檔名建議:nav_switch.html
提供 html:
提供 JS:
參考作法:
漸進式的展開縮合,因為會用到 JS,單靠 CSS 無法做到,故同學學完 JS 之後,可再來研究:
檔名建議:aspect_ratio.html
提供 HTML 如下:
當螢幕寬度小於等於 767.98px
以下時,圖片
要在 div.img_block
區塊水平方向、垂直方向皆置中;且 div.img_block
需佔螢幕的滿版,且寬高比需是 2:1
。
請參考下方 CodePen 的畫面結果,實作看看。
使用 aspect-ratio
來做一個元素的寬高比,例如寬高比 2:1
:
參考作法:
檔名建議:mobile_slide.html
提供 html 如下:
請直接參考下方 CodePen 的畫面結果,實作看看。
參考作法:
檔名建議:youtube_iframe_rwd.html
提供以下 iframe 影片,它的寬高比為 560:315
,也就是 16:9
。
執行完的結果示意:
參考作法: