为什么我的网站在电脑屏幕上显示完整，但在移动设备屏幕上显示白色条纹

Question

在电脑屏幕上它显示全宽，但当切换到移动设备时，它不是全宽，看起来宽度是 80-90%，而且我的内容溢出到外面，所以它在移动设备上反应不那么灵敏，为什么 [在此处输入图像描述 ]

（https://i.sstatic.net/82Gf6xDT.png）

import React, { useState } from 'react';

import { Link } from 'react-router-dom';

import { TiThMenuOutline } from 'react-icons/ti';

import { GiCrossMark } from 'react-icons/gi';

export default function Navbar() {
    const [isOpen, setIsOpen] = useState(false);

    const [rotating, setRotating] = useState(false);

    const [show, setShow] = useState(false);

    const toggleMenu = () => {
        setIsOpen(!isOpen);
    };

    const toggleMain = () => {
        setRotating(true);
        setShow(!show);
        setTimeout(() => {
            setRotating(false);
        }, 500); // This should match the duration of the rotate animation
    };

    return (
        <div className="bg-custom-gradient flex justify-center">
            <nav className=" bg-gradient-to-r from-[#1f353f] via-[#79a8b2] to-[#094c57] shadow-lg border-2 border-white rounded-3xl fixed p-4 w-full font-dongle text-2xl">
                <div className="container mx-auto flex justify-between items-center">
                    <div className="text-white text-4xl font-semibold">
                        Portfolio
                    </div>
                    <div className="relative">
                        <div className="flex items-center justify-between w-full">
                            <div className="overflow-hidden w-full">
                                <div
                                    className={`${
                                        show
                                            ? 'hidden md:flex gap-4 ease-in duration-500'
                                            : 'flex gap-4 mt-[-30px] md:mt-[-30px] ease-in duration-700'
                                    }`}
                                >
                                    <Link
                                        to="/"
                                        className="text-white hover:text-white"
                                    >
                                        Home
                                    </Link>
                                    <Link
                                        to="/about"
                                        className="text-white hover:text-white"
                                    >
                                        About
                                    </Link>
                                    <Link
                                        to="/services"
                                        className="text-white hover:text-white"
                                    >
                                        Services
                                    </Link>
                                    <Link
                                        to="/projects"
                                        className="text-white hover:text-white"
                                    >
                                        Projects
                                    </Link>
                                    <Link
                                        to="/contact"
                                        className="text-white hover:text-white"
                                    >
                                        Contact
                                    </Link>
                                </div>
                            </div>
                            <div>
                                <div className="hidden md:flex ml-4 justify-end">
                                    {show ? (
                                        <button
                                            className={`text-white hover:text-white ${
                                                rotating ? 'animate-rotate' : ''
                                            }`}
                                            onClick={toggleMain}
                                        >
                                            <GiCrossMark />
                                        </button>
                                    ) : (
                                        <button
                                            className={`text-white hover:text-white ${
                                                rotating ? 'animate-rotate' : ''
                                            }`}
                                            onClick={toggleMain}
                                        >
                                            <TiThMenuOutline />
                                        </button>
                                    )}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="md:hidden overflow-visible ">
                        <button
                            onClick={toggleMenu}
                            className="text-black focus:outline-none focus:text-black ml-[-90px] overflow-visible "
                        >
                            <TiThMenuOutline />
                        </button>
                    </div>
                </div>
                {isOpen && (
                    <div className="md:hidden mt-2 space-y-2">
                        <Link
                            to="/"
                            className="block text-gray-300 hover:text-white"
                        >
                            Home
                        </Link>
                        <Link
                            to="/about"
                            className="block text-gray-300 hover:text-white"
                        >
                            About
                        </Link>
                        <Link
                            to="/services"
                            className="block text-gray-300 hover:text-white"
                        >
                            Services
                        </Link>
                        <Link
                            to="/projects"
                            className="block text-gray-300 hover:text-white"
                        >
                            Projects
                        </Link>
                        <Link
                            to="/contact"
                            className="block text-gray-300 hover:text-white"
                        >
                            Contact
                        </Link>
                    </div>
                )}
            </nav>
        </div>
    );
}

import React from 'react';

import Navbar from '../comps/Navbar';

import Footer from '../comps/Footer';

export default function Home() {
    return (
        <div className="bg-custom-gradient min-h-screen flex flex-col font-dongle text-4xl w-full">
            {' '}
            <Navbar />
            <div className="flex-grow mt-32">hello</div>
            <Footer />
        </div>
    );
}

// Footer.js

import React from 'react';

import { Link } from 'react-router-dom';

export default function Footer() {
    return (
        <footer className="bg-gray-800 text-gray-300 py-4">
            <div className="container mx-auto text-center">
                <div className="mb-2">
                    <Link
                        to="/"
                        className="text-gray-300 hover:text-white mx-2"
                    >
                        Home
                    </Link>

                    <Link
                        to="/about"
                        className="text-gray-300 hover:text-white mx-2"
                    >
                        About
                    </Link>

                    <Link
                        to="/services"
                        className="text-gray-300 hover:text-white mx-2"
                    >
                        Services
                    </Link>

                    <Link
                        to="/projects"
                        className="text-gray-300 hover:text-white mx-2"
                    >
                        Projects
                    </Link>

                    <Link
                        to="/contact"
                        className="text-gray-300 hover:text-white mx-2"
                    >
                        Contact
                    </Link>
                </div>

                <div className="text-sm">
                    © {new Date().getFullYear()} Portfolio By Mukund. All rights
                    reserved.
                </div>
            </div>
        </footer>
    );
}

我希望我的代码在移动设备上也能响应，尽管我使用顺风并且使其成为移动响应式，但我在移动设备上无法获得良好的视图

Answer 1

您需要添加

flex-wrap

。

您正在使用

flex

作为这些页脚菜单项，但在移动设备上没有足够的空间，因此它们正在“突破”。通过将

flex-wrap

添加到父元素，这些项目将在必要时换行。