以下のようにCSSでコンポーネントの位置を適当にだいたいの位置を決めていたのですが、違う小さい画面のノートPCで開いたら位置が若干ずれてしまいます。ディスプレイの大きさに可変で対応できるようにするには以下のコードをどのように変えれば良いでしょうか?
ーーーーーーーーー
以下編集
ーーーーーーーーー
HTMLと少しコンポーネントが増えたのでCSSも編集します。
:local .TopPageについてはvw,vh試しましたが、これを変えると背景が画面全体に広がらなくなります。どんな画面サイズでもbackground-colorが画面全体に広がり、このtextやボタンがその中央に来る様にしたいです。
HTML
1 2<div className= {style.TopPage}> 3 <h3 className={style.text1}>text1</h3> 4 <h2 className={style.text2}>text2</h2> 5 <h2 className={style.text3}>text3</h2> 6 <div className= {style.twitter_button}> 7 <Button onClick={()=>this.onClicktest()} color='twitter' size='massive'> 8 <Icon name='twitter' /> Twitterボタン 9 </Button> 10 </div> 11 <div className= {style.login_button}> 12 <Button color='black'size='massive'>ボタン</Button > 13 14 </div> 15 16 17 </div>
CSS
1:local .TopPage { 2 width: 100vw; 3 height: 100vh; 4 text-align: center; 5 background-color: rgba(97, 94, 94, 0.931); 6} 7 8:local .text1 { 9 padding-top: 550px; 10 font-size: 100px; 11 font-family: "Ravi Prakash", cursive; 12 text-align: center; 13 color: rgba(255, 255, 255, 0.931); 14} 15 16:local .text2 { 17 18 font-size: 30px; 19 font-family: "Ravi Prakash", cursive; 20 text-align: center; 21 color: rgba(255, 255, 255, 0.931); 22} 23 24:local .text3 { 25 26 font-size: 30px; 27 28 text-align: center; 29 color: rgba(255, 255, 255, 0.931); 30} 31 32 33:local .twitter_button{ 34 position: absolute; 35 left: 48%; 36 margin-left: -300px; 37 margin-top: 100px; 38 39 40} 41 42:local .login_button{ 43 position: absolute; 44 right: 45%; 45 margin-right: -250px; 46 margin-top: 100px; 47 48}
回答3件
あなたの回答
tips
プレビュー