使網站移動響應無法正確適應元素

Question

這是我第一次嘗試使網站具有移動響應性，而且我真的很火。 這是我的應用程序在我的筆記本電腦上無響應的圖片：

現在，當我嘗試使用媒體查詢調整 css 時，對於 320 像素屏幕（移動），我得到了這樣的結果：

正如您所看到的，我的藍色輸入框移動到我的圖像之外，而不是適合我的黑色容器內。 我需要你的幫助來解決這個問題以及一些關於如何使網站響應的指導（最佳實踐，一種技術，而不是 w3schools plz）。 我的帶盒子的容器代碼：

 .transparent-box{ border:none; position:absolute; top:5%; left:15%; background-color:black; height:550px; width:70%; opacity: 0.7; } .transparent-box p{ color:white; text-align:center; } .transparent-box h1{ color:white; position: relative; text-align:center; font-size:20px; top:30px; } #hangman-container{ position: relative; width:auto; top:40%; left:0%; background-color: transparent; display: flex; flex-direction: row; justify-content: space-evenly; } .dash{ position:relative; margin:0; top:100px; padding:20px; align-items: flex-start; width:10px; height:10px; border:none; border-radius: 5%; background-color: turquoise; color:red; font-size:40px; } .dash:focus{ opacity:0.8; } .island-container{ width:30%; height:200px; position: absolute; top:30%; left:35%; } .island-img{ width:100%; height:100%; opacity:1; } @media screen and (max-width:320px){ .transparent-box{ height: 30%; width:80%; } #island-img{ position: absolute; height: 100px; width:100%; top:40px; left:500px; } .dash{ margin:3px; } #hangman-container{ top:20%; } .dash{ width:10px; height:10px; font-size: 20px; padding:15px; } }

 <div class="transparent-box" id="t-box"> <p>Play here </p> <h1 id="hidden-word">The word is : <span id="random-island"> ΠΑΤΜΟΣ </span> </h1> <div class="island-container" id="island-c"> <img class="island-img" src="http://via.placeholder.com/200x200/A44/EED?text=Island" alt="" /> </div> <form id="hangman-container" method="POST" accept-charset="utf-8"> <input class="dash" maxlength="1" id="2"> <input class="dash" maxlength="1" id="2"> <input class="dash" maxlength="1" id="2"> <input class="dash" maxlength="1" id="2"> <input class="dash" maxlength="1" id="2"> <input class="dash" maxlength="1" id="2"> </form> </div>

最好在整頁上查看我的示例並測試它的移動視圖。 我很感激你的幫助

Answer 1

你會這樣做#transparent-box:relative , #island-container:absolute , #hangman-container:absolute ，所以你要把#island-contaner和#hangman-container與#transparent-container對齊。不要忘記給出#island-container和#hangman-container寬度的 100%

Answer 2

