我發現 airbnb 一個東西我想研究但是偷不走
我知道是 flex 相關技術
只是他的又更特別
進去的時候你應該會看到五個 col 的房屋資訊，有好幾row
瀏覽器先把寬度拉到最小～變成手機版
此時會剩下一個
然後往右開始拖拉直到有兩個 col
從這裡開始再往右拉到有四個 col 的時候
這段期間的變化實在是想不透
很明顯外面的 div 跟裡面的圖片寬度是一致的
隨著父的寬度會等比例放大
這到底是怎麼做到的？！
他的 div 跟圖片不知道是怎麼設定的，父拉寬的時候，圖片跟ＤＩＶ都會往右下角放大
已邀請的邦友 {{ invite_list.length }}/5
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 是怎麼跟著往右下角走？
我昨晚傳了兩個訊息不見了?
圖片: 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不是你想要的結果嗎?
使用ＣＳＳ媒體查詢寫的，你可以看一下這篇的示範
https://ithelp.ithome.com.tw/articles/10206534
其實，這就是一種RWD的知識應用。
認真來說，你想要了解的心態不錯。不過對你來說還太早就是了。
一般rwd就是要了解所謂的主框架跟子框架的對應。
再搭配@media取代應用。
一般來說，如果需要更多元化的視覺效果。大多還是得要利用到js程式碼。
這裏一般來說。我會叫你去研究bootstrap來幫你處理就好。
這樣就不需要去寫更多架構應用的js程式碼。
但如果你真想要了解，你得要面臨非常多的空間應用學及架構應用。
也要學習到圖層、box屬性跟比例計算超多的長寬計算方式。
這些東西，其實有些認真來說，已經不太算是程式的領域。比較偏向美工排版的領域了。
大多數而言，如果一般開發案，沒那個時間研究的話。還是用bootstrap拉一拉讓它自已跑就行了。
至於你可能會說bootstrap拉一拉或不會拉。那就是要靠自已的功力學了。
我只能說，如果你bootstrap不會拉的情況下。那自刻的部份你更不要想去學。因為那是更複雜的東西。學好bootstrap就行了。
iThome鐵人賽
看影片追技術