Question

嗨，大家好，我有点新的制作网站。我有这个网站：

.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来隐藏那里有r选项来执行此操作但不是那么健壮但是你可以试试你永远不会知道它可能在我的情况下工作它没有所以我尝试了媒体查询和Jquery。

对于jquery实现，请参阅此站点

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

如果您想手动执行此操作，则必须使用媒体查询。

例如

@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;
        }

}

对于整个tutorila，请参考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，其中将存储您网站的移动版本。

优化移动网站

3 个答案: