html - JavaScript - ボタンの幅/位置をパーセンテージで設定する方法は?

Question

モバイルが回転するときのために、ページ内の要素の位置/サイズをポーセントに設定する必要があります...

私が試してみました：

frame.width = 30%;
button.width = 50%;

Answer 1

専門家の Chris Coyier が、メディア クエリに基づいてデバイスの向きを分類する方法について優れたアドバイスを提供します。

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

記事はこちら。

これは、レスポンシブ Web デザインの新しい分野における重要なトピックです。

簡単な例を次に示します。

<style>
    /* iPads (landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : landscape) {
    /* Styles */
         .frame{width : 30%;}
         .button{width : 50%;}
    }
</style>

または、別の css ファイルに含めます。

<link rel="stylesheet" href="./responsiveness.css"> 

良い質問。それが役立つことを願っています。