css - 网站显示与智能手机不兼容

Question

我有一个网页，其顶部有一个菜单栏，这是图像在 x 轴上重复的结果。

width: 900px;
margin: 0 auto;
background-image: url(/images/white-fade-short.png);
background-repeat: repeat-x;

菜单链接以上面提到的图像为背景提到。这个网站在桌面上呈现完美。但是当加载到智能手机上时，栏的图像呈现的比实际网页大小要大得多，并且它会滚动到特定长度。我怎样才能解决这个问题。还设置了以下 css 属性以使其与智能手机显示兼容:

@media screen and (max-width: 1024px){
        img.bg {
            left: 50%;
            margin-left: -512px; }
    }

此代码是否以任何方式造成问题？

Answer 1

你需要看看这个教程http://webdesignerwall.com/tutorials/css3-media-queries

它会帮助你