HTML/CSS

2015.11.04

讓 Facebook 社交小工具(Page Plugin)能有 RWD 的效果


Facebook 的 Page Plugin (原先的 like box)預設沒有提供 RWD 的效果，如果希望小工具也可以用 RWD 效果的話，可以在 CSS 加入以下程式碼：

/* 
讓 FB 的 Page Plugin 可以有 RWD 的效果
https://developers.facebook.com/docs/plugins/page-plugin
*/

/* 這個元素內嵌在 iframes 裡，有可能造成部分 layout 變形，所以請把它隱藏 */
#fb-root {
    display: none;
}

/* 讓所有容器的寬度都變成 100% */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
    width: 100% !important;
}

語法來源：http://stackoverflow.com/questions/10656038/how-to-make-the-facebook-like-box-responsive

歡迎給我點鼓勵，讓我知道你來過 ：）

更多 CSS 相關文章

整合 TailwindCSS 與 Element Plus 的 CSS class 變數

2022-11-22

整合 TailwindCSS 與 Element Plus 的 CSS class 變數

HTML/CSS

在 Vue3 + Vite 專案下設定亮色與暗色主題

2022-11-18

在 Vue3 + Vite 專案下設定亮色與暗色主題

HTML/CSS

在 Vue3 + Vite 專案下安裝使用 SASS/ SCSS 以及 CSS Module

2022-11-17

在 Vue3 + Vite 專案下安裝使用 SASS/ SCSS 以及 CSS Module

HTML/CSS

使用 SCSS each 與 CSS var 變數，調整 Bootstrap, Element UI 的 CSS 樣式

2022-09-23

使用 SCSS each 與 CSS var 變數，調整 Bootstrap, Element UI 的 CSS 樣式

HTML/CSS

難解的 CSS 排版：認識對齊(下)

2019-09-05

難解的 CSS 排版：認識對齊(下)

HTML/CSS

難解的 CSS 排版：認識對齊(上)

2019-09-04

難解的 CSS 排版：認識對齊(上)

HTML/CSS

previous arrow
next arrow
guest

2 則留言
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
DC
DC
7 years ago

那是2012年的文章了，新版的 plugin 已經支援 RWD 很久囉！很容易可以設成自動滿版～

0
Reply
muki
muki
7 years ago
Reply to  DC

你好，我自己實測新版是無法支援的唷，也沒辦法設定自動滿版，以上的語法效果也是我現在實際使用可以做到的。如果新版 plugin 可以支援，需要什麼設定也歡迎你一起分享唷 ^___^

0
Reply
粉絲團
相關文章
贊助廣告
Copyright (C) MUKI space* / Reborn Theme All Rights Reserved.