關於響應式設計的一些建議

我目前正在用wordpress設計一個組合網站。這個想法是，它將全部放在一個頁面中，並使用js來上下滾動。關於響應式設計的一些建議

以固定寬度編碼整個事物後，我想到了響應式設計。我開始閱讀，我想我明白了。在做其他任何事情之前，我會回到Photoshop並重新編輯移動設計 - 快速查看我想要的移動設備（幾乎是移動的第一個，至少在Photoshop上，忽略我已經有的東西）

In我目前的設計，我用幻燈片顯示我的工作示例。我正在使用這個插件http://css-tricks.com/3412-anythingslider-jquery-plugin/。我的第一本能是在移動時刪除這些幻燈片，併爲每項作品使用一個圖像。這是個好主意嗎？

另外我看到了一些響應式設計教程，它們對所有分辨率使用相同的圖像，然後用css將其縮小。我應該爲手機有不同的（大小）圖像嗎？例如

@media screen and (max-device-width: 480px) { 
    .img { 
    background:url(site-small.jpg) 
    } 
} 
@media screen and (max-device-width: 600px) { 
    .img { 
    background:url(site-large.jpg) 
    } 
}

正如我說我的投資組合的網站都在一個頁面上，我用的是jQuery的ScrollTo（）功能來獲得導航http://two24studios.com/這種效果。對於移動版本，我應該刪除還是不？

我有一些裝飾圖片，看起來令人印象深刻，並且增加了很少的互動，如果我在屏幕變小時刪除它們會更好。在這個筆記上（儘管我沒有看到它），如果我在小屏幕上刪除某些內容，我是否只使用display：none或者是否有辦法阻止內容無故加載。

我正在使用一種嵌入式字體進行設計，可以保留手機版本或對手機版本有任何限制，例如移動瀏覽器支持@ font-face嵌入。

而最後一件事，我打算在wordpress內創建一個新頁面，並將其稱爲「操場」，它將在html5，CSS3等演示列表中展示我的技能。我是否應該將其包含在移動版本中？我認爲移動用戶無法真正利用這一點？

我希望你能幫助我與任何這些不確定性，我有

來源

2011-11-17 aurel

移動用戶有更多有限的帶寬和連接速度較慢的。在考慮頁面加載速度有多快時，您應該牢記這一點，因爲這會極大地影響用戶體驗。

我會避免使用移動幻燈片 - 或者至少做一個幻燈片放映，使用適合屏幕尺寸的較小圖像。例如，當您在360像素寬的屏幕上時，您不需要下載720像素寬的圖像。

滾動到可能會正常工作。您可能想要考慮的一個問題是，如果您使用JavaScript實現「scrollTo」功能，則可以使用觸摸事件而不是單擊事件。（A presentation on touch events。）

至於你的遊樂場頁面，這完全取決於你計劃在那裏放置哪些演示。我會在移動設備上測試您的示例，看看它們是否有意義，並在那裏正常運行;如果他們這樣做，然後顯示它們。如果沒有，則要麼改善他們使用移動設備，要麼不要使用移動設備。

來源

2011-11-23 08:55:03 calvinf

關於響應式設計的一些建議

回答

相關問題