ユーザーの解像度に応じてボタンのサイズを変更する

Question

ボタンを異なる画面解像度で維持するにはどうすればよいですか？私は '％'を使ってみましたが、これまでdivでしか動作していませんでした。

.button{ 
     width:x; 
     height:y; 
     } 

ボタンは画面の解像度に応じて変更されるため、xとyにはどのような値が必要ですか？

Answer 1

などの属性VWのサイズやvhはボタンをブラウザのサイズに設定します。 あなたはそれが解像度ごとに異なるサイズになりたいと言うときに、ブラウザがフルスクリーンされている場合、それはそこに解像度

button { 
 
    width: 10vw; 
 
    height: 10vh; 
 
} 
 
body { 
 
    height: 100vh; 
 
}

<button>Create</button>

Answer 2

そうのようなパディングを使用してみてください、あなたは高さを増やしたい場合は、行の高さと遊ぶインライン

.button 
{ 

display:inline-block; 
padding: 2%; 

} 

に置くには、ビューポートを追加するので、

.button 
{ 

line-height: 1.5rem; 
display:inline-block; 
padding: 2%; 

}