使网站移动响应无法正确适应元素
make website mobile responsive unable to fit element correctly
这是我第一次尝试使网站具有移动响应能力，我真的快要着火了。这是我的应用程序在笔记本电脑上无响应的图片：
现在，当我尝试使用媒体查询调整 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>
最好在整个页面上查看我的示例并测试它的移动视图。非常感谢您的帮助
你会做到 #transparent-box:relative、#island-container:absolute、#hangman-container:absolute，所以你要使 #island-contaner 和 #hangman-container 与 #transparent-container 对齐.不要忘记给出 #island-container 和 #hangman-container[=16= 的 100% 宽度]
响应式设计的一种方法——尽管不使用媒体查询——如下：
/* 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 时，对于 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>
最好在整个页面上查看我的示例并测试它的移动视图。非常感谢您的帮助
你会做到 #transparent-box:relative、#island-container:absolute、#hangman-container:absolute，所以你要使 #island-contaner 和 #hangman-container 与 #transparent-container 对齐.不要忘记给出 #island-container 和 #hangman-container[=16= 的 100% 宽度]
响应式设计的一种方法——尽管不使用媒体查询——如下：
/* 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>
参考文献：