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

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

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

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

}

Answer 2

这实际上取决于你为前端开发者使用的是什么。当我做网络应用程序时，我喜欢使用bootstrap。它为我提供了一堆开箱即用的CSS课程，帮助我创建一个响应式前端，可以在任何屏幕尺寸上完成我需要的操作。长话短说，我会使用媒体查询，引导布局网格或两者的组合。

youtube上有很多教程。这个人展示了基础知识如何用于引导布局网格。 https://youtu.be/GDwWmrpCa30

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

如果我能得到进一步的帮助，请告诉我。祝好运。

从Mobile视图切换到Web视图时如何更改html组件的可能性

2 个答案: