airbnb用的不是flexbox. 是向bootstrap 3.0.0借來的, 答案在這裡:
https://a0.muscache.com/airbnb/static/packages/dls/common_o2.1_cereal-871c66c183c790878ff8fa1028479c88.css
https://a0.muscache.com/airbnb/static/packages/common-109e89402850da21ca03bf46aa9b1ed0.css
用@media依據螢幕寬度(744px和1127px)來動態改變CSS, 產生您看到的效果.
請用開發者工具來追蹤.
另, bootstrap 4.0事實上是flexbox. 基本上可以不用bootstrap
我知道 @media
,但是他的是這段期間縮放的時候,那個div和圖片都會等比例放大
例如:
<div style="width: 100%; height: 100%; background-image: url("https://a0.muscache.com/im/pictures/72214f77-d7db-4a29-a65e-09d736710920.jpg?aki_policy=large");" role="img" aria-label="Saul Zaik Treehouse!" class="_1df8dftk"></div>
使用background-image, 然後以CSS:
background-repeat: no-repeat !important;
來resize圖片.
要使用開發者工具追追蹤, 用了許多animation.
好像跟這個沒有關係,我原本就有宣告這個了
他的 div 跟圖片不知道是怎麼設定的,父拉寬的時候,圖片跟DIV都會往右下角放大
那他的外圍 div 是怎麼跟著往右下角走?
我昨晚傳了兩個訊息不見了?
圖片: html: background-image; css: background-repeat: no-repeat !important;
DIV: box-sizing
https://www.w3schools.com/css/css3_box-sizing.asp
https://css-tricks.com/international-box-sizing-awareness-day/
https://css-tricks.com/box-sizing/
https://jsfiddle.net/5mb208hL/2/
不知道這是不是你想要的
所以前提是圖片本身要是固定的大小,比如說 200x200
跟著放大只要div跟img的width屬性設百分比就好了,不用管圖片大小,我貼的jsfiddlen不是你想要的結果嗎?
使用CSS媒體查詢寫的,你可以看一下這篇的示範
https://ithelp.ithome.com.tw/articles/10206534
其實,這就是一種RWD的知識應用。
認真來說,你想要了解的心態不錯。不過對你來說還太早就是了。
一般rwd就是要了解所謂的主框架跟子框架的對應。
再搭配@media取代應用。
一般來說,如果需要更多元化的視覺效果。大多還是得要利用到js程式碼。
這裏一般來說。我會叫你去研究bootstrap來幫你處理就好。
這樣就不需要去寫更多架構應用的js程式碼。
但如果你真想要了解,你得要面臨非常多的空間應用學及架構應用。
也要學習到圖層、box屬性跟比例計算超多的長寬計算方式。
這些東西,其實有些認真來說,已經不太算是程式的領域。比較偏向美工排版的領域了。
大多數而言,如果一般開發案,沒那個時間研究的話。還是用bootstrap拉一拉讓它自已跑就行了。
至於你可能會說bootstrap拉一拉或不會拉。那就是要靠自已的功力學了。
我只能說,如果你bootstrap不會拉的情況下。那自刻的部份你更不要想去學。因為那是更複雜的東西。學好bootstrap就行了。