0

我想用挂毯构建一个 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>

该css文件：

body {
    margin: 0;
    padding: 0;
    background: #FFFFFF url(images/img01.jpg) repeat-x;
    text-align: justify;
    font: 15px Arial, Helvetica, sans-serif;
    color: #626262;
}

form {
    margin: 0;
    padding: 0;
}

input {
    padding: 5px;
    background: #FEFEFE url(images/img13.gif) repeat-x;
    border: 1px solid #626262;
    font: normal 1em Arial, Helvetica, sans-serif;
}

h1, h1 a, h2, h2 a, h3, h3 a {
    margin: 0;
    text-decoration: none;
    font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
    font-weight: normal;
    color: #444444;
}

h1 {
    letter-spacing: -1px;
    font-size: 2.2em;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

h2 {
    letter-spacing: -1px;
    font-size: 2em;
}

h3 {
    font-size: 1em;
}

p, ol, ul {
    margin-bottom: 2em;
    line-height: 200%;
}

blockquote {
    margin: 0 0 0 1.5em;
    padding-left: 1em;
    border-left: 5px solid #DDDDDD;
}

a {
    color: #1692B8;
}

a:hover {
    text-decoration: none;
}

/* Header */

div.header {
    height: 42px;
}

div.logo h1, div.logo p {
    float: left;
    text-transform: lowercase;
}

div.logo h1 {
    padding: 0px 0 0 40px;
}

div.logo p {
    margin: 0;
    padding: 14px 0 0 4px;
    line-height: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
}

div.logo a {
    text-decoration: none;
    color: #D0C7A6;
}

div.menu {
    float: right;
}

div.menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

div.menu li {
    display: block;
    float: left;
    height: 42px;
}

div.menu a {
    display: block;
    padding: 8px 20px 0px 20px;
    text-decoration: none;
    text-align: center;
    text-transform: lowercase;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 14px;
    color: #CEC5A4;
}

div.menu .last {
    margin-right: 20px;
}

div.menu a:hover {
    color: #FFFFFF;
}

div.menu .current_page_item A {
    text-decoration: underline;
}

div.menu .current_page_item a {
}

/* Page */

div.page {
    padding: 40px 40px 0 40px;
}

/* Content */

div.content {
    margin-right: 340px;
}

.post {
    margin-bottom: 10px;
}

.post .title {
    border-bottom: 1px #999999 dashed;
    font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
}

.post .title h2 {
    padding: 30px 30px 0 0px;
    text-transform: lowercase;
    font-weight: normal;
    font-size: 2.2em;
}

.post .title p {
    margin: 0;
    padding: 0 0 10px 0px;
    line-height: normal;
    color: #BABABA;
}

.post .title p a {
    color: #BABABA;
}

.post .entry {
    padding: 20px 0px 20px 0px;
}

.post .links {
    margin: 0;
    padding: 0 30px 30px 0px;
}

.post .links a {
    display: block;
    float: left;
    margin-right: 10px;
    margin-bottom: 5px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    color: #FFFFFF;
}

.post .links a:hover {
}

.post .links .more {
    width: 128px;
    height: 30px;
    background: url(images/img03.jpg) no-repeat left center;
}

.post .links .comments {
    width: 152px;
    height: 30px;
    background: url(images/img04.jpg) no-repeat left center;
}

/* Sidebar */

div.sidebar {
    float: right;
    width: 300px;
    margin-top: 30px;
}

div.sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

div.sidebar li {
    margin-bottom: 10px;
    background: url(images/img10.gif) no-repeat left bottom;
}

div.sidebar li ul {
    padding: 0 30px 40px 30px;
}

div.sidebar li li {
    margin: 0;
    padding-left: 20px;
}

div.sidebar h2 {
    padding: 30px 30px 5px 10px;
    background: url(images/img09.gif) no-repeat;
    text-transform: lowercase;
    font-weight: normal;
    font-size: 1.6em;
    color: #302D26;
}

div.sidebar DIV.sidebar-content {
    width: 265px;
    margin-left: 10px;
    padding-bottom: 1px;
}

div.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

div.video-container iframe,  
div.video-container object,  
div.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* Search */

li.search {
    padding: 20px 30px 40px 30px;
}

li.search input {
    padding: 0;
    width: 70px;
    height: 29px;
    background: #DFDFDF url(images/img14.gif) repeat-x;
    font-weight: bold;
}

li.search #s {
    padding: 5px;
    width: 150px;
    height: auto;
    background: #FEFEFE url(images/img13.gif) repeat-x;
    border: 1px solid #626262;
    font: normal 1em Arial, Helvetica, sans-serif;
}

