16個幫助你高效測試響應式設計介面的工具

2022-08-18 17:54:10 字數 635 閱讀 1353

幫助你在不同尺寸螢幕下瀏覽**效果的工具- responsivator 

分享乙個在不同客戶端檢視**的工具- screenfly

responsinator提供了大家在不同裝置viewport下檢視**效果的特性,提供了iphone,android,ipad,kindle及其多種裝置上的預覽效果,你可以方便的看到需要支援的裝置的響應式設計效果圖。

和responsinator不一樣,responsivator提供了不同尺寸下的顯示效果圖

responsive提供了5種裝置下的預覽效果展示

類似responsivator,但是介面更簡單

允許你用拖動的方式來修改視窗大小,模擬不同的裝置螢幕 

乙個工具類的瀏覽器,可以幫助你測試響應式設計 

乙個幫助你測試響應式的書籤,你可以方便的整合到你的瀏覽器裡

這個js可以幫助你新增偽元素到body元素上用來偵測寬高 ,當然你也可以使用他們提供的bookmark:

如果你使用firefox的話,你可以直接使用開發工具實現,快捷鍵(ctrl + shift + m)

另外乙個書籤式的工具

乙個jquery的響應式開發工具外掛程式,幫助你建立響應式的視窗,方便你的開發和設計流程

乙個簡單的幫助你建立指定寬高新開視窗的web工具 

幫助你生成響應式布局的CSS模板 xyCSS

在前面的文章中我們介紹了響應式的網格profound grid,用來幫助你開發固定或者響應式的流動布局設計,如果你希望使用純css生成響應式的布局的話,相信xycss將會是乙個不錯的選擇,xycss是乙個簡化的輕量級css框架,只使用乙個css檔案,能夠幫助你建立流動或者響應式的布局。這個框架包含了...

幫助你生成響應式布局的CSS模板 xyCSS

在前面的文章中我們介紹了響應式的網格profound grid,用來幫助你開發固定或者響應式的流動布局設計,如果你希望使用純css生成響應式的布局的話,相信xycss將會是乙個不錯的選擇,xycss是乙個簡化的輕量級css框架,只使用乙個css檔案,能夠幫助你建立流動或者響應式的布局。這個框架包含了...

響應式設計的6個免費測試工具

別再拖拽拉扯那個瀏覽器了,你快把它弄壞了!這樣的話你聽過多少次了?好吧,可能不是特別多,但如果你在開發響應式設計的 你就知道這意味著什麼了 每一次編輯dom和css之後,你都要拽著瀏覽器的邊緣拉拉扯扯,來測試你的編輯結果以及檢查是否有什麼東西故障了。css 就是被這樣玩爛了!歸根結底,大部分的努力都...