HTML CSS移動黑魔法

所以我做了noob開發者的錯誤，並在移動版本之前創建了標準的網頁。當然，當我通過移動打開我的網頁時，它完全搞砸了。我可以編寫一個移動的css文件，並將其鏈接到我以前的文章想知道是否有人知道任何黑魔法html或css格式化我可以附加到我的文件作爲修復。HTML CSS移動黑魔法

我操縱了視口內容顯示寬度和@media，但解決方案無法解決。

再次，我是新的，但承諾提前感謝。

您可以使用這個CSS

@media only screen and (max-width: 720px) { 
    body { 
     background-color: lightblue; 
     margin: 0px; 
    } 
}

的720像素是大多數智能手機的平均大小配置文件。您需要將這個元標記添加到您的HTML頁面以及

<meta name="viewport" content="width=device-width, initial-scale=1">

希望這有助於

2017-02-21 03:58:37

這確實有幫助，但對大多數人沒有幫助。例如。我原來80％的屏幕下拉菜單現在可能是25px。看起來我必須爲移動設備製作一個完整的CSS – theloosegoos

最簡單的方法是將您的所有特定的桌面代碼爲min-width媒體查詢，看起來像這樣：

@media screen and (min-width: 1000px)

其中1000px是您的網站需要切換到移動樣式的任何地方。這樣，所有的桌面CSS將被應用到你的第一個斷點。在這個例子中，一旦你得到1000px以下，你的桌面特定的CSS將停止應用，你的移動CSS可以接管。

將您的手機CSS放置在所有媒體查詢之外。一旦桌面CSS停止應用，瀏覽器將回退到「默認」移動CSS。

2017-02-21 03:59:37 Arnon

回答