[網頁,RWD]Youtube和GoogleMap的響應式寫法

「影片」和「地圖」的RWD寫法跟一般圖片img比較不一樣
一般圖片直接設寬度設100%就好,因為他長寬比例本身固定
但影片根地圖沒給他長寬,他就沒個依據,所以寫法比較不一樣

原理

原理是利用:
爸爸<div>設relative
兒子<ifame>設absolute,就是影片以及地圖的物件
爸爸的寬度100%(以頁面寬度為依據),高度用Padding自己做出來一個固定比例。
兒子寬高設百分百,依據爸爸的比例去做縮放。

css寫法

*爸爸的長寬做法

寬度:預期寬度/視窗寬度,通常是100%
width:100%

高度用padding製作:預期高度,跟寬度會成百分比,100%就會是正方形
padding-top:yy%

height:不寫。%寫不上去,px寫得上去,但就不會是響應式了。

*兒子的長寬做法

直接聽爸爸得話
width:100%;
height:100%;

就是這樣子囉!

其他延伸

不過這個時代什麼都很方便,也有直接幫你寫好的
直接寫在Html上,加上style的寫法,雖然建議還是用CSS統一控制會比較好。
但不講究的話用這個也可以。

摳摳貼!就完成了,hen方便。

沒有留言:

張貼留言

Instagram