使網站與其他設備兼容

Question

所以我的網站在桌面上很好，沒有問題。但是當我說我的手機上看到它時，畫廊頁面非常混亂。現在我一直無法弄清楚如何使它兼容！請幫助，這裏是網站： http://www.marbleddesigns.com/

Answer 1

使用mediaquery，使其他設備上的網站顯示良好，我們稱之爲自適應設計

@media (max-width: 767px) { 
    // Style for devices have width <= 767px; 
} 
@media (max-width: 1023px) and (min-width: 768px) { 
    // Style for devices have width >= 768px and <= 1023px; 
} 
@media (min-width: 1024px) { 
    // Style for devices have width >= 1024px; 
} 

您可以爲頁面上的元素添加樣式。

我在此處添加了simple responsive grid system，您可以複製我的mediaquery css並將類添加到您的網站以使其在其他設備上正常工作。

Answer 2

有兩種主要方法使您的網站可用和在多個設備上響應。

我/定義尺寸的div和更多的時候確保使用百分比（％）。這將確保網站適應屏幕的大小，從而適應不同的分辨率。在考慮創建網站時，請始終查看不同的瀏覽器和設備，以查看它在每個位置的顯示效果。

II /當然其他選項是使用媒體查詢。它們的結構是這樣的：

@media only screen and (max-width: 600px) {color:red;} 

如果條件滿足像通常在我們的例子中，屏幕的大小，他們基本上都是適用的規則，如果瀏覽器窗口寬度大於600pw小文會變爲紅色。

對於一些好的教程我建議這些鏈接：

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

http://www.w3schools.com/css/css_rwd_mediaqueries.asp