モバイルビューからWebビューに切り替えるときにhtmlコンポーネントの位置を変更するには

Question

私はそれが上部にナビゲーションバーで構成されている小さなWebアプリケーションを持っています。この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

これは実際に使用しているフロントエンドデバイスによって異なります。私がウェブアプリケーションをやるとき、私はブートストラップを使うのが好きです。それは、私が必要とするものをどんな画面サイズでも実現する、反応的なフロントエンドを作成するのに役立つcssクラスの束を私に提供します。短い話ですが、私はメディアクエリ、ブートストラップレイアウトグリッド、またはその両方の組み合わせを使用します。

YouTubeには多くのチュートリアルがあります。この男は、ブートストラップレイアウトグリッドの基本がどのように機能するかを示しています。 https://youtu.be/GDwWmrpCa30

メディアクエリーは、現在のデバイスの画面サイズに基づいて異なる操作を行う必要がある場合に便利です。これはブートストラップを必要とせずに使用することができますが、本当に応答性の高いアプリケーションを作成するためにブートストラップと共に使用することもできます。それについてもyoutubeには数多くのチュートリアルがありますが、ここではチェックアウトするのが良い方法です。 https://youtu.be/2KL-z9A56SQ

私はさらに援助できるかどうか教えてください。がんばろう。

Answer 2

ボトムナビゲーションを編集してみてください。 classNameを応答クラスに変更し、@mediaを使用します。

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

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

}