是否有適合各種尺寸手機的視口屏幕模式配置？

Question

我已經使用了視口屏幕模式的組合，但在跨手機和平臺進行測試時，它們往往不起作用。

我一直在使用有儘可能使用定義的480像素寬的html文件的代碼示例：

<link rel="stylesheet" media="only screen and (min-width: 320px) and (max-width: 480px) href="mobile.css" /> 

一直是：

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

任何幫助表示讚賞。

Answer 1

有很多不同的屏幕尺寸，所以嘗試爲所有屏幕設置樣式是一場失敗的戰鬥。更好的方法（可以說）是關注自己的內容的自然斷點，並設置@media規則（如有必要）在需要的地方重新排列內容。您可以通過縮小和擴大瀏覽器窗口來輕鬆測試這些斷點。然後你就會知道，無論屏幕大小如何，你都覆蓋了所有的基礎，並且內容將適當地流向該設備。