在寫網頁式常用的尺寸單位有 PX、EM、REM。
PX 使用上很直觀,是相對容易入門的單位。
EM、REM 是依照比例做計算,在做響應式網頁有優勢。
有很多方法可以達到水平置中、垂直置中,這邊示範一些筆者比較常使用的寫法。
直接在需要水平置中的元件上使用左右調整 auto
margin: 0 auto;
這邊會列出幾個常用的陣列方法以及使用的方式。以下使用 pokémonList 當做範例。
pokémonList
以下會舉例一些圖片引用的方法,以及運用的技巧。
直接將要載入的圖片路徑放進img標籤裡面。
<img src=”http://lorempixel.com/200/200/food/" alt=””>
在做響應式網頁時,float(浮動)是一個很必要的工具,它可以快速協助前端工程師進行排版。
如以下CodePen範例,當.box有設定float:left時,給予一個寬度30.33%,就會呈現自動排版的效果。以下有兩點要注意的是:
題目: 17. Letter Combinations of a Phone Number
Bootstrap 是很受歡迎的前端 library (元件庫),透過不同的 class 名稱就可以輕鬆做到響應式網頁。
Bootstrap 4 的響應式寫法是由小裝置寫到大螢幕,中斷點分別是:
🚩 前言