Question

我正在创建一个xml网页，但我需要它才能做出响应。我无法弄清楚我在编码中缺少什么，因为它似乎都在那里。

但是，我需要在一行上使用多个元素（除非重新调整为更小）。

我该怎么做？

    <?xml version="1.0" encoding="utf-8"?>
    <?xml-stylesheet href="CISStyle43.css"?>


      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
        <style>
          <body>
            <MYcourses>

                <course>
    <div class="w3-third">
                  <div class="class">
                    <row1>
                      <number>THIS ONE 1532 </number>
                      <name> Timing to Clock </name>
                      <credit>  To Me </credit>
                    </row1>
                    <row2>
                      <description> Lovely day lovely day  </description>
                    </row2>
                  </div>
    </div>
                </course>
            <div class="class">
                    <row1>
                      <number>THIS ONE 1653 </number>
                      <name> Timing to Clock </name>
                      <credit>  To Me </credit>
                    </row1>
                    <row2>
                      <description> Lovely day lovely day  </description>
                    </row2>
                  </div>
    </div>
                </course>
<div class="class">
                    <row1>
                      <number>THIS ONE 11344444 </number>
                      <name> Timing to Clock </name>
                      <credit>  To Me </credit>
                    </row1>
                    <row2>
                      <description> Lovely day lovely day  </description>
                    </row2>
                  </div>
    </div>
                </course>
<div class="class">
                    <row1>
                      <number>THIS ONE 142233 </number>
                      <name> Timing to Clock </name>
                      <credit>  To Me </credit>
                    </row1>
                    <row2>
                      <description> Lovely day lovely day  </description>
                    </row2>
                  </div>
    </div>
                </course>
<div class="class">
                    <row1>
                      <number>THIS ONE 1314541 </number>
                      <name> Timing to Clock </name>
                      <credit>  To Me </credit>
                    </row1>
                    <row2>
                      <description> Lovely day lovely day  </description>
                    </row2>
                  </div>
    </div>
                </course>
<div class="class">
                    <row1>
                      <number>THIS ONE 1432 </number>
                      <name> Timing to Clock </name>
                      <credit>  To Me </credit>
                    </row1>
                    <row2>
                      <description> Lovely day lovely day  </description>
                    </row2>
                  </div>
    </div>
                </course>
<div class="class">
                    <row1>
                      <number>THIS ONE 145 </number>
                      <name> Timing to Clock </name>
                      <credit>  To Me </credit>
                    </row1>
                    <row2>
                      <description> Lovely day lovely day  </description>
                    </row2>
                  </div>
    </div>
                </course>
<div class="class">
                    <row1>
                      <number>THIS ONE 1222</number>
                      <name> Timing to Clock </name>
                      <credit>  To Me </credit>
                    </row1>
                    <row2>
                      <description> Lovely day lovely day  </description>
                    </row2>
                  </div>
    </div>
                </course>
          </MYcourses>

      </body>
    </style>
  </link>

</meta>


.class {
    float: left;
    margin: 5px;
    padding: 15px;
    width: 600px;
    height: 300px;
    border: 1px solid black;
} 


body {  
    display: block;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}


row1 {

    display: block;
    font-weight: bold;
    border: inset;
    background-color: gray;
    color: white;
}

row2 {

    display: block;
    border: inset;
    background-color: lightgray;
    color: black;
}

number {
    color: blue;
}

Answer 1

响应式设计的一个好例子是使用@media：

例如，对于max-width小于1000px的设备：

@media only screen and (max-width: 1000px) {
 YOUR CSS HERE
}

添加到html头部也很重要：

<meta name="viewport" content="width=device-width, initial-scale=1">

XML响应式网页

1 个答案: