我的React网页在交换设备上没有响应

Question

如何使我的主页响应？我尝试使用meta但不起作用，这是我的家。

import React from "react";
import "../css/Home.css";
import { Link } from "react-router-dom"
import logo from '../images/logo2.jpg';
function HomePage(){
return( 
    <div className="background">
        <div className="navbar">
            <div className="header"><br />
                <img src={logo}  alt="logo"/>
                <h3>MyChat</h3>
            </div>
            <nav>
                <ul>
                    <li><input type="text" placeholder="Search News" /></li>
                    <li><Link to = '/'>HOME</Link></li>
                    <li><Link to = ''>NEWS</Link></li>
                    <li><Link to = ''>TIMELINE</Link></li>
                    <li><Link to = ''>CONTACT</Link></li>
                </ul>
            </nav>
        </div>
        <div className = "backform">
            <div className="info">
                <h2>Make Cool Friends !!!</h2>
                <p>Friend Finder is a social network template that can be used to  <br />
                    connect people. The template offers Landing pages, <br />
                    News Feed, Image/Video Feed, Chat Box, Timeline and lot more. <br /><br />
                    What are you waiting for? Join Now.
                </p> 
            </div>   
           
            <div className="holdback">
                <form>
                    <Link to =''>Login</Link>
                    <Link to = ''>Register</Link>
                </form>
            </div>
        </div>
    </div>
);
  }

  export default HomePage;

这是我的CSS文件for Home.js设计，其中包含背景，图像，纳维栏，标头，文本样式和字体，我也尝试使用Meta设备显示为我的CSS，但不起作用。

@font-face {
    font-family: 'Pacifico';
    src: url('../fonts/Pacifico.ttf');
  }

  @font-face {
    font-family: 'Lobster';
    src: url('../fonts/Aladin-Regular.ttf');
  }

  @font-face {
    font-family: 'Neo';
    src: url('../fonts/Nunito-SemiBoldItalic.ttf');
  }

.background{
    background-image: url("../images/home-background1.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 680px;
}
.header{
    display: inline-block;
    margin: 0 2rem 0 20px;
    padding: 0 5rem 10px ;
}

.header h3{
    font-size: larger;
    font-family: 'Pacifico';
    font-stretch: expanded;
    color: #764CDF;
    margin: 5px 5rem 10px;
    padding: 0 5rem;
    position: static;
}

.header img{
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-left: 7rem;
    position: absolute;
}

.navbar{
    background-color: #5EECFF;
    width: 100%;
    height: 5rem;
}

.navbar ul{
    list-style: none;
    float: right;
    padding: 0 3rem;
    margin: 0;
    text-decoration: none;
}

.navbar ul li{
    display: inline;
    padding: 1rem;
    font-size: larger;
    font-family: 'Lobster';
}

.navbar ul li input{
    border-radius: 10px;
    background-color: #F0F0F0;
    width: 200px;
    height: 20px;
    text-indent: 1rem;
    transition: width 0.4s ease-in-out;
    opacity: 0.5;
    font-family: 'Times New Roman', Times, serif;
    font-size: small;
}

a:link,
a:hover{
    text-decoration: none;
    color: white;
}

a:active{
    color: #764CDF;
}

a:focus{
    color: white;
    background-color: #764CDF;
}

.info{
    color: white;
    padding-left: 15rem;
    padding-top: 8rem;
    font-family: 'Neo';
    
}

.backform{
    display: inline-flex;
}

.holdback{
    margin: 0;
    padding-left: 2rem;
    margin-left: 5rem;
    margin-top: 5rem;
    border-radius: 5px;
    background-color: #F0F0F0;
    width: 500px;
    height: 300px;
    text-align: left;
    display: inline-block;
}

Answer 1

您的CSS必须为您想要响应的每个断点都具有不同的样式。

有两种方法可以实现：

1. 您自己写作。与评论一样，已经有几个指南可以学习如何做。 示例

2. 有一些框架/库人们正在使用它来实现这种目标。它使我们的生活更轻松。您可以搜索和研究它们，然后独自选择要使用的哪一个。为数几个（流行）， bootstrap 和尾风。