Html 使用tapestry的web响应设计_Html_Css_Tapestry

Html 使用tapestry的web响应设计

html css

Html 使用tapestry的web响应设计,html,css,tapestry,Html,Css,Tapestry,我想用tapestry构建一个响应web的网站，我在.tml文件的头部添加元数据，并使用css进行响应设计。然而，它根本不起作用。我用一个弹性youtube视频进行了测试，它应该与页面的宽度相匹配。我在这里发布了.tml文件和css .tml文件： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:t="http://tapestry.apache.org/schema/tape

我想用tapestry构建一个响应web的网站，我在.tml文件的头部添加元数据，并使用css进行响应设计。然而，它根本不起作用。我用一个弹性youtube视频进行了测试，它应该与页面的宽度相匹配。我在这里发布了.tml文件和css

.tml文件：

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"
      xmlns:p="tapestry:parameter">
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
       <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
       <link href="${context:layout/normalize.css}" rel="stylesheet" type="text/css"/>
       <title>${title}</title>
    </head>
    <body>
        <!-- start header -->
        <div class="header">
            <div class="logo">
                <h1>
                    <t:pagelink page="index">com.example:tutorial1</t:pagelink>
                    &nbsp;
                    version ${appVersion}
                </h1>
            </div>
            <div class="menu">
                <ul>
                    <li t:type="loop" source="pageNames" value="pageName" class="prop:classForPageName">
                        <t:pagelink page="prop:pageName">${pageName}</t:pagelink>
                    </li>
                </ul>
            </div>
            <div class="video-container">
                <iframe width="560" height="315" src="http://www.youtube.com/embed/R800WcsFj0U" frameborder="0"></iframe>
            </div>
        </div>
        <!-- end header -->
        <!-- start page -->
        <div class="page">
            <!-- start sidebar -->
            <div class="sidebar">
                <ul>
                    <li class="search" style="background: none;">
                    </li>
                    <li>
                        <t:alerts/>
                    </li>
                    <li t:type="if" test="sidebar">
                        <h2>${sidebarTitle}</h2>

                        <div class="sidebar-content">
                            <t:delegate to="sidebar"/>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- end sidebar -->
            <!-- start content -->
            <div class="content">
                <div class="post">
                    <div class="title">
                        <h2>${title}</h2>
                    </div>
                    <div class="entry">
                        <t:body/>
                    </div>
                </div>
            </div>
            <!-- end content -->
            <br style="clear: both;"/>
        </div>
        <!-- end page -->
        <!-- start footer -->
        <div class="footer">
            <p class="legal">
                &copy;2012 com.example. All Rights Reserved.
                &nbsp;&nbsp;&bull;&nbsp;&nbsp;
                Design by
                <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>
                &nbsp;&nbsp;&bull;&nbsp;&nbsp;
                Icons by
                <a href="http://famfamfam.com/">FAMFAMFAM</a>.
            </p>
        </div>
        <!-- end footer -->
    </body>
</html>

非常感谢。

您缺少一个右括号。它在下面的第二行和第三行之间

div.footer .css {
    background/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {

正如Lee Meador已经指出的，您缺少页脚声明的右大括号，而且背景标记也不完整。它应该是这样的（从其他标记推断）：

与其自己滚动，我建议您查看一个已经响应的现有库，然后定制它，这样可以节省一些时间，而不是重新发明轮子

是一个如此优秀的图书馆。您还可以使用集成项目轻松地将其集成到Tapestry中。我已经在多个响应应用程序上使用了此组合，其中一些专门用于手机，并且非常成功。

在您的浏览器中，它是否在源HTML中显示css文件的正确路径？您也可以像FireBug一样查看调试器。或者，您可以检查是否已在浏览器中加载css文件。该文件已加载。只有响应能力不能正常工作。

div.footer .css {
    background/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {

div.footer .css {
   background: url(images/img20.gif) no-repeat left center;
}
@media .... etc.