所以我一直在格式化這個表格，現在在桌面上看起來沒問題。但是我需要它在移動設備上進行更改。它是并排的兩個元素，一個影像和一種形式。我需要他們在移動時更改為頂部和底部。可能是@media 查詢 CSS？
我試過使用百分比作為寬度，但影像大小沒有改變，表單組件要么與其重疊，要么被切斷......
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&id=27f9c81072&v_id=4140&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;
}
uj5u.com熱心網友回復：
@Media 是這樣作業的：
@media (max-width: 768px) {
h2{
background-color: #ffc860;
}
}
768px 通常被認為是垂直（智能手機）視圖和水平（平板電腦、桌面）視圖之間的分界點。
我建議每節課都做兩次，一次用于 768 像素以下的螢屏寬度，一次用于以上螢屏寬度。
uj5u.com熱心網友回復：
我取得了一些進展：
@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;
}
}
uj5u.com熱心網友回復：
您可以使用網格系統進行回應：https ://getbootstrap.com/docs/5.0/layout/grid/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/534721.html
標籤：网页格式CSS响应式设计
上一篇：如何在html表格中將標題背景顏色分成三種不同的顏色
下一篇：禁用選擇時的樣式圖示和按鈕