Javascript 窗口较小或在移动设备上时响应标题-富有创意

我在一个网站上工作，我不知道如何制作一个响应性标题。我已经做了一个版本，我加载的标题或移动标题，这是两个不同的组成部分，但我填充，这是完全无用的

现在，我有下面的标题

使用关联的react代码：

import React  from 'react';
import { Navbar, Nav } from 'react-bootstrap';
import SiteLogo from '../assets/images/village-logo.svg';
import './Header.css';
import LoginRegisterForm from './modal/loginRegisterForm';
import TextContents from '../assets/translations/TextContents';
import { Form, InputGroup } from 'react-bootstrap'
import SearchIcon from '../assets/images/search-icon.svg';
 
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import Link from '@material-ui/core/Link';
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
import IconButton from '@material-ui/core/IconButton';
import Avatar from '@material-ui/core/Avatar';
import { withStyles } from '@material-ui/core/styles';
import Constant from '../config/Constant';

import UserDataUseCase from '../data/layer/UserDataUseCase';



class Header extends React.Component {
    
    constructor(props, context) {
        super(props);
        this.state = {
            anchorEl: null, 
            showLogin: false};
    }
    
    openLogin = () => {
        this.setState({showLogin: !this.state.showLogin});
    }

    handleClick = (event) => {
        this.setState({ anchorEl: event.currentTarget });
      };
    
    handleClose = () => {
        this.setState({ anchorEl: null })
      };

    handleLogout = () => {
        this.handleClose()
        sessionStorage.clear()
        window.open("/", "_self") //to open new page
    }

    render() {
        
        var authToken = sessionStorage.getItem(Constant.AUTH_TOKEN);

        var isLoggedIn

        if((authToken === null) || (authToken === 'undefined')){
            isLoggedIn = false;
        } else {
            isLoggedIn = true;
        }

        const menuLoginRegister = <Nav.Link 
            ref="LoginRegisterModal" eventKey={1} 
            href="#" 
            onClick={this.openLogin}
            bsPrefix="header-menu-item"
            >{TextContents.MenuLoginRegister}</Nav.Link>;

        const StyledProfileMenu = withStyles({
            paper: {
                border: '1px none',
                borderRadius: "21px",
                boxShadow: "0px 8px 18px 0 rgba(0,0,0,0.14)",
            },
            })((props) => (
            <Menu
                elevation={0}
                getContentAnchorEl={null}
                anchorOrigin={{
                vertical: 'bottom',
                horizontal: 'left',
                }}
                transformOrigin={{
                vertical: 'top',
                horizontal: 'center',
                }}
                {...props}
            />
            ));

        const StyledProfileMenuItem = withStyles((theme) => ({
            root: {
                margin: "2px 30px 1px 10px",
                fontFamily: "Source Sans Pro",
                fontSize: "16px",
                color: "#616161",
                fontStyle: "normal",
                '&:hover': {
                    backgroundColor: "#ffffff",
                    color: '#ff7255'},
        
                '&:focus': {
                    backgroundColor: "#ffffff",
                    color: '#ff7255'},
            },
            }))(MenuItem);    

        const menuProfile = 
                <div className="menu-profile">
                    <IconButton 
                        aria-controls="customized-menu" 
                        className="profile-icon-menu"
                        aria-haspopup="true" 
                        variant="contained"
                        color="secondary"
                        disableRipple="true"
                        disableFocusRipple="true"
                        onClick={this.handleClick}
                        style={{boxShadow: "0px 0px 0px 0 rgba(0,0,0,0)"}}>
                        <Avatar alt="Avatar" src={UserDataUseCase.getCurrentUserProfile().profilePic} /> 
                        <ArrowDropDownIcon style={{ color: "#ff7255" }}/>                    
                    </IconButton>
                    <StyledProfileMenu
                        id="simple-menu"
                        anchorEl={this.state.anchorEl}
                        keepMounted
                        open={Boolean(this.state.anchorEl)}
                        onClose={this.handleClose}
                        anchorOrigin={{
                            vertical: 'bottom',
                            horizontal: 'left',
                          }}
                          transformOrigin={{
                            vertical: 'top',
                            horizontal: 'center',
                          }}>
                            <p className="username-style"> {UserDataUseCase.getCurrentUserProfile().name} </p>
                            <Link href="/profile">
                                <StyledProfileMenuItem>{TextContents.MenuProfile}</StyledProfileMenuItem>
                            </Link>
                            <Link href="/buycredits">
                                <StyledProfileMenuItem>{TextContents.MenuCredits}</StyledProfileMenuItem>
                            </Link>
                            <Link href="/messages">
                                <StyledProfileMenuItem>{TextContents.MenuMessages}</StyledProfileMenuItem>
                            </Link>
                            <Link href="/settings">
                                <StyledProfileMenuItem>{TextContents.MenuSettings}</StyledProfileMenuItem>
                            </Link>
                            <StyledProfileMenuItem onClick={this.handleLogout}>Logout</StyledProfileMenuItem>
                        </StyledProfileMenu>
                    </div>;

        return (
            <div>
            <Navbar className="header-village" width="100" expand="lg">
                <Navbar.Brand href="/">
                    <img
                        src= { SiteLogo }
                        width="214"
                        height="28"
                        className="d-inline-block align-top"
                        alt="Village"
                    />
                </Navbar.Brand>
                <div className="search-menu-container">
                    <InputGroup className="header-search-container">
                        <InputGroup.Prepend>
                            <InputGroup.Text bsPrefix="header-search-prepend" id="inputGroupPrepend">
                            <img
                                src= { SearchIcon }
                                width="17"
                                height="17"
                                className="header-search-img"
                                alt="Village"
                            />
                            </InputGroup.Text>
                        </InputGroup.Prepend>
                        <Form.Control
                            type="text"
                            placeholder={TextContents.SearchPlaceHolder}
                            aria-describedby="inputGroupPrepend"
                            bsPrefix="header-search-form"
                        />
                        </InputGroup>
                    <Navbar.Toggle aria-controls="basic-navbar-nav"/>
                    <Navbar.Collapse id="basic-navbar-nav">
                        <Nav className="menu-nav-header">
                        <Nav.Link bsPrefix="header-menu-item" href="/discover">{TextContents.MenuDiscover}</Nav.Link>
                        <Nav.Link bsPrefix="header-menu-item" href="/create">{TextContents.MenuCreate}</Nav.Link>
                        <Nav.Link bsPrefix="header-menu-item" href="/howitworks">{TextContents.MenuHiW}</Nav.Link>
                        {!isLoggedIn && menuLoginRegister}
                        {isLoggedIn && menuProfile}
                        </Nav>
                    </Navbar.Collapse>
                </div>

            </Navbar>
            <LoginRegisterForm displayPopUp={this.state.showLogin} onHide={() => this.setState({ showLogin: false })}/>
            </div>
            );
        }
}

export default Header;

所以这几乎可以，但我希望在窗口太小而无法显示所有这些和/或在移动设备上显示时，有一个动态/响应行为

我希望图像从桌面上的以下位置开始：

to（当屏幕、窗口变小，以便在一行中显示所有内容时，我可能还将使用媒体来更改移动设备的一些？UI字体大小）

然后

我觉得这应该很难

我加了一个铃铛，但似乎不起作用

但是，如果方便的话，您可以使用第1部分、第2部分和第3部分中的3个文本制作一个示例。其中第1部分是徽标，第2部分是搜索，第3部分是菜单

在我的示例中很容易重复使用它

有什么想法吗

---

关于

我为您编写了一些css，用于修复响应问题，检查，全屏查看，然后调整浏览器大小，它在任何点上都不会中断

您所需要做的就是使用媒体查询

 @media (max-width: 991px) {
  .header-search-container {
    margin-right: auto;
  }
}
  @media (max-width: 650px) {
  .header-search-container {
    order: 1;
    margin-top: 20px;
    max-width: 100%;
  }
}

---

上面的CSS只是一个使用媒体查询的示例，您可以根据需要更改任何内容。

您为什么不在CSS中使用

@media

查询？这里有更多关于他们的信息：@Dexterians，所以我在不同的地方使用它，但我不明白如何使用它来实现这一点。我是react和css的新手。因此，我使用了

@media

查询，但它不起作用，因此我在react中使用media query在两个不同的组件之间进行了一次恶意攻击。我很乐意，如果您基于我的示例，请告诉我如何使用它。如果您在CodePen或JSFIDLE中提供一些HTML和CSS，我们可能能够帮助/向您展示CSS中的

@media

查询是如何工作的。@Dexterians我在描述中添加了一个链接。@Dexterians沙箱似乎工作不正常，但我认为使用文本而不是图像的简单示例，searcg和菜单可能让我无法理解。

 @media (max-width: 991px) {
  .header-search-container {
    margin-right: auto;
  }
}
  @media (max-width: 650px) {
  .header-search-container {
    order: 1;
    margin-top: 20px;
    max-width: 100%;
  }
}