CSS 媒体查询内容改变了它的位置

Question

所以我有一些反应待办应用程序，在 phone 或平板电脑或任何我希望它看起来相同的设备上我真的不知道媒体查询真的很好，如果它是修复它的唯一案例？或者还有其他方法吗？我也很高兴看到媒体查询解决方案，因为我不知道该怎么做

import './App.css'
import {useState,useEffect} from 'react'


function App () {
const[searchBar,setSearchBar] = useState('')
const [todos,setTodos] = useState([])
const [newTodo,  setNewTodo] = useState('')


const handleChange = (e) =>{
  setNewTodo(e.target.value)
}

const handleSubmit = (e) =>{
    e.preventDefault()

    const adding = {
      task: newTodo,
      id:Math.floor(Math.random() * 100000),
      

    }
    if(newTodo.length){
    setTodos(todos.concat(adding))
    setNewTodo('')
    } 
}

const handleClick = (id) =>{
setTodos(todos.filter((event) =>{
  return id !== event.id
}))
console.log(id)
}


const searchTodos = (e) =>{
setSearchBar(e.target.value)
}


  return (
<div className='center'>
  <div className='header'>

<div className='searchbar'>

<h2>Search ToDos</h2>
<input type="text" value={searchBar} onChange={searchTodos} name='search' />
</div>
</div>
<div className='container-of-todos'>
  <h1 className='head'>ToDos :</h1>
 <ul>
   {todos
   .filter((val)=>{
if(searchBar===''){
  return  val
} else if(val.task.toLowerCase().includes(searchBar.toLocaleLowerCase())) {
  return val

}
   }).map((todo =>{
     return(
       <li key={todo.id}>{todo.task}
      <button className='button-9' onClick={() =>handleClick(todo.id)}>delete</button>
       </li>
       
     )
   }))}
 </ul>

</div>
<form onSubmit={handleSubmit}  className='add'> 
<h2>Add ToDos</h2>
  <input  value={newTodo} onChange={handleChange} />
</form>
</div>
  )
}



export default App

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap');


body{
  box-sizing: border-box;
  font-family: 'Roboto Condensed', sans-serif;
  background-color: #212D40;
  color: white;
}
.header{
  text-align: center;
}
.container-of-todos{
  background-color: #eee;
  width:500px;
  margin: 20px auto;
  border-radius: 6px;


}
ul{
   
  display: flex;
  justify-content: center;
  color: black;
  flex-direction: column;
  padding-left: 0pt;
  gap:5px;
 
 
}
li{
  width: 99%;
  list-style-type: none;
  border:2px solid #7a8391;
  background-color: #72a2f0;
  color: white;
  border-radius: 5px;
  display:flex;
  flex-direction: column;
  font-weight: 550;
  margin-bottom: 5px;
   
}

.delete{
justify-self: center;
align-self: flex-end;
font-weight: 700;
}

.add{
  text-align: center;
}
.center{
  max-width: 960px;
  margin: auto;
}
.searchbar input{

margin-left: 10px;
}

input{
  width: 500px;
  height: 24px;
  border-radius: 6px;
}



.button-9 {
  appearance: button;
  backface-visibility: hidden;
  background-color: #405cf5;
  border-radius: 6px;
  border-width: 0;
  box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
  outline: none;
  overflow: hidden;
  justify-self: flex-end;
  align-self: flex-end;
  text-align: center;
  text-transform: none;
  transform: translateZ(0);
  transition: all .2s,box-shadow .08s ease-in;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 50px;

}

.button-9:disabled {
  cursor: default;
}

.button-9:focus {
  box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset, rgba(50, 50, 93, .2) 0 6px 15px 0, rgba(0, 0, 0, .1) 0 2px 2px 0, rgba(50, 151, 211, .3) 0 0 0 4px;
}

.head{
  color: rgb(69, 127, 141);
  text-align:center;
}
```*emphasized text*

Answer 1

@media 用于在特定条件为真时添加 css 块。您可以在 CSS 中添加类似

的内容

.example {
  color: blue;
}

/* screen 600px and down */
@media only screen and (max-width: 600px) {
  .example {color: red;}
}

/* screen 600px and up */
@media only screen and (min-width: 600px) {
  .example {color: green;}
}

/* screen 800px and up */
@media only screen and (min-width: 800px) {
  .example {color: black;}
} 

/* screen 1100px and up */
@media only screen and (min-width: 1100px) {
  .example {color: purple;}
} 

/* screen 1200px and up */
@media only screen and (min-width: 1200px) {
  .example {color: aqua;}
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>


  <h1 class="example">Resize the browser window to see how the background color of this paragraph changes on different screen sizes.</h1>

</body>

</html>

并根据屏幕大小更改文本颜色（请注意，您必须从最小到最大）。

至于每台设备的比例，我建议您保留 px 并开始使用百分比而不是 width: 500px 您可以更改为 width: '20%' 或您认为合适的任何内容

CSS 媒体查询内容改变了它的位置

CSS media query content changing its position

html

javascript

css

media-queries

reactjs