響應式網頁的媒體查詢 Media Queries 及嵌入內容的設定

Media Query的使用方式：

1. 在CSS檔案中用@media來判斷使用者螢幕寬度，來選擇載入哪一種CSS樣式
2. 在HTML文件中media屬性判斷使用者裝置寬度，來選擇載入哪一種CSS檔案

@media screen and (min-width:1024px) { css設定1 } 畫面寬度1024以上採用css設定1

@media screen and (min-width:768px) { css設定2 } 畫面寬度768以上採用css設定2

@media screen and (min-width:480px) { css設定3 } 畫面寬度480以上採用css設定3

@media screen and (min-width:600px) and  (max-width:800px)  { css設定4 } 畫面寬度600~800px之間採用css設定4

@media only screen and (min-width:600px) { css設定5 } only是用來針對那些不支援Media Queries，卻需要Media Type的設備隱藏樣式使用的。

可新增一個div標籤並加入 embed-responsive

〈div class="embed-responsive embed-responsive-16by9"〉

〈iframe src="http://hala999.com" width="560" height="315" marginwidth="0" marginheight="0" frameborder="0" allowfullscreen 〉〈/iframe〉

〈/div〉

16by9表示影片是 16:9，若是4:3則要更改為4by3

~歡迎轉載，但請註明來源網站名稱和網址，文章若有侵權，請來信告知，我們會盡快處理~

響應式網頁架站只要6,888元起|[RWD]響應式網站，自適應網頁，讓SEO搜尋引擎最佳化你的網站

"你是獵人還是獵物？"