针对移动设备优化网站

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媒体查询它可以帮助您开发针对不同屏幕分辨率的通用设计（也适用于移动设备）。
您还可以使用浏览器检测并将所有移动用户重定向到您的网站子域，例如 m.your_site.com，其中将存储您网站的移动版本。