如何創建手機屏幕可比的網站？

Question

如何使我的網站移動，因爲如果我的網站在移動設備上查看，那麼我的網站設計不合適，頁眉&頁腳不平衡。

請建議我的網站在移動設備上有什麼變化。

Answer 1

您可以使用mediaqueries *，你應該做responsive design resarch：

body{ 
    background-color: red; 
} 

@media screen and (max-width: 800px) { 
    body{ 
     background-color: green; 
    } 

} 
@media screen and (max-width: 500px) { 
    body{ 
     background-color: yellow; 
    } 
} 

上面的代碼是一個簡單的例子。主體默認爲紅色，如果設備小於800像素爲綠色，小於500像素爲黃色。您只能打印，或min-width:1024px或orientation:landscape。選項大量:)

小費：
這個提示會爲你節省大量的時間：如果不是定義爲不同的設備寬度，使用標準的阻止行爲。這將使您可以選擇使用元素作爲100％減去邊距/填充/邊框。

#wrapper{ 
    width: auto; 
    display: block; 
    margin: 10px; 
} 

* 在提供的鏈接中，僅提供了iPhone的示例。我建議你儘可能廣泛地使用它，長期來看這會更好