對此有什么解決方案，我需要將樣式標簽中的 css 轉換為 style=""，下面的代碼在我打開時有效，但是當我發布時它不起作用。我正在 webflow 中制作網站，所以我需要將該代碼放入 HTML Embed 中，這就是為什么我需要將所有這些放入 html 中。如果有人幫助我，我將不勝感激。
代碼：
<style type="text/css">
@media only screen and (max-width: 1000px) and (min-width: 600px) {
.linkTextingInner, #linkTexting_form {
width: 453px;
}
.linkTextingInput, #numberToText_linkTexting {
width: 309px;
padding: 0 70px;
}
.linkTextingButton, #sendButton_linkTexting {
width: 124px;
font-size: 13px;
}
}
@media only screen and (max-width: 600px) and (min-width: 400px) {
.linkTextingInner, #linkTexting_form {
width: 360px;
height: 55px;
}
.linkTextingInput, #numberToText_linkTexting {
width: 230px;
padding: 0 60px;
height: 41px;
font-size: 18px;
}
.linkTextingButton, #sendButton_linkTexting {
width: 110px;
font-size: 11px;
height: 41px;
}
}
@media only screen and (max-width: 400px) {
.linkTextingInner, #linkTexting_form {
width: 320px;
height: 55px;
}
.linkTextingInput, #numberToText_linkTexting {
width: 190px;
padding: 0 40px;
height: 41px;
font-size: 14px;
}
.linkTextingButton, #sendButton_linkTexting {
width: 110px;
font-size: 10px;
height: 41px;
}
}
@media only screen and (max-width: 350px) {
.linkTextingInner, #linkTexting_form {
width: 280px;
height: 55px;
}
.linkTextingInput, #numberToText_linkTexting {
width: 160px;
padding: 0 20px;
height: 41px;
font-size: 14px;
}
.linkTextingButton, #sendButton_linkTexting {
width: 100px;
font-size: 10px;
height: 41px;
}
}
</style>
</head>
<body>
<div class="badgeContainer badge-2">
<div class="linkTextingWidgetWrapper">
<div class="linkTextingWidget">
<div class="promptContent"></div>
<div class="linkTextingInner" id="linkTexting_form" style="display: flex;
flex-flow: row wrap;
align-items: center;
background-color: white;
width: 533px;
height: 65px;
border-radius: 50px;">
<input type="hidden" class="linkID" value="8853c16d-94ac-47d1-8e3a-
c58d4e688901">
<div class="linkTextingInputWrapper">
<input class="linkTextingInput linkTextingInputFlagAdjust" type="tel"
id="numberToText_linkTexting"
style="vertical-align: middle;
padding: 0 100px;
background-color: #fff;
border: 0;
width: 369px;
height: 51px;
margin-left: 10px;
border-radius: 50px;
font-size: 25px;
font-family: ProximaNova;">
</div>
<button class="linkTextingButton localized-button localized-text
text_me_a_link"
type="button"
id="sendButton_linkTexting" style="padding: 10px 20px;
background-color: #355dee;
color: white;
border-radius: 50px;
width: 144px;
cursor: pointer;
height: 51px;
border: 0;
font-size: 16px;
font-family: ProximaNova;">Text me a Link</button>
<div class="linkTextingError" id="linkTextingError" style="display:none;">
</div>
</div>
</div>
</div>
</div>
uj5u.com熱心網友回復：
洗掉style標簽中的型別并使用它代替
<style scoped>
@media only screen and (max-width: 1000px) and (min-width: 600px) {
.linkTextingInner, #linkTexting_form {
width: 453px;
}
</style>
uj5u.com熱心網友回復：
你不能，但我有2個選項供你
ClassJss
Jss:JSS 是一個 CSS 創作工具，它允許您使用 JavaScript 以宣告式、無沖突和可重用的方式描述樣式。它可以在瀏覽器、服務器端或構建時在 Node.js 中編譯。
閱讀檔案
Norice：由于樣式不一致，您的代碼可能無法運行。我的意思是你定義的樣式Media Query load before the main styles
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/360252.html