CSS和HTML在移动设备上无法很好地呈现

Question

我有一个我创建的页面，它可以在桌面上运行良好但在移动浏览器中搞砸了。

这是移动版。我有一个header和一个.container（灰色背景的那个）设置为宽度100％。在.container中我将.wrapper设置为width: 900px;和margin: 0 auto;。为什么蓝色背景和灰色背景渲染到页面的大约一半？在移动设备上创建像桌面版本这样的页面的最佳方法是什么？

Answer 1

我相信您的包装可能会导致问题。而不是为对象设置固定的宽度：

.wrapper {
    max-width:900px;
    width:100%;
    display:block; //for centering
    margin:0 auto // for centering

}

应解决您的问题并使网站在不同平台上更具响应性。 祝好运！ ：）

注意

如果您还没有这样做，请参加 rajkumar的评论并添加：

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

Answer 2

这是您的wrapper和li宽度。将它们设置为百分比。

.wrapper {
    width: 90%;
    margin: 0 auto;
 }

 li {
    width: 30%;
    ....
 }

Answer 3

如果你想为桌面和移动设备创建一个网站..尝试所有宽度的百分比。因为百分比只根据屏幕分辨率自动适合宽度。假设您以像素为单位显示屏幕在所有屏幕分辨率下都不可调整。根据你的尺寸修复。 在您的情况下，请确保所有宽度百分比。 并且请在标题部分

中符合获取屏幕宽度的媒体类型

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