是否可以在不使用媒体文件的情况下使任何部分响应？

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

我在页面上制作了一个横幅/英雄部分。在此，我使用三个 divs 来制作彩色角。我为照片和内容使用了另外一个 div。问题是我不想对每个像素或一系列像素使用媒体查询，而且我也不想使用图像来代替此设计。现在，当我将页面变成 inspect element 并检查响应能力时，banner 类中的所有内容都可以响应吗？

代码如下-

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.mantri_main_container{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mantri_main_container .banner{
    border: 2px solid red;
    width: 100%;
    height: 45vh;
    background: linear-gradient(45deg, #EAEAEA 0%, #8B8B8B 100%);
    position: relative;
}
.mantri_main_container .banner .saffron,
.mantri_main_container .banner .white,
.mantri_main_container .banner .green{
    position: absolute;
    height: 100%;
    width: 100%;
}
.mantri_main_container .banner .saffron::before{
    content: "";
    clip-path: polygon(11% 0%, 0 0, 0 100%);
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #FF671F;
}
.mantri_main_container .banner .saffron::after{
    content: "";
    clip-path: polygon(100% 0, 89% 0, 100% 100%);
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #FF671F;
    transform: rotateX(180deg);
}
.mantri_main_container .banner .white::before{
    content: "";
    clip-path: polygon(13% 0, 17% 0, 6% 100%, 2% 100%);
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #ffffff;
}
.mantri_main_container .banner .white::after {
    content: "";
    clip-path: polygon(98% 0, 94% 0, 83% 100%, 87% 100%);
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #ffffff;
}
.mantri_main_container .banner .green::before {
    content: "";
    clip-path: polygon(19% 0, 21% 0, 10% 100%, 8% 100%);
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #046A38;
}
.mantri_main_container .banner .green::after {
    content: "";
    clip-path: polygon(92% 0, 90% 0, 79% 100%, 81% 100%);
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #046A38;
}
.mantri_main_container .banner .image_main_container {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mantri_main_container .banner .image_main_container .image_container{
    width: 57%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    position: absolute;
}
.mantri_main_container .banner .image_main_container .image_container .image_details{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 65%;
    height: 100%;
}
.mantri_main_container .banner .image_main_container .image_container .image_details h1{
    font-family: 'DM Sans';
    font-size: 60px;
    font-size: clamp(9px, 3vw, 4rem);
    text-align: center;
    text-shadow: 3px 3px 5px #9d9cb5, 3px 3px 5px #7371b1;
    color: #06038D;
}
.mantri_main_container .banner .image_main_container .image_container .image_details h3{
    font-family: 'DM Sans';
    font-size: 28px;
    font-size: clamp(7px, 2vw, 1.5rem);
    text-align: center;
}
.mantri_main_container .banner .image_main_container .image_container .image_details img{
    width: 7vw;
    object-fit: contain;
}
.mantri_main_container .banner .image_main_container .image_container .image{
    width: 26%;
    height: auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: auto;
    height: 36vh;
    position: absolute;
    bottom: 0;
    right: 0;
}
.mantri_main_container .banner .image_main_container .image_container .image img{
    width: 100%;
    height: 85%;
    object-fit: contain;
    height: 100%;
    position: relative;
}
<div class="mantri_main_container">
    <div class="banner">
        <div class="saffron"></div>
        <div class="white"></div>
        <div class="green"></div>
        <div class="image_main_container">
            <div class="image_container">
                <div class="image_details">
                    <h1>Shri Lorem Ipsum Ji</h1>
                    <h3>Lorem ipsum dolor sit amet consectur</h3>
                    <img src="underline.png" alt="">
                </div>
                <div class="image" style="width:241px;">
                    <img src="https://unsplash.com/photos/a-man-wearing-a-green-coat-and-sunglasses-HTx0r7lJvbk" alt="">
                </div>
            </div>
        </div>
    </div>
</div>

以下是根据我想要的结果不同屏幕的截图-

在 240px 屏幕上- on 240px screen

在 320px 屏幕上- on 320px screen

在 768px 屏幕上- on 768px screen

在 1024px 屏幕上- on 1024px screen

在 1440px 屏幕上- on 1440px screen

在 2560px 屏幕上- on 2560px screen

在 9999px 屏幕上- on 999px screen

html css
1个回答
0
投票

在没有媒体屏幕的情况下，您可以获得的最大准确度相对较低，因此我建议使用它。但如果您不想，您可以使用 

max-height
、 
min-height
或使用 
vmax
、 
rem
等。最适合的方式是
height:12vmax
中
.banner

代码片段如下：

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.mantri_main_container{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mantri_main_container .banner{
    border: 2px solid red;
    width: 100%;
    height: 12vmax;
    background: linear-gradient(45deg, #EAEAEA 0%, #8B8B8B 100%);
    position: relative;
}
.mantri_main_container .banner .saffron,
.mantri_main_container .banner .white,
.mantri_main_container .banner .green{
    position: absolute;
    height: 100%;
    width: 100%;
}
.mantri_main_container .banner .saffron::before{
    content: "";
    clip-path: polygon(11% 0%, 0 0, 0 100%);
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #FF671F;
}
.mantri_main_container .banner .saffron::after{
    content: "";
    clip-path: polygon(100% 0, 89% 0, 100% 100%);
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #FF671F;
    transform: rotateX(180deg);
}
.mantri_main_container .banner .white::before{
    content: "";
    clip-path: polygon(13% 0, 17% 0, 6% 100%, 2% 100%);
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #ffffff;
}
.mantri_main_container .banner .white::after {
    content: "";
    clip-path: polygon(98% 0, 94% 0, 83% 100%, 87% 100%);
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #ffffff;
}
.mantri_main_container .banner .green::before {
    content: "";
    clip-path: polygon(19% 0, 21% 0, 10% 100%, 8% 100%);
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #046A38;
}
.mantri_main_container .banner .green::after {
    content: "";
    clip-path: polygon(92% 0, 90% 0, 79% 100%, 81% 100%);
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #046A38;
}
.mantri_main_container .banner .image_main_container {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mantri_main_container .banner .image_main_container .image_container{
    width: 57%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    position: absolute;
}
.mantri_main_container .banner .image_main_container .image_container .image_details{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 65%;
    height: 100%;
}
.mantri_main_container .banner .image_main_container .image_container .image_details h1{
    font-family: 'DM Sans';
    font-size: 60px;
    font-size: clamp(9px, 3vw, 4rem);
    text-align: center;
    text-shadow: 3px 3px 5px #9d9cb5, 3px 3px 5px #7371b1;
    color: #06038D;
}
.mantri_main_container .banner .image_main_container .image_container .image_details h3{
    font-family: 'DM Sans';
    font-size: 28px;
    font-size: clamp(7px, 2vw, 1.5rem);
    text-align: center;
}
.mantri_main_container .banner .image_main_container .image_container .image_details img{
    width: 7vw;
    object-fit: contain;
}
.mantri_main_container .banner .image_main_container .image_container .image{
    width: 26%;
    height: auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: auto;
    height: 36vh;
    position: absolute;
    bottom: 0;
    right: 0;
}
.mantri_main_container .banner .image_main_container .image_container .image img{
    width: 100%;
    height: 85%;
    object-fit: contain;
    height: 100%;
    position: relative;
}
<div class="mantri_main_container">
    <div class="banner">
        <div class="saffron"></div>
        <div class="white"></div>
        <div class="green"></div>
        <div class="image_main_container">
            <div class="image_container">
                <div class="image_details">
                    <h1>Shri Lorem Ipsum Ji</h1>
                    <h3>Lorem ipsum dolor sit amet consectur</h3>
                    <img src="underline.png" alt="">
                </div>
                <div class="image" style="width:241px;">
                    <img src="https://unsplash.com/photos/a-man-wearing-a-green-coat-and-sunglasses-HTx0r7lJvbk" alt="">
                </div>
            </div>
        </div>
    </div>
</div>

希望这有帮助...

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