如何使移動設計的網站在不同的屏幕解決方案上看起來類似

-4

我目前正在設計一個移動網站，它可以在320x480屏幕上完美地工作。問題來了，因爲新手機不再使用這種尺寸，而且要大得多。（正如我在將所有努力放入並在手機上閱讀之後發現的那樣）我想知道是否有任何簡單的方法可以使它擴大適當的尺寸，我希望它看起來沒有前進，並且提供了一切view-width/vw或view-height/vh等級。（Nvm，我想知道這將如何影響字體大小。）如何使移動設計的網站在不同的屏幕解決方案上看起來類似

或者我是否需要繼續並做到這一點，或類似的東西？（因爲它會特別糟糕，如果它不是移動友好的，由於各種原因涉及它的創作。）

來源

2016-09-25 Andrew Humphreys

歡迎來到StackOverflow！你會因爲你的問題很模糊而被低估。你在找什麼叫做響應式網頁設計。如果你谷歌它有很多的信息。在您閱讀完該文件後，如果您遇到問題，可以返回此處併發布您的代碼。如果你這樣做，請考慮閱讀[**如何創建一個最小，完整和可驗證的示例**]（http://stackoverflow.com/help/mcve）和[**如何提出一個好問題？ **]（http://stackoverflow.com/help/how-to-ask）。 – Ricky

this可能會有所幫助，這就是我們使用響應式設計作爲不同屏幕尺寸解決方案的原因。以下內容將添加到<head>，以便瀏覽器響應像素/屏幕大小。

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0">

而且media queires是用來改變基於屏幕寬度的設計，EM用來代替PX作爲PX是絕對的，其中作爲EM將根據設備響應，您可以閱讀更多here。使用百分比代替絕對大小（如有必要），您可以在here上閱讀更多內容。

來源

2016-09-25 20:15:49

使用媒體查詢，你應該看到的東西像

@media(max-width:768px){.someClass{someCssStiling:xValue;}}

這意味着該樣式將768px下才能正常工作。您可以閱讀文檔有關媒體查詢這裏（和其他許多地方，有很多文檔的互聯網上。）：

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

希望它能幫助！

來源

2016-09-25 20:25:54 JoelBonetR

如何使移動設計的網站在不同的屏幕解決方案上看起來類似

回答

相關問題