次の HTML 形式を使用しています。特定の要素をデスクトップでは上部に配置し、モバイル デバイスでは下部に配置する効率的な方法は何ですか (幅 < 640 ピクセル)? いろいろなデバイスがあるので、ページの高さの内容が変わるので、位置座標を書きたくありません。助言がありますか？
<html>
<head>
..
</head>
<body>
..
<p>I am on the top of desktop page, and bottom of mobile page</p>
...
</body>
</html>
flexbox よりも優れた互換性をdisplay: table-footer-group(IE8+)で実現できます
逆効果: 要素を HTML コード内よりも上に移動するには、 と を試すことができtable-captionますtable-header-group。
imgまたはのような自己置換要素では機能しませんがinput、少なくとも Chrome では (これはごく普通のことです)、divたとえばは問題ありません。
編集: 2016 年なので、Flexbox (および Autoprefixer) すべてのもの\o/
それが最善のアプローチかどうかはわかりませんが、必要な場所で同じ要素を複製し、display: none/display: inline-block属性で遊ぶことができます。デスクトップで表示すると、css は、下部ではなく上部に表示するように指示します。次に、モバイルで表示すると、上に表示されず、下に表示されます。
私が言ったように、これが最も効率的な方法かどうかはわかりませんが、うまくいきます。他の誰かがより良い解決策を持っているなら、私はそれを聞きたいです.