优化移动端网站

Question

嗨，伙计们，我有点新手做网站。我有一个我正在制作的网站：

http://jsfiddle.net/Fgdm8/

.content{           
            background:url('images/ROME-960x700pix-width-BG_03.jpg') no-repeat center;
            margin: 0 auto;
            position: relative;
            max-width: 80%;
            text-align:center;
        }

我想寻求帮助，以修复什么，以使其成为一个移动就绪的网站。谢谢!

Answer 1

首先，尝试学习媒体查询。以下是一些可以指导您的幻灯片：

http://www.slideshare.net/zomigi/building-responsive-layouts-15508821

这也是一个很好的教程，也可以让你开始使用模板：

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Answer 2

你也可以使用dreamweaver来隐藏这些选项，但不是很健壮，但你可以尝试你永远不知道它可能在我的情况下起作用，所以我尝试了媒体查询和Jquery。

有关jquery的实现，请参阅此站点

http://devproconnections.com/jquery/jquery-mobile-tutorial-how-convert-existing-website-mobile-website伟大的网站必须参考，即使你不想。或

如果你想手动做这件事，你必须使用媒体查询。

示例

@media only screen and (max-device-width: 480px){

.content{           
            background:url('images/ROME-960x700pix-width-BG_03.jpg') no-repeat center;
            margin: 0 auto;
            position: relative;
            max-width: 80%;
            text-align:center;
        }

}

有关完整的教程，请参阅http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

您必须参考以上链接的整个页面，然后才能开始。尽情享受

Answer 3

查看css media queries它可以帮助你开发不同屏幕分辨率的通用设计(也适用于移动设备)。

此外，您还可以使用浏览器检测，并将所有移动用户重定向到您的站点子域，如m.your_site.com，其中将存储您站点的移动版本。