从移动视图切换到 Web 视图时如何更改 html 组件位置

Question

我有一个小型 Web 应用程序，它在顶部包含一个导航栏。我需要让这个 web 应用程序支持移动 web 视图。因此，当从网络视图切换到移动视图时，我需要将顶部导航栏的位置更改为底部导航栏。如何实现这一目标？我可以为此使用 SaSS 吗？这是我的反应组件。

import React, { Component } from "react";
import { connect } from "react-redux";
import BottomNavigation from "../components/bottomnavigation";
import { GetPosts, LikePost } from "../actions/postActions";


class HomeContainer extends Component {

  render() {
    return (
      <BottomNavigation/>
    );
  }
}

let mapStateToProps = (state, props) => {
  return {
    posts: state.post.posts
  };
};

let mapDispatchToProps = dispatch => {
  return {
    Getposts: data => {
      dispatch(GetPosts());
    },
    Likeposts: data => {
      dispatch(LikePost(data));
    }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(HomeContainer);

Answer 1

这实际上取决于您为前端开发人员使用的是什么。当我做 Web 应用程序时，我喜欢使用 bootstrap。它为我提供了一堆 css 类开箱即用的功能，可帮助我创建一个响应式前端，该前端可以在任何屏幕尺寸上执行我需要的操作。长话短说，我会使用媒体查询、bootstrap 布局网格或两者的组合。

youtube 上有很多教程。这个人展示了 bootstrap 布局网格的基础知识。 https://youtu.be/GDwWmrpCa30

当您需要 UI 根据当前设备屏幕尺寸执行不同操作时，媒体查询很有用。这可以在不需要 bootstrap 的情况下使用，但也可以与 bootstrap 一起使用以制作真正响应迅速的应用程序。 youtube 上也有无数教程，但这里有一个值得一看的好教程。 https://youtu.be/2KL-z9A56SQ

如果我能提供进一步的帮助，请告诉我。祝你好运。

Answer 2

尝试编辑 BottomNavigation。将其 className 更改为响应式 class 并使用 @media

@media only screen and (max-width: 500px) {

.bottomNavigation{
position:absolute;
top:0px;
}

}

从移动视图切换到 Web 视图时如何更改 html 组件位置

How to change html component posstion when switching from Mobile view to Web view

html

css

bottomnavigationview