Question

这是我的网站的链接，在笔记本电脑上工作正常，但在手机上它没有响应。这是我的网站https://ticketsoko.co.ke/的链接以下是它在手机上的展示方式。有没有办法在手机上它可以调整图像大小，并在桌面上显示相同的视图。

这是我从桌面查看的时候。

<head>
    <meta charset="utf-8">
    <!--<meta name="viewport"-->
    <!--      content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">-->
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" type="image/png" href="img/logoo.png"/>
    <title>Click & Pay | TicketSoko</title>  
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700%7COpen+Sans" rel="stylesheet"
          type="text/css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
          integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
          <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" -->
           <!-- integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> -->
    <link rel="stylesheet" href="./css/main.css">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
    <link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style3.css">
    <link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>


<nav class=" navbar-default navbar-fixed-top" style="background-color:#f2f2f2;">

     <ul>
         <img class="logo" src="img/logoo.png" alt="logo" style="height: 100px; width:250px; float:right;">
      </ul>

</nav>

<div class="container-fluid">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
     <div class="carousel-inner">
          <br><br><br>
            <div class="item active">
                <img src="img/image1.jpeg" alt="Los Angeles" style="width:100%; height:500px;">
            </div>

            <div class="item">
                <img src="img/2.jpg" alt="Chicago" style="width:100%; height:480px;">
            </div>

            <div class="item">
                <img src="img/3.jpg" alt="New york" style="width:100%; height:480px;">
            </div>

        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

Answer 1

我可以看到你使用宽度为250px。因此，无论是小屏幕还是大屏幕，它都会占据任何屏幕的250像素。例如，如果您在具有250px宽度的屏幕上设计此网站，那么它将在屏幕上完全呈现。如果您在大屏幕上运行它，那么它也只需要250像素，并且不会渲染剩余像素。

所以你应该使用percentage for the widths。就像你想要从左到右和50％的屏幕绘制一个组件。然后给出宽度为50％。就像那样，你可以使它响应。你也可以使用媒体查询。请阅读有关媒体查询的内容。

希望这会对你有所帮助。

如何让我的网站响应移动

1 个答案: