我的项目中的问题，响应问题和项目崩溃

问题描述 投票：0回答：1

我在前端导师上做了一个项目，该项目在我的屏幕（笔记本电脑）上运行良好，也适用于某些手机！但问题是，在其他屏幕上它会损坏，我不知道为什么请帮助我，这是图像，我想要如何工作，Image 在其他屏幕中图像变宽，按钮损坏也会损坏卡片。这是它的图片 -> The image

这是html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="colors.css">
  <title>Frontend Mentor | Order summary card</title>
</head>
<body>
<div class="container">
    <div class="card">
      <img src="images/illustration-hero.svg" alt="avatar icon">
      <div class="content">
        <h1>Order Summary</h1>
        <p>
          You can now listen to millions of songs, audiobooks, and podcasts on any 
          device anywhere you like!
        </p>
        <div class="panel">
          <img src="images/icon-music.svg" alt="music icon">
          <div class="p-text">
            <b>Annual Plan</b><br>
            $59.99/year
          </div>
          <a href="">Change</a>
        </div>
        <!-- b -> button -->
        <button class="b-payment">Proceed to Payment</button>
        <button class="b-cancel">Cancel Order</button>
      </div>
    </div>
    <div class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
      Coded by <a href="https://linktr.ee/shafni50">safni-nazar</a>.
    </div>
</div>
</body>
</html>

这是 Css 代码（嵌套 css），我已经给出了完整的代码，以便您可以在您的 PC 或计算机上进行测试：

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&family=Red+Hat+Display:wght@500;900&display=swap');

@media screen and (max-width: 375px) {
    .container {
        background-image: url(images/pattern-background-mobile.svg);
        background-repeat: no-repeat;
        background-size: contain;
    }

    .panel .p-text,
    .panel a {
        font-size: 14px;
    }
}

@media screen and (max-width: 330px) {
    .panel .p-text,
    .panel a {
        font-size: 12px;
    }
}

@media screen and (max-width: 300px) {
    .panel .p-text,
    .panel a {
        font-size: 10px;
    }
}


:root {
    --very-pale-blue: hsl(225, 100%, 98%);
    --pale-blue:  hsl(225, 100%, 94%);
    --desatured-blue: hsl(224, 23%, 55%);
    --bright-blue: hsl(245, 75%, 52%);
    --dark-blue: hsl(223, 47%, 23%);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    background-color: var(--pale-blue);
    background-image: url(images/pattern-background-desktop.svg);
    /* background-repeat: repeat-x; */
    background-repeat: no-repeat;
    background-size: contain;
}

body {
    min-height: 100vh;
    display: flex;
    font-family: 'Outfit', sans-serif;
    font-family: 'Red Hat Display', sans-serif;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.container {
    width: max(100%, 60%);
    max-width: 400px;
    padding: 1rem;
    max-width: 400px; 
    margin: 0 auto;
}

.card {
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 10px 50px;
    border-radius: 15px;

    & h1 {
        font-size: 24px;
        color: var(--dark-blue);
        margin-bottom: 1rem;
    }

    & p {
        font-size: 15px;
        color: var(--desatured-blue);
        margin-bottom: 1.5rem;
    }

    & img {
        border-top-right-radius: 15px;
        border-top-left-radius: 15px;
        max-width: 100%;
    }

    .content {
        padding: 2rem;

        .panel {
            width: 100%;
            margin-bottom: 2rem;

            /* gave this coz for the overflow of the img */
            content: "";
            display: table;
            clear: both;

            padding: 1rem;
            border-radius: 10px;
            background-color: var(--very-pale-blue);
    
            .p-text {
                margin-left: 1rem;
                float: left;
            }
    
            & img {
                float: left;
                object-fit: cover;
                border-radius: 50%;
            }
    
            & b {
                color: var(--dark-blue);
                font-weight: 900;
            }
    
            & a {
                margin-top: 0.5rem;
                float: right;
                color: var(--bright-blue);
                font-weight: bold;

                &:hover {
                    opacity: 0.6;
                    text-decoration: none;
                }

            }
    
        }

    }

    .b-payment {
        cursor: pointer;
        border: none;
        font-weight: 800;
        color: var(--very-pale-blue);
        background-color: var(--bright-blue);
        padding: 1rem;
        border-radius: 10px;
        width: 100%;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 50px 0 rgba(0,0,0,0.19);

        &:hover {
            transition: all 0.3s;
            opacity: 0.7;
        }

    }

    .b-cancel {
        border: none;
        margin-top: 1.5rem;
        cursor: pointer;
        font-weight: 800;
        color: var(--desatured-blue);
        background-color: none;
        background: transparent;
        width: 100%;

        &:hover {
            color: var(--dark-blue);
        }

    }

}

.attribution { 
    padding-top: 1rem;
    font-size: 11px; 
    text-align: center; 

    & a{
        color: hsl(228, 45%, 44%);
    }

}
css responsive-design
1个回答
0
投票

尝试对图像使用 width:100%，如下所示：

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&family=Red+Hat+Display:wght@500;900&display=swap');

@media screen and (max-width: 375px) {
.container {
    background-image: url(images/pattern-background-mobile.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

.panel .p-text,
.panel a {
    font-size: 14px;
}
}

@media screen and (max-width: 330px) {
.panel .p-text,
.panel a {
    font-size: 12px;
}
}

@media screen and (max-width: 300px) {
.panel .p-text,
.panel a {
    font-size: 10px;
}
}


:root {
--very-pale-blue: hsl(225, 100%, 98%);
--pale-blue:  hsl(225, 100%, 94%);
--desatured-blue: hsl(224, 23%, 55%);
--bright-blue: hsl(245, 75%, 52%);
--dark-blue: hsl(223, 47%, 23%);
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background-color: var(--pale-blue);
background-image: url(images/pattern-background-desktop.svg);
/* background-repeat: repeat-x; */
background-repeat: no-repeat;
background-size: contain;
}

body {
min-height: 100vh;
display: flex;
font-family: 'Outfit', sans-serif;
font-family: 'Red Hat Display', sans-serif;
text-align: center;
align-items: center;
justify-content: center;
}

.container {
width: max(100%, 60%);
max-width: 400px;
padding: 1rem;
max-width: 400px; 
margin: 0 auto;
}

.card {
background-color: #fff;
box-shadow: rgba(149, 157, 165, 0.2) 0px 10px 50px;
border-radius: 15px;

& h1 {
    font-size: 24px;
    color: var(--dark-blue);
    margin-bottom: 1rem;
}

& p {
    font-size: 15px;
    color: var(--desatured-blue);
    margin-bottom: 1.5rem;
}

& img {
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    max-width: 100%;
    width: 100%;
}

.content {
    padding: 2rem;

    .panel {
        width: 100%;
        margin-bottom: 2rem;

        /* gave this coz for the overflow of the img */
        content: "";
        display: table;
        clear: both;

        padding: 1rem;
        border-radius: 10px;
        background-color: var(--very-pale-blue);

        .p-text {
            margin-left: 1rem;
            float: left;
        }

        & img {
            float: left;
            object-fit: cover;
            border-radius: 50%;
            width: 40px;
            height: 40px;
        }

        & b {
            color: var(--dark-blue);
            font-weight: 900;
        }

        & a {
            margin-top: 0.5rem;
            float: right;
            color: var(--bright-blue);
            font-weight: bold;

            &:hover {
                opacity: 0.6;
                text-decoration: none;
            }

        }

    }

}

.b-payment {
    cursor: pointer;
    border: none;
    font-weight: 800;
    color: var(--very-pale-blue);
    background-color: var(--bright-blue);
    padding: 1rem;
    border-radius: 10px;
    width: 100%;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 50px 0 rgba(0,0,0,0.19);

    &:hover {
        transition: all 0.3s;
        opacity: 0.7;
    }

}

.b-cancel {
    border: none;
    margin-top: 1.5rem;
    cursor: pointer;
    font-weight: 800;
    color: var(--desatured-blue);
    background-color: none;
    background: transparent;
    width: 100%;

    &:hover {
        color: var(--dark-blue);
    }

}

}

.attribution { 
padding-top: 1rem;
font-size: 11px; 
text-align: center; 

& a{
    color: hsl(228, 45%, 44%);
}

}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="colors.css">
  <title>Frontend Mentor | Order summary card</title>
</head>
<body>
<div class="container">
<div class="card">
  <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR2AewBSFBwdvuEP1XLYMW9lotbvGMTLu_MUxN6jGVpPlkZvyBd" alt="avatar icon">
  <div class="content">
    <h1>Order Summary</h1>
    <p>
      You can now listen to millions of songs, audiobooks, and podcasts on any 
      device anywhere you like!
    </p>
    <div class="panel">
      <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQzbTa5rYtHgnHgfHHyE_b37lmYFn9mN-RPMk7yfBkirysJdbpR" alt="music icon">
      <div class="p-text">
        <b>Annual Plan</b><br>
        $59.99/year
      </div>
      <a href="">Change</a>
    </div>
    <!-- b -> button -->
    <button class="b-payment">Proceed to Payment</button>
    <button class="b-cancel">Cancel Order</button>
  </div>
</div>
<div class="attribution">
  Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
  Coded by <a href="https://linktr.ee/shafni50">safni-nazar</a>.
</div>
</div>
</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.