li.search br {
    display: none;
}

/* Categories */

div.sidebar div.categories li {
    background: url(images/img12.gif) no-repeat left center;
}

/* Calendar */

div.calendar_wrap {
    padding: 0 30px 40px 30px;
}

div.calendar table {
    width: 100%;
    text-align: center;
}

div.calendar thead {
    background: #F1F1F1;
}

div.calendar tbody td {
    border: 1px solid #F1F1F1;
}

div.calendar #prev {
    text-align: left;
}

div.calendar #next {
    text-align: right;
}

div.calendar tfoot a {
    text-decoration: none;
    font-weight: bold;
}

div.calendar #today {
    background: #FFF3A7;
    border: 1px solid #EB1400;
    font-weight: bold;
    color: #EB1400
}

/* Footer */

div.footer {
    padding: 70px 0 50px 0;
    background: #757575 url(images/img08.gif) repeat-x;
}

div.footer p {
    margin-bottom: 1em;
    text-align: center;
    line-height: normal;
    font-size: .9em;
    color: #BABABA;
}

div.footer a {
    padding: 0 20px;
    text-decoration: none;
    color: #DDDDDD;
}

div.footer a:hover {
  color: #FFFFFF;
}

div.footer .rss {
    background: url(images/img18.gif) no-repeat left center;
}

div.footer .xhtml {
    background: url(images/img19.gif) no-repeat left center;
}

div.footer .css {
    background/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
    nav { 
        height: auto;
    }
    nav ul {
        width: 100%;
        display: block;
        height: auto;
    }
    nav li {
        width: 50%;
        float: left;
        position: relative;
    }
    nav li a {
        border-bottom: 1px solid #576979;
        border-right: 1px solid #576979;
    }
    nav a {
        text-align: left;
        width: 100%;
        text-indent: 25px;
    }
}

/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
    nav {
        border-bottom: 0;
    }
    nav ul {
        display: none;
        height: auto;
    }
    nav a#pull {
        display: block;
        background-color: #283744;
        width: 100%;
        position: relative;
    }
    nav a#pull:after {
        content:"";
        background: url('nav-icon.png') no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 10px;
    }
}

div.footer .legal a {
    padding: 0;
}

/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
    nav { 
        height: auto;
    }
    nav ul {
        width: 100%;
        display: block;
        height: auto;
    }
    nav li {
        width: 50%;
        float: left;
        position: relative;
    }
    nav li a {
        border-bottom: 1px solid #576979;
        border-right: 1px solid #576979;
    }
    nav a {
        text-align: left;
        width: 100%;
        text-indent: 25px;
    }
}

/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
    nav {
        border-bottom: 0;
    }
    nav ul {
        display: none;
        height: auto;
    }
    nav a#pull {
        display: block;
        background-color: #283744;
        width: 100%;
        position: relative;
    }
    nav a#pull:after {
        content:"";
        background: url('nav-icon.png') no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 10px;
    }
}

/*Smartphone*/
@media only screen and (max-width : 320px) {
    nav li {
        display: block;
        float: none;
        width: 100%;
    }
    nav li a {
        border-bottom: 1px solid #576979;
    }
}

非常感谢。

4

3 回答 3

1

您缺少右括号。它位于下面的第 2 行和第 3 行之间。

div.footer .css {
    background/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
于 2013-05-01T19:37:17.400 回答
0

我建议不要自己滚动，而是查看已经响应的现有库，然后对其进行自定义，这样可以节省一些时间，而不是重新发明轮子。

Bootstrap就是这样一个优秀的库。您还可以使用 Tapestry -bootstrap集成项目轻松地将其集成到 Tapestry 中。我已经在多个响应式应用程序中使用了这个组合，其中一些专门用于移动设备，并且非常成功。

于 2013-05-02T14:07:47.843 回答
0

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

div.footer .css {
   background: url(images/img20.gif) no-repeat left center;
}
@media .... etc.
于 2013-05-02T10:07:22.143 回答