Question

我有一个响应式页面，其中包含一个带有图像和文本的标题容器，可在调整浏览器窗口大小时更改其大小。代码如下：

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="script.js"></script>
    <link href="style.css" rel="stylesheet" />
    <link href="http://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="header">
        <img src="city.png" />
        <span>Weather Website</span>
    </div>
</body>
</html>

css如下：

* {

    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body
{
    font-family: Arial;
    font-size: 14px;
}
/*img
{
    width: 100%;
}*/
#header
{
    text-align: center;
    background-color: #ededed;
    padding: 1em 0;
}
#header span
{
    font-family: 'Bree Serif', serif;
    font-size: 2em;
    color: #414142;
    vertical-align: middle;
    margin-left: 2px;

}
#header img
{
    vertical-align: middle;

}
@media screen and (max-width:600px) {

  #header img {
    width: 15%;
  }

}
@media screen and (max-width:380px) {

  #header span {
    font-size: 1.65em;
  }

}

我希望在特定窗口大小之后跨度低于img。我怎么能完成它？感谢。

Answer 1

您只需将display: block添加到媒体查询中的span元素即可：

https://jsfiddle.net/5b3b0srj/

@media screen and (max-width:600px) {
  #header span {
    display: block;
  }
}

Answer 2

如果宽度为600像素或更小

，这会将跨度放在图像下方

@media screen and (max-width:600px) {
#header span
{
    display:block; width:100%;

}
}

Answer 3

首先，我不知道你的窗口大小是多少。

您可能需要考虑像Bootstrap这样的响应式框架来实现这一目标。

将图像包裹在例如col-sm-12中，将文字换成另一个col-sm-12，然后您的图像和文字将叠加在手机上。

<div id="header row">
        <img class="col-sm-12" src="city.png" />
        <span class="col-sm-12">Weather Website</span>
</div>

http://getbootstrap.com/

Answer 4

您可以使用bootstrap的网格系统。更改以下代码：

//   index.html

<!doctype html>
<html lang="en" ng-app="appModule">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <meta name="viewport" content="width=device-width" />

    <base href="http://localhost:63342/students/">

    <!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>-->
    <!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.js"></script>-->
    <script src="angular.js"></script>
    <script src="angular-route.js"></script>

    <script src="app.js"></script>

    <script src="services/routing.js"></script>
    <script src="services/menuToggle.js"></script>

    <script src="controllers/menuToggleCtrl.js"></script>
    <script src="controllers/mainMenuCtrl.js"></script>
    <script src="controllers/page1Ctrl.js"></script>
    <script src="controllers/page2Ctrl.js"></script>
</head>

<body>
<header ng-controller="MenuToggleCtrl">
    <button class="menuLeft" type="button" ng-model="clicked" ng-click="menuToggle()">&#9776;</button>
    <label id="pageTitle" class="pageTitle">Select item from list</label>
    <button class="menuRight" type="button">&#8942;</button>
</header>
<!--
<section class="mainMenu" ng-controller="MainMenuCtrl" ng-if="!clicked">
    <ul>
        <li ng-repeat="item in menuItems">
            <a href="#/{{item.name}}">
                <image ng-src="images/{{item.image}}.png"></image>
                {{item.name}}
            </a>
        </li>
    </ul>
</section>
-->

<main ng-view>
  <section>
    <input type="text" placeholder="page1-input1">
</section>
  </main>

<footer ng-controller="MenuToggleCtrl" ng-if="clicked">
    <ul class="horizontal-style">
        <li><button type="button">NO</button></li>
        <li><button type="button">EXTRA</button></li>
        <li><button type="button">YES</button></li>
    </ul>
</footer>

</body>
</html>

要

<div id="header">
        <img src="city.png" />
        <span>Weather Website</span>
</div>

<div id="header"> <div class="row"> <img src="city.png" class="col-xs-12 col-sm-12 col-md-6 col-lg-6"/> <span class="col-xs-12 col-sm-12 col-md-6 col-lg-6">Weather Website</span> </div> </div>用于大屏幕（较大的桌面），col-lg-6用于中等屏幕（桌面），col-md-6用于小屏幕（平板电脑），col-sm-12是用于较小的屏幕（手机）。

col-sm-12和col-lg-6中的

<img>表示该行在<span>和<img>水平划分相同的大小。

<span>和col-sm-12中的

<img>表示行划分<span>并垂直划分，因为行只能容纳12列宽度。因此，当浏览器在小屏幕中调整大小时，<img>将低于<span>。

将对象放在响应页面中的其他对象下

4 个答案: