everysize 線上查看網頁在不同螢幕尺寸下的呈現效果

everysize 線上查看網頁在不同螢幕尺寸下的呈現效果

做了響應式網頁,該如何能夠看出其在不同螢幕尺寸下應有的效果呢?everysize 是個可以讓用戶選擇像是 iPhone、iPad、Google Pixel 等裝置的尺寸或是手動調整螢幕尺寸來呈現網頁的免費網站,不同以往看到的類似網站,該網站在呈現網頁後,用戶是可以直接操作非靜態的。

§相關文章,還可以參閱:

如何使用 everysize?

1.使用瀏覽器進入 everysize 網站,在下方輸入要測試的網址後,點擊[ GO ]。

everysize 線上查看網頁在不同螢幕尺寸下的呈現效果

2.預設會以四種螢幕尺寸出現,如果覺得不足,也可以按 + 來增加尺寸。

everysize 線上查看網頁在不同螢幕尺寸下的呈現效果

3.左上角的 % ,可以讓該尺寸縮放 100% 就是完整呈現。

everysize 線上查看網頁在不同螢幕尺寸下的呈現效果

4.也可以直接選擇要測試的裝置。

everysize 線上查看網頁在不同螢幕尺寸下的呈現效果

社群網站像是 Facebook、YouTube、Twitter、Instagram 都可以讓用戶自定義背景圖,即便是使用用戶自己拍攝的相片上傳,也會協助用戶調整圖片使之符合背景尺寸,但這樣的背景圖就顯得缺少變化,background generator 是個線上背景圖免費產生器,可產生出上述社群網站所需尺寸的背景圖,其利用簡單的 Layout 搭配顏色、多樣的圖案及用戶自行上傳的圖片,再加上參數的調整變化,就可以產生出多樣的背景圖,用戶可自由選擇 SVG、PNG 或 JPEG 的圖檔格式下載以利後續的應用。

漸層色彩在視覺上可以產生層次感,這對常看單一顏色的人來說,會更加有吸引力,以往要做出漸層色,設計師都會傾向於使用圖片,原因在於各家瀏覽器對 CSS 所支援的程度不相同,造成觀感不佳的問題,而如今瀏覽器對 CSS 3 基本上都支援的情況下,要達成純 CSS 語法就做出漸層色也變得相對簡單。Color gradient generator 這個免費網站提供 light、deep、rainbow 及 intense 四種漸層樣式、漸層方向、漸層大小等可視化工具讓讓用戶自行調整,完成後,就可產生 CSS 語法。