pCloud Partner Program

測試網站的Responsive效果

手機大未來 2015/06/29 10:46
views: 40327 times
在各式不同載具上都能有效呈現網站, 目前已經是一種很重要的顯學了. 如何快速進行適應介面呈現的測試, 這裡有好用的工具可以實現.

1. http://designmodo.com/responsive-test/
輸入要測試的網站網址後, 選擇右上的各式載具(包含了手機、平板、筆電、桌機等4大類), 就可以輕鬆預覽各種不同螢幕寬度的效果, 快速方便. 右上會顯示出各式設備的寬與高的點數, 也可以藉由旁邊的旋轉圖示來進行模擬旋轉(其實也就是寬變成高, 高變成寬這樣)

2. http://responsivetest.net/
這個網站功能與上面第一個介紹的類似, 不過他會直接把目前測試的內容, 在 url 參數化, 更易於進行分享傳遞, 與溝通使用, 將測試的畫面, 以 url 再轉傳給需要討論的對象, 十分方便.

其他還有像是:
http://responsivedesignchecker.com/
http://ami.responsivedesign.is/ 直接生出4個live預覽圖, 很有意思
http://quirktools.com/screenfly/

等, 也都十分方便好用.
top

在bootstrap下的影片responsive設定

程式技術 2015/06/12 23:34
views: 52062 times
在 bootstrap 下, image 可以很容易地使用 img-responsive class 進行 image 的 responsive 設定, 但是 embed 或是 video 如何處理呢?

在 bootstrap 3.2 起, 增加了好用的 embed-responsive 功能, 簡單說明語法如下:


在外部建立一個 div, 包含了 embed-responsive 與 embed-responsive-16by9 or embed-responsive-4by3 class, 然後在 video 或 iframe 包含 embed-responsive-item class, 就可以順利地讓 embed video 能有完整地 responsive 功能了.

參考範例:
http://codepen.io/ncerminara/pen/zbKAD/
top




Nextbit Robin 5.2吋六核心智慧型手機 Microsoft Office 365 中文家用版PKC (無光碟)
ASUS華碩 AC1900 雙頻無線路由器 RT-AC68U 美國 VORNADO 533 渦流空氣循環機 (黑色)
御茶園 每朝健康綠茶(650mlx24入) 每朝健康 雙纖綠茶(650mlx24入)


 Waiting...