Question

我需要帮助!!!我遇到了一个问题！当我的网站显示在我的13英寸Mac上时，一切都定位在我想要的位置，而如果我在较小的Mac或其他任何东西上运行它，那么事物的位置就不是我想要它们的位置。我该如何解决？以下是我的一个页面的代码的主要部分：

<?php

    $sql = "SELECT * FROM movieimg WHERE name = '$movie_name'";
    $query = $mysqli->query($sql);
    $row = $query->fetch_array();
    $row_movieid = $row['id'];


    $reviewsql = $mysqli->query("SELECT * FROM `reviews` WHERE 
`movieid` = '$row_movieid'");
    if ($reviewsql == true) {

        $avgsql = $mysqli->query("SELECT AVG(rating) FROM `reviews` 
WHERE `movieid` = '$row_movieid'");
        $avg = $avgsql->fetch_assoc();

        while ($reviews = $reviewsql->fetch_array()) {
            $average_rating = $avg['AVG(rating)'];
            echo '<div class="yes-reviews"><span class="average-
rating">Average rating: </span>' . $average_rating . '</div>';
        }

        $totalsql = $mysqli->query("SELECT COUNT(id) FROM `reviews` 
WHERE `movieid` = '$row_movieid'");
        while ($totalsqlrow = $totalsql->fetch_assoc()) {
            $total_reviewed = $totalsqlrow['COUNT(id)'];
            echo '<div class="total-reviewed">Total Reviews: ' . 
$total_reviewed . '</div>';
        }

    } else {
        echo '<div class="reviews">There are no reviews for this movie 
yet. Would you like to be the first?</div>';
    }

    echo "<div class='movie-name-and-date'><h1>[ " . $row['name'] . " 
(" . $row['m_date'] . ") ]</h1>";
    echo '<div class="movie-img"><img src="../images/movies/' . 
$row['url'] . '" width="205" height="305"></div>';

    echo '<div class="bio">' . $row['bio'] . '</div>';
    echo '<div class="rating"><span>Rating: </span>' . $row['rating'] . 
'</div>';
    echo '<iframe width="1000" height="400" src="' . $row['y_url'] . 
'">
          </iframe>';
    echo '</div>';
    echo '<form action="../comment.php?m=' . $movie_name . '" 
method="post">
                <label for="rating" class="rate-label">Your rating: 
</label>
                <select id="rating" name="rating" class="rate">
                    <option value="">Rate your movie...</option>
                    <option value="10">½</option>
                    <option value="20">1</option>
                    <option value="30">1 ½</option>
                    <option value="40">2</option>
                    <option value="50">2 ½</option>
                    <option value="60">3</option>
                    <option value="70">3 ½</option>
                    <option value="80">4</option>
                    <option value="90">4 ½</option>
                    <option value="100">5</option>
                </select>
                <textarea name="comment" class="comment" 
placeholder="Add a comment about the movie..."></textarea>
                <input type="hidden" name="userid" value="' .                 
$userid["id"] . '">
                <input type="hidden" name="movieid" value="' . 
$row["id"] . '">
                <input type="submit" name="submit" value="Comment" 
class="submit">
          </form>';
?>

以下是此页面的CSS：

html {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;
overflow-x: hidden;
}
.movie-img {
width: 100%;
top: 85%;
margin-left: -404px;
position: absolute;
}
.movie-name-and-date {
text-align: center;
}
.bio {
position: absolute;
top: 85%;
left: 32%;
float: left;
text-align: left;
width: 600px;
font-size: 20px;
margin-bottom: 10px;
}
iframe {
position: absolute;
top: 20%;
margin-left: -500px;
}
.rating {
position: absolute;
top: 108%;
left: 32%;
font-size: 20px;
margin-bottom: t0px;
}
.rating span {
color: #696969;

}
.reviews {
padding: 10px;
border: 3px solid red;
font-weight: bold;
top: 112%;
position: absolute;
font-size: 20px;
left: 32%;
}
.comment {
resize: none;
top: 125%;
left: 32%;
font-size: 15px;
width: 620px;
height: 50px;
position: absolute;
}
.submit {
top: 134%;
left: 71%;
position: absolute;
}
.rate {
top: 122%;
left: 38%;
position: absolute;
}
.rate-label {
top: 122%;
left: 32%;
position: absolute;
}
.yes-reviews {
left: 32%;
top: 113%;
border: 3px solid black;
width: 590px;
height: 40px;
padding-top: 15px;
padding-left: 30px;
font-size: 20px;
position: absolute;
}    
.average-rating {
color: red;
font-weight: bold;
}
.total-reviewed {
left: 50%;
border-left: 1px solid black;
padding-left:15px;
top: 115.5%;
font-size: 20px;
position: absolute;
}

如果我最小化屏幕或在另一台计算机上查看它，那么所有类型的崩溃如下所示：here

我希望我的网站像这个网站，如果你最小化屏幕，一切都保持不变，但你必须滚动。此外，如果您在chrome book上使用堆栈溢出，它看起来与在mac上相同。我怎样才能做到这一点？非常感谢你这么多!!

Answer 1

通过快速查看CSS，为了使页面具有流动性，我们需要提供宽度，高度等百分比而不是固定数量的尺寸。例如 - 宽度：40％;

Answer 2

使用@media查询以避免在其他屏幕分辨率中破坏您的设计。 https://www.w3schools.com/css/css_rwd_mediaqueries.asp

根据计算机屏幕大小定位页面

2 个答案: