Question

我目前正在重新设计我的网站，并希望它在移动设备和台式机上都能响应。我的桌面版本看起来不错，但是由于文字的大小为vw。我希望能够减少网站的边缘，使尺寸更适合移动设备。

我正在使用柔性显示器，并根据图像大小调整窗口大小。调整窗口大小时，所有内容都会随之调整大小，这很好，但是我希望它在确定窗口大小后将侧面切掉。香港专业教育学院尝试使用minimum-width，但图像不能保持其中心位置。

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display|Quicksand" rel="stylesheet">
    <link href="CSS/Photo-styles.css" type="text/css" rel="stylesheet">
    <link href="CSS/topBlock-style.css" typle="text/css" rel="stylesheet">
</head>


<div class = "topBlock">
    <header class = "nameHeader">J O S H &nbsp K O T R O U S</header>
    <p class="navigation"><a class="navigation" href="Photo.html">Photo</a> &nbsp&nbsp <a class="navigation" href="Blog.html">Blog</a>  &nbsp&nbsp <a class="navigation" href="About.html">About</a> &nbsp&nbsp <a class="navigation" href="Contact.html">Contact</a> </p>

</div>


<body class = "container">
    <div class = "photoCategories"> 
        <a class = "photoCategory" href="Landscape.html"><img class = "photoCategory" src="images/streetscape.jpg"/></a>
        <p class = "categoryLabel">L A N D S C A P E </p>


    </div>

    <div class = "photoCategories"> 
        <a class = "photoCategory" href="Portraits.html"><img class = "photoCategory" src="images/emily.jpg"/></a>
        <p class = "categoryLabel">P O R T R A I T S</p>

    </div>


    <div class = "photoCategories"> 
        <a class = "photoCategory" href="Street.html"><img class = "photoCategory" src="images/street.jpg"/></a>
        <p class = "categoryLabel">S T R E E T</p>

    </div>
</body>

.topBlock{
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 6.5vw;
    background-color: white;
    top: 0;
    margin: 0 auto;


}

.nameHeader{
    font-family: 'Playfair Display', serif;
    font-size: 50px;
    font-size: 3vw;
    text-align: center;

}

.navigation{
    font-family: 'Quicksand Light', sans-serif;
    font-size: 25px;
    font-size: 1.5vw;
    text-align: center;
    margin-top: -1px;
    text-decoration: none;
    color: black;

}

.navigation:hover{
    transition: 0.25s;
    color: lightgray;
}

.container{
    padding-top: 4%;
    margin: 0;
    background: white;  
}

.photoCategories{
    display: flex;
    align-items: center; 
    justify-content: center; 
    text-align: center;
    background: black;


}

.photoCategory {
    display: block;
    min-width: 800px;
   width: 100%;
    opacity: 0.8;
}

.categoryLabel {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
    font-family: 'Playfair Display', serif;
    font-size: 40px;
    font-size: 4vw;
    color: white;

}

.photoCategory:hover{
    transition: 0.5s;
    opacity: 0.6;


}

如何减少手机网站的

0 个答案: