網頁移動應用程序的響應設計

Question

你好即時實現一個Web應用程序，我的問題是設計。 該應用程序正在運行作爲一個網站。現在我發現的是媒體查詢，我用它們來顯示該網站的筆記本電腦1920x1080，移動480x720和平板電腦768x1024。

我做的是改變變焦，並顯示在不同分辨率下的網站，如下面

@media只有屏幕和（最小寬度：768px）和（最大寬度：1,024）和（方向：橫向）{body {zoom：35％;}}

還有其他的方法嗎？任何API使用？或Javascript？ 想做一些簡單的事情，因爲現在實施移動和平板電腦決議的CSS我做了2,3天在這些設備上測試。所以我想要的東西，這將使我的網站響應無需有設備我想這chek我希望它能在任何地方工作。

在此先感謝。

Answer 1

看看Foundations和Twitter bootstrap。這些是實時響應的CSS庫，可根據屏幕的大小自動重新定位和調整頁面上的元素。您可以通過訪問這些鏈接並重新調整瀏覽器窗口的大小來查看。如果它適用於您的項目，這是一個很好的方法，因爲頁面可以自行處理，而無需爲每種屏幕尺寸編寫不同的樣式。看看this page看看他們是如何工作的。您也可以查看modernizr。它所做的是檢測您正在使用什麼類型的設備來查看頁面以及它支持哪些功能，然後添加指示它支持哪些功能的頁面body標籤，然後可以爲其編寫css樣式。例如，如果用戶正在觸摸屏設備上查看您的網站，則可以這樣寫。

.touch。你的級{

}

它可以用來檢測屏幕大小以及：https://stackoverflow.com/a/16482237/1727920