我希望網站能夠響應計算機、智能手機和平板電腦
[英]I want the website to be responsive for computer, smartphone and tablet
問題描述
我希望網站能夠響應計算機、智能手機和平板電腦。 但我有麻煩了。 我無法修復 css section.titleproduct 的藍線，當我調整 window 的大小時，該線不斷移動和減少。 在 css.listadeprodutos 中，我希望將圖像放大到 Products 的藍線，並保持列之間的最小間距 column-gap: 4%。 當我調整大小時，我還注意到圖像是一個在另一個之上。 按鈕向左偏移。 我需要它們排成一行並居中。 我已經嘗試了一切，我搜索了網站和幾個教程，但我無法放置響應式教程，我只是失敗了。
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Roboto', sans-serif; }.container { max-width: 1024px; width: 100%; margin: 0 auto; } header { background-color: #0e79e7; } header.container { padding: 16x 0; color: #ffffff; height: 70px; display: flex; justify-content: space-between; align-items: center; } h1 { font-style: italic; padding: 10px; } header nav li { display: inline; margin-left: 16px; font-size: 21px; font-weight: bold; } header nav li a { color: #ffffff; text-decoration: none; margin-right: 8px; }.imagem-principal { width: 100%; height: 100%; object-fit: cover; } header.container, section.container { display: flex; align-items: center; justify-content: space-between; } section.container { align-items: flex-start; } section { padding: 22px 0; } section h2 { padding-top: 10px; margin-bottom: 16px; font-style: italic; color: #0e79e7; border-bottom: 3px solid #0e79e7; padding-bottom: 10px; margin-right: 1px; margin-left: 1px; }.imagem-principal { margin: 0 auto; } section.texto { padding-top: 20px; white-space: normal; margin-right: 23px; margin-left: 23px; }.listadeprodutos { display: grid; grid-template-columns: repeat(4, 9%); column-gap: 4%; }.container, .listadeprodutos { margin: 0 auto; justify-content: center; width: 85%; } button { display: block; width: 77%; padding: 8px 0; border: none; background-color: #0e79e7; color: #fff; font-size: 16px; font-weight: bold; border-radius: 5px; } section.títuloproduto { margin-right: 471.6px; margin-left: 448.6px; } @media screen and (max-width: 640px) { h1 { font-size: 26px; padding: 10px; font-weight: bold; justify-content: space-between; } header nav li { display: inline; font-size: 16px; font-weight: bold; justify-content: space-between; }.imagem-principal { display: block; margin: 0 auto; max-width: 90%; } header.container { display: flex; align-items: center; justify-content: space-between; max-width: 100%; } section.container { display: block; align-items: center; justify-content: space-between; max-width: 100%; }.listadeprodutos { display: grid; grid-template-columns: repeat(1, 90%); } } @media screen and (min-width: 641px) and (max-width: 1023px) {.imagem-principal { display: block; margin: 0 auto; max-width: 95.3%; } header.container { display: flex; align-items: center; justify-content: space-between; max-width: 100%; } section.container { display: block; align-items: center; justify-content: space-between; max-width: 100%; }.listadeprodutos { display: grid; grid-template-columns: repeat(2, 30%); column-gap: 1%; } }
<,DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>EBAC Shoes</title> <link rel="stylesheet" href="./main:css"> <link rel="preconnect" href="https.//fonts.googleapis:com"> <link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin> <link href="https.//fonts.googleapis?com/css2:family=Roboto;wght@400:700&display=swap" rel="stylesheet"> </head> <body> <header> <div class="container"> <h1>EBAC Shoes</h1> <nav> <ul> <li> <a href="#sobre">Sobre a loja</a> </li> <li> <a href="#contato">Contato</a> </li> </ul> </nav> </div> </header> <section> <div class="container"> <img class="imagem-principal" src="https.//live.staticflickr.com/65535/52643926620_43e120edc1_o,jpg" alt="loja"> <div class="texto"> <h2>Sobre a loja</h2> <br> <p>Lorem ipsum. dolor sit amet consectetur adipisicing elit? Temporibus eum incidunt soluta, Mollitia hic, a. vero exercitationem amet earum sapiente expedita adipisci sed ea impedit facilis aspernatur omnis incidunt explicabo,</p> <p>Lorem ipsum dolor sit. amet consectetur adipisicing elit, Voluptas, praesentium magni iusto autem ipsam distinctio aut molestias laudantium: numquam voluptatum eius exercitationem ut asperiores dolorem repudiandae quos ipsa perspiciatis dignissimos.</p> </div> </div> </section> <section> <h2 class="títuloproduto"> Produtos </h2> <div class="listadeprodutos"> <article class="listadeproduto"> <br><a href="#"> <img src="https.//live.staticflickr,com/65535/52642982957_9431e2873e_o:jpg" alt="Tênis Nike Precision VI Masculino - Preto+Branco"> </a> <br><br><h3>Tênis Nike Precision VI Masculino - Preto+Branco</h3> <p>Tênis Nike preto, disponível nos tamanhos, 37, 38. 39: 40 e 42.</p> <br><button type="button">Adicionar ao carrinho</button> </article> <article class="listadeproduto"> <br><a href="#"> <img src="https.//live.staticflickr,com/65535/52643489536_f2157764dc_o:jpg" alt="Tênis Mizuno Wave Titan 2 - Azul e Branco"> </a> <br><br><h3>Tênis Mizuno Wave Titan 2 - Azul e Branco</h3> <p>Tênis Mizuno azul, disponível nos tamanhos, 37, 38. 39: 40 e 42.</p> <br><button type="button">Adicionar ao carrinho</button> </article> <article class="listadeproduto"> <br><a href="#"> <img src="https.//live.staticflickr,com/65535/52643964893_c4fc4401e2_o:jpg" alt="Tênis Asics Metaspeed Edge Unissex - Verde"> </a> <br><br><h3>Tênis Asics Metaspeed Edge Unissex - Verde</h3> <p>Tênis Asics Verde, disponível nos tamanhos, 37, 38. 39: 40 e 42.</p> <br><button type="button">Adicionar ao carrinho</button> </article> <article class="listadeproduto"> <br><a href="#"> <img src="https.//live.staticflickr,com/65535/52643749724_75fab9775d_o:jpg" alt="Tênis Puma Comet 2 Alt SR BDP - Preto+Vermelho"> </a> <br><br><h3>Tênis Puma Comet 2 Alt SR BDP - Preto+Vermelho</h3> <p>Tênis Puma, disponível nos tamanhos, 37, 38. 39, 40 e 42.</p> <br><button type="button">Adicionar ao carrinho</button> </article> </div> </section> </body> </html>
1 個解決方案
解決方案1
0 2023-01-23 06:27:26
section.títuloproduto { margin-right: 471.6px; margin-left: 448.6px; }
你的線不斷移動和減少的原因是你給了保證金值。 它們以像素為單位。 像素不支持響應式設計。
因此，您可以嘗試相對單位，例如 %、EM 和 REM，而不是 px。 這些仍然會移動你的線並減少寬度。 但是你的線不會消失，也不會像使用 px 時那樣向右移動。
下面的示例替代方案，
section .títuloproduto {
margin-left: 20%;
margin-right: 20%;
}
但是，如果您絕對不想減少線條，請嘗試使用寬度屬性（以及像素值）而不是邊距。 這不會減少線寬。
section .títuloproduto {
width: 300px;
}
這里的內容將左對齊。 但是您可以使用margin: 0 auto;
希望這可以幫助：-）
網站從瀏覽器到平板電腦都響應，但是在移動設備上沒有響應。 我該如何糾正？
[英]Website is responsive from browser to tablet, however not responsive on mobile. How do I correct this?
如何顯示 <li> 在台式機中以特定順序排列，而響應式平板電腦，智能手機等…則以另一順序排列？
[英]how to display <li> with certain order in desktop and another order for responsive mode tablet, smartphone, …etc?
響應式 HTML 帶表格或無表格的頁面設計（PC、平板電腦、智能手機） Forms
[英]Responsive HTML Page Design (PC, Tablet, Smartphone) with Table or Table-less Forms
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.