我的網站有問題。當我打開https://www.b3lieve.com.mx/precios.html時，卡片價格部分作業正常（如果它在計算機中）。但是，如果我將同一部分可視化，但在移動設備中或使用回應式設計工具，則它不起作用或沒有設計。我應該怎么辦？ 從回應式設計工具 可視化 從計算機可視化
我從 localhost 嘗試過它，它可以在計算機或回應式設計中正常作業。可能是我的托管服務有問題？
這是代碼...
`
<div class="packs" style="padding-top:80px;">
<h2 style="text-align:center;">Booth 360°</h2>
<div class="pricing-table" id="360">
<div class="pricing-card">
<h3 class="pricing-card-header">Básico</h3>
<div class="price"><sup>$</sup>5,300 MXN</div>
<ul>
<li><strong>1</strong> Booth 360°.</li>
<li><strong>2</strong> horas de servicio.</li>
<li><strong>2</strong> personas de Staff.</li>
<li>Videos y fotos<strong> ilimitados</strong> durante todo el servicio.</li>
<li><strong>2</strong> templates diferentes y props.</li>
<li>Transportación dentro de la <strong>Ciudad de México</strong>.</li>
</ul>
<a href="/contact.html" class="order-btn">Seleccionar</a>
</div>
</div>
<div class="pricing-table">
<div class="pricing-card">
<h3 class="pricing-card-header">Clásico</h3>
<div class="price"><sup>$</sup>6,800 MXN</div>
<ul>
<li><strong>1</strong> Booth 360°.</li>
<li><strong>3</strong> horas de servicio.</li>
<li><strong>2</strong> personas de Staff.</li>
<li>Videos y fotos<strong> ilimitados</strong> durante todo el servicio.</li>
<li><strong>4</strong> templates diferentes y props.</li>
<li>Transportación dentro de la <strong>Ciudad de México</strong>.</li>
</ul>
<a href="/contact.html" class="order-btn">Seleccionar</a>
</div>
</div>
<div class="pricing-table">
<div class="pricing-card">
<h3 class="pricing-card-header">Prémium</h3>
<div class="price"><sup>$</sup>8,300 MXN</div>
<ul>
<li><strong>1</strong> Booth 360°.</li>
<li><strong>5</strong> horas de servicio.</li>
<li><strong>2</strong> personas de Staff.</li>
<li>Videos y fotos<strong> ilimitados</strong> durante todo el servicio.</li>
<li><strong>6</strong> templates diferentes y props.</li>
<li>Transportación dentro de la <strong>Ciudad de México</strong>.</li>
</ul>
<a href="/contact.html" class="order-btn">Seleccionar</a>
</div>
</div>
<div class="pricing-table">
<div class="pricing-card">
<h3 class="pricing-card-header">Personalizado</h3>
<div class="price">Contáctanos</div>
<ul>
<li><strong>1</strong> Booth 360°.</li>
<li><strong>?</strong> horas de servicio.</li>
<li><strong>2</strong> personas de Staff.</li>
<li>Videos y fotos<strong> ilimitados</strong> durante todo el servicio.</li>
<li><strong>?</strong> templates diferentes y props.</li>
<li>Transportación dentro de la <strong>Ciudad de México</strong>.</li>
</ul>
<a href="/contact.html" class="order-btn">Seleccionar</a>
</div>
</div> <!-- CABINA 360 -->
<br>
<br>
<br>
<h2 style="text-align:center;">Magic Mirror Booth</h2>
<div class="pricing-table">
<div class="pricing-card" id="mirror">
<h3 class="pricing-card-header">Básico</h3>
<div class="price"><sup>$</sup>5,900 MXN</div>
<ul>
<li><strong>1</strong> Booth Magic Mirror.</li>
<li><strong>2</strong> horas de servicio.</li>
<li><strong>2</strong> personas de Staff.</li>
<li>Fotos<strong> ilimitadas</strong> durante todo el servicio.</li>
<li><strong>2</strong> templates diferentes y props.</li>
<li>Transportación dentro de la <strong>Ciudad de México</strong>.</li>
</ul>
<a href="/contact.html" class="order-btn">Seleccionar</a>
</div>
</div>
<div class="pricing-table">
<div class="pricing-card">
<h3 class="pricing-card-header">Clásico</h3>
<div class="price"><sup>$</sup>7,400 MXN</div>
<ul>
<li><strong>1</strong> Booth Magic Mirror.</li>
<li><strong>3</strong> horas de servicio.</li>
<li><strong>2</strong> personas de Staff.</li>
<li>Fotos<strong> ilimitadas</strong> durante todo el servicio.</li>
<li><strong>4</strong> templates diferentes y props.</li>
<li>Transportación dentro de la <strong>Ciudad de México</strong>.</li>
</ul>
<a href="/contact.html" class="order-btn">Seleccionar</a>
</div>
</div>
<div class="pricing-table">
<div class="pricing-card">
<h3 class="pricing-card-header">Prémium</h3>
<div class="price"><sup>$</sup>9,900 MXN</div>
<ul>
<li><strong>1</strong> Booth Magic Mirror.</li>
<li><strong>5</strong> horas de servicio.</li>
<li><strong>2</strong> personas de Staff.</li>
<li>Fotos<strong> ilimitadas</strong> durante todo el servicio.</li>
<li><strong>6</strong> templates diferentes y props.</li>
<li>Transportación dentro de la <strong>Ciudad de México</strong>.</li>
</ul>
<a href="/contact.html" class="order-btn">Seleccionar</a>
</div>
</div>
<div class="pricing-table">
<div class="pricing-card">
<h3 class="pricing-card-header">Personalizado</h3>
<div class="price">Contáctanos</div>
<ul>
<li><strong>1</strong> Booth Magic Mirror.</li>
<li><strong>?</strong> horas de servicio.</li>
<li><strong>2</strong> personas de Staff.</li>
<li>Fotos<strong> ilimitados</strong> durante todo el servicio.</li>
<li><strong>?</strong> templates diferentes y props.</li>
<li>Transportación dentro de la <strong>Ciudad de México</strong>.</li>
</ul>
<a href="/contact.html" class="order-btn">Seleccionar</a>
</div>
</div>
</div>
`
`
.pricing-table{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width: min(1600px, 100%);
}
.pricing-card{
flex: 1;
max-width: 360px;
background-color: #17173d;
margin: 20px 10px;
text-align: center;
cursor: pointer;
overflow: hidden;
color: #f9f9f9;
transition: .3s linear;
border-radius: 20px;
}
.pricing-card-header{
background-color: var(--majorelle-blue);
display: inline-block;
color: #fff;
padding: 12px 30px;
border-radius: 0 0 20px 20px;
font-size: 16px;
text-transform: uppercase;
font-weight: 600;
transition: .4s linear;
}
.pricing-card:hover .pricing-card-header{
box-shadow: 0 0 0 26em var(--majorelle-blue);
}
.price{
font-size: 35px;
color: var(--majorelle-blue);
margin: 40px 0;
transition: .2s linear;
}
.price sup{
font-size: 22px;
font-weight: 700;
}
.pricing-card:hover ,.pricing-card:hover .price{
color: #fff;
}
.pricing-card li{
font-size: 16px;
padding: 10px 0;
text-transform: uppercase;
}
.order-btn{
display: inline-block;
margin-bottom: 40px;
margin-top: 80px;
border: 2px solid var(--majorelle-blue);
color: var(--majorelle-blue);
padding: 18px 40px;
border-radius: 8px;
text-transform: uppercase;
font-weight: 500;
transition: .3s linear;
}
.order-btn:hover{
background-color: var(--majorelle-blue);
color: #fff;
}
@media screen and (max-width:1100px) {
.pricing-card{
flex: 50%;
}
}
`
uj5u.com熱心網友回復：
您只是沒有關閉第一個和第二個@media 查詢。而已。
@media (min-width: 450px) {
/**
* HERO
*/
.hero-form { position: relative; }
.email-field {
margin-bottom: 0;
padding-right: 155px;
}
.hero .btn-primary {
position: absolute;
top: 5px;
right: 5px;
padding-block: 12.5px;
}
.hero-ctc .btn-primary {
position: absolute;
top: 5px;
right: 5px;
padding-block: 12.5px;
}
} /* this wasn't closed */
@media (min-width: 450px) {
/**
* HERO
*/
.hero-form { position: relative; }
.email-field {
margin-bottom: 0;
padding-right: 155px;
}
.hero .btn-primary {
position: absolute;
top: 5px;
right: 5px;
padding-block: 12.5px;
}
.hero-ctc .btn-primary {
position: absolute;
top: 5px;
right: 5px;
padding-block: 12.5px;
}
} /* this wasn't closed */
uj5u.com熱心網友回復：
看看你的CSS。你有...
@media (min-width: 450px) {
/**
* HERO
*/
.hero-form { position: relative; }
.email-field {
margin-bottom: 0;
padding-right: 155px;
}
.hero-ctc .btn-primary {
position: absolute;
top: 5px;
right: 5px;
padding-block: 12.5px;
}
/**
* ABOUT
*/
.about-card .card-text {
max-width: 300px;
margin-inline: auto;
}
}
...作為將樣式應用于移動設備的最小最小寬度。（順便說一下，出于某種原因，對于最小寬度為 450 像素的情況，您有完全相同的 @media 定義 3 次……也許復制和粘貼不正確？）
然后，如果您查看回應式視口中的尺寸，如提供的螢屏截圖所示，您可以看到寬度為 414。如果您將該視口螢屏向右拖動或將寬度設定為 450 或更大，樣式將節目。
如果你覺得有必要，你可以在你的 css 中定義更小的最小寬度尺寸案例，注意你的定義從最小的開始，直到最大的。
uj5u.com熱心網友回復：
您從第 791 行到第 871 行復制并粘貼了幾個 CSS 媒體查詢。
大多數 css 類和屬性都是相同的。
但我認為問題出在你的 style.css 第 819 行，你打開了一個 @media (min-width: 450px) 但你沒有在第 844 行關閉。
你忘了在這里關閉大括號
那應該像魅力一樣作業
帶有大括號修改的移動視圖
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/534733.html
標籤：网页格式CSS响应式设计
上一篇：如何默認聚焦一個按鈕？
下一篇：使div精確高度為文本