CSS RWD square 正方形

純 CSS 製作自適應 RWD 正方形,可隨容器寬度大小改變,自動調整容器高度,維持正方形比例,而正方形容器中一樣可以有內容,不受影響

HTML:

CSS:

example:

See the Pen
CSS RWD square 正方形
by VECTOR.cool 威得數位 (@ann71727)
on CodePen.

Refrance:
https://spin.atomicobject.com/2015/07/14/css-responsive-square

[……]

閱讀更多

HTML 錨點偏移 CSS and JS 兩種方法 (offset anchor tag link)

HTML提供了一個錨點連結的功能 (anchor tag link),換頁或不換頁,都可以把瀏覽器卷軸自動捲到錨點位置,但如果網頁上方有一個黏頭的Header (sticky header),RWD手機版本則習慣使用(sticky header),Header 懸浮本文之上,可能會把錨點的元素內容遮蔽,這時我們則需要偏移(sticky header)的高度,避免錨點元素被遮蔽。[……]

閱讀更多

CSS RWD 響應式斷點 @media 及常用尺寸速查

我常用的方法

這作法雖有違背行動優先的概念,但我實務上遇到比較多還是先做電腦版,再依照電腦版樣式改成手機版本,概念歸概念,能能解決問題的就是好方法,提供大家參考

行動優先-響應式斷點

介紹完我常用的斷點,也介紹一下比較正規的做法,下列這就是行動優先下的響應式斷點,先決定手機版樣式,再針對平板或電腦的樣式進行調整

https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints

Bootstrap 4 – RWD Layout

這是Bootstrap定義的斷點

https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints

WordPress Elementor CSS breakpoint

Refrence: https://v123.tw/wordpress-elementor-css-breakpoint/

[……]

閱讀更多