CSS媒体查询内容更改其位置

Question

因此，我有一个小小的反应做应用，在手机或平板电脑或任何设备，我希望它看起来一样，我真的不知道中介真的很好，如果这是唯一的情况来修复它？或者还有其他方法吗？另外，我也很高兴看到媒体查询解决方案，因为我不知道该如何做。

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，开始使用百分比而不是宽度:500 px您可以更改为宽度：“20%”或任何对您来说好看的东西。