css 如何根据视口宽度更改此布局？

htzpubme 于 2022-11-19 发布在其他

关注(0)|答案(3)|浏览(184)

所以我已经格式化了这个表单，现在它在桌面上看起来还可以。但是我需要它在移动的上改变。它是两个元素，一个图像和一个表单，并排。我需要它们在移动设备上改变为顶部和底部。可能是一个@媒体查询CSS？
我尝试过使用百分比来表示宽度，但图像大小没有变化，表单组件要么最终与图像重叠，要么被截断... x1c 0d1xx 1c 1d 1x
HTML代码：

<head>
    <link rel="stylesheet" href="/assets/signup.css">
</head>

<!-- Begin Mailchimp Signup Form -->
<div id="mc_embed_signup">
    <div id="image"><img src="images/genesis.gif"></div>
    <form action="https://opipets.us17.list-manage.com/subscribe/post?u=3fa8d83aedc08e2a8814c787c&amp;id=27f9c81072&amp;v_id=4140&amp;f_id=00bb56e0f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div id="mc_embed_signup_scroll">
        <h2>Join our Whitelist</h2>
        
<div class="mc-field-group">
    <label for="mce-EMAIL">Email
</label>
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required>
    <span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
</div>
<div id="mergeRow-gdpr" class="mergeRow gdpr-mergeRow content__gdprBlock mc-field-group">
    <div class="content__gdpr">
        <span>
        <fieldset class="mc_fieldset gdprRequired mc-field-group" name="interestgroup_field">
        <label class="checkbox subfield" for="gdpr_90860"><input type="checkbox" id="gdpr_90860" name="gdpr[90860]" value="Y" class="av-checkbox gdpr"></label>
        </fieldset>
        <p><b>I agree to receive communications from Opis Group Ltd</b></p>
        </span>
        <br>
        <p>Your privacy is our policy. Occasionally, we'll contact you about our products and services, and other content that may be of interest. You can unsubscribe at any time.</p>
        <p>We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. </p>
        <br>
        <p><a href="https://mailchimp.com/legal/terms" target="_blank">Learn more about Mailchimp's privacy practices here.</a></p>
    </div>
    
</div>
<div hidden="true"><input type="hidden" name="tags" value="6456416,6456520"></div>
    <div id="mce-responses" class="clear">
        <div class="response" id="mce-error-response" style="display:none"></div>
        <div class="response" id="mce-success-response" style="display:none"></div>
    </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_3fa8d83aedc08e2a8814c787c_27f9c81072" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->

CSS代码：

@font-face {
    font-family: museo-sans;
    src: url(/fonts/museosans_300.otf) format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 300;
    font-stretch: normal
}

@font-face {
    font-family: museo-sans-bold;
    src: url(/fonts/museosans_700.otf) format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 700;
    font-stretch: normal
}

@font-face {
    font-family: bwstretch;
    src: url(/fonts/BWSTRETCH-BLACK.OTF) format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 800;
    font-stretch: normal
}

a {
    font-family: museo-sans-bold;
    color: #ffc860;
}

h2 {
    font-family: bwstretch;
    text-align: center;
    text-transform: uppercase;
    font-size: 3vh !important;
}

body {
  font-size: 1.5vh;
  background-color: #191f43;
  font-family: museo-sans;
  color: #191f43;
}

#mc_embed_signup {
    width: 90% overflow: auto;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    color: #191f43;
}

div.mc-field-group {
    width: 90% overflow: auto;
}

div.mc-field-group label {
    font-size: 2vh;
    font-family: museo-sans-bold;
    width: auto;
}

div.mc-field-group input {
    font-size: 1.5vh;
    font-family: museo-sans-bold;
    width: 90%;
    color: #191f43;
    border: 0;
    height: 30px;
    border-radius: 5px;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    margin-left: 10px;
}

#image {
    max-width:30% overflow: auto;
    background-color: #191f43;
}

#content__gdpr {
    display: flex;
    justify-content: center;
    align-items: center;
}

#mc_embed_signup {
    width: 90%;
    background-color: #191f43;
    color: #ffc860;
    font-family: museo-sans;
}

#mc-embedded-subscribe-form input[type=checkbox]{
    display: flex;
    width: auto;
    margin-right: 0px;
    margin-left: -15px;
    margin-top: -2px;
}

#mergeRow-gdpr {
    margin-top: 20px;
    font-size: 1.5vh;
}

#mergeRow-gdpr fieldset label {
    font-weight: normal;
}

#mc-embedded-subscribe-form .mc_fieldset {
    border:none;
    min-height: 0px;
    padding-bottom:0px;
}

input.button {
    color: #191f43;
    background-color: #ffc860;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 45px;
    padding-right: 45px;
    font-family: bwstretch;
    text-transform: uppercase;
    font-size: 1.5em;
    border: 0;
    border-radius: 40px;
}

span {
    display: flex;
    align-items: center;
}

css

来源：https://stackoverflow.com/questions/74458073/how-do-i-make-this-layout-change-based-on-viewport-width

3条答案

按热度按时间

qyyhg6bp1#

@媒体的工作原理是这样的：

@media (max-width: 768px) {
  h2{
    background-color: #ffc860;
  }
}

768 px通常被视为垂直（智能手机）视图和水平（平板电脑、台式机）视图之间的分界点。
我会建议做每类两次一个为波纹管768 px屏幕宽度和一个以上。

赞(0）回复(0）举报 2022-11-19

8cdiaqws2#

我已经有了一些进展：

@media (max-width: 600px) {
    #image {
        height: 40%;
        width:80%;
        background-color: #191f43;
        align-items: center;
        left: 50%;
        margin-right: -50%;
    }
    #mc_embed_signup {
        height: 100%;
        width: 80%;
        background-color: #191f43;
        color: #ffc860;
        font-family: museo-sans;
        display: block;
        
    }
}