響應式設計的一種方法——盡管不使用媒體查詢——如下：

 /* resetting elements to use border-box sizing, in order that all elements are sized the same way, and that the size of the element includes the borders and paddings; also setting the border to be zero width and transparent to remove it from the elements on the page, along with setting margin and padding to 0: */ *, ::before, ::after { border: 0 none transparent; box-sizing: border-box; margin: 0; padding: 0; } /* here we're using CSS Grid display to more easily align the contents within this element: */ .transparent-box { background-color: #000c; display: grid; /* this places a gap/'gutter' between adjacent grid areas (it also works with CSS Flexbox:) */ gap: 1em; /* here we're defining the named grid areas into which the child elements will be placed; the strings represent named areas, the periods ('.') represent empty areas within the grid; in this case used to create margins at either side: */ grid-template-areas: ". hint ." ". word ." ". island ." ". form ."; /* defining the width of each column of the grid; the 'fr' unit is a fractional unit based on the size of the available space within the grid's dimension. 1fr is one unit, 3fr is equal to three units, of that space: */ grid-template-columns: 1fr 3fr 1fr; /* here we use the repeat() function to define four rows, each row height based on the minimum size required to display the content of that row: */ grid-template-rows: repeat(4, min-content); /* we're centring the element in the page, 5vh from the top of the page (1vh is equal to 1% of the viewport's height), with an auto margin on both left and right sides which centres the element, and a zero margin on the bottom edge: */ margin: 5vh auto 0 auto; /* using padding on the top and bottom edges of the grid to prevent the descendants being placed on the top/bottom border: */ padding: 1em 0; /* using the CSS clamp function to specify a width of 70vw (like vh, 1vw represents 1% of the viewports width); so this is equal to 70% of the viewport's width, but with a maximum upper-width of 1000px and a minimum width of 300px: */ width: clamp(300px, 70vw, 1000px); } .transparent-box p { color: white; /* placing the <p> element in the grid-area named 'hint': */ grid-area: hint; text-align: center; } .transparent-box h1 { color: white; font-size: 20px; /* placing the <p> element in the grid-area named 'word': */ grid-area: word; text-align: center; } .island-container { /* setting the display to 'flex' for the contents of this element: */ display: flex; /* placing the <p> element in the grid-area named 'island': */ grid-area: island; height: 200px; } .island-container img { /* with the parent-element as display: flex, we can use 'margin: auto' to vertically and horizontally centre the <img> element within its parent: */ margin: auto; } #hangman-container { /* display: flex, in order to allow the child elements to be positioned and responsively reflowed as necessary: */ display: flex; /* we set the contents to run horizontally: */ flex-direction: row; /* we allow the contents to wrap to new lines: */ flex-wrap: wrap; /* setting a margin/gutter between adjacent elements: */ gap: 0.5em; /* placing the <p> element in the grid-area named 'form': */ grid-area: form; /* spacing the elements with equal space between adjacent elements and the starting/ending boundaries of the element: */ justify-content: space-evenly; } /* I've added a little extra here for UI purposes: */ .dash, .dash:placeholder-shown { background-color: turquoise; border-radius: 5%; /* here I've defined two box-shadows, both of which are currently unseen as they're entirely transparent (using the hexadecimal notation for: #rrggbbaa (#rgba), where 'rr'/'r' is red, 'gg'/'g' is green', 'bb'/'b' is blue and 'aa'/'a' is alpha: */ box-shadow: 0 0 0 4px #0000, 0 0 0 6px #0000; color: red; font-size: 2em; height: 40px; padding: 0; text-align: center; width: 40px; /* declaring a transition on the 'box-shadow' property, lasting '0.3 seconds' with a 'linear' transition: */ transition: box-shadow 0.3s linear; } /* here we style the :active and :focus styles of the element, in order that a user navigating the page without a mouse can see which <input> they're interacting with: */ .dash:active, .dash:focus { box-shadow: 0 0 0 4px #000c, 0 0 0 6px turquoise; opacity: 0.8; } /* here we style the <input> elements which are not showing their placeholder value, in order that users can differentiate between focused/active <input> elements and elements into which a value has already been entered: */ .dash:not(:placeholder-shown) { box-shadow: 0 0 0 4px #000c, 0 0 0 6px limegreen; } /* styling the colour of the placeholder text: */ .dash::placeholder { color: #666; }

 <div class="transparent-box" id="t-box"> <p>Play here </p> <h1 id="hidden-word">The word is : <span id="random-island"> ΠΑΤΜΟΣ </span> </h1> <div class="island-container" id="island-c"> <img class="island-img" src="https://via.placeholder.com/200x200/A44/EED?text=Island" alt="" /> </div> <form id="hangman-container" method="POST" accept-charset="utf-8"> <!-- I've added placeholders to the <input> elements in order that users might more easily see that interaction is expected: --> <input class="dash" maxlength="1" placeholder="?" /> <input class="dash" maxlength="1" placeholder="?" /> <input class="dash" maxlength="1" placeholder="?" /> <input class="dash" maxlength="1" placeholder="?" /> <input class="dash" maxlength="1" placeholder="?" /> <input class="dash" maxlength="1" placeholder="?" /> </form> </div>

參考：

• CSS：
  • align-content 。
  • “ 網格布局的基本概念。”
  • clamp() 。
  • “ Flexbox 的基本概念。”
  • CSS <length> 。
  • flex-direction 。
  • flex-wrap 。
  • gap 。
  • grid-area
  • grid-template-areas 。
  • grid-template-columns 。
  • grid-template-rows 。
  • justify-content 。
  • ::placeholder 。
  • :placeholder-shown 。