0

目標: スクロールせずに、あらゆる画面サイズと向きにスムーズにフィットするサイト。SassMeister で、メディア クエリごとに異なるレイアウトを使用して、ばかげた数学の問題のパッキング部分を解決しました。

http://sassmeister.com/gist/8f9954aa8973b97f43c8

私ができる唯一の方法は、すべての div のサイズ設定に vh と vw に基づく calc を使用することです。計算単位とビューポート単位の両方が、safari 5、Opera mini、IE8 の問題です。

vh、vw、calc にアクセスできないと、ポリフィルはスクロールなしで画面に正確に収まりません。

だから...私はこれに不慣れで、トマトを投げませんが、javascriptを使用して次のことを行うことは可能ですか(そして非常識ではありません):

1) 読み込み時に vh と vw の値を取得し、サイズを変更します (この部分はビューポート、バージなどで実行できることがわかっています)

2）すべてのcss calc関数を同じ内部のjavascriptに置き換えます

3) 結果の div サイズをスタイルシートに出力する

大変助かりますが、これはjavascriptがレイアウト全体を担当していることを意味し、眉をひそめていることを理解しています。他に方法がわかりません。コンセプトが運命づけられている確固たる実用的な理由、または別のアプローチがある場合は、それについても知りたい.

ありがとうございました。

4

1 に答える 1

0

vwとvhを置き換えるjavascriptについてのその部分に答えることができます。私のコードではうまくいかなかったので、代替案を考え出さなければなりませんでした。ここにあります：

まず、body タグに onload 関数を設定します。

<body onload="screenSize()">

それから私はjavascriptを持っていました:

<script type="text/javascript">
    function screenSize(){var screenSize=screen.width;
    document.body.style.fontSize=screenSize+"px"}
</script>

これが行うことは、基本フォントを画面幅のピクセル数に設定することです。フォント サイズを宣言するときは、vw ではなく % 単位を使用できます。これができる理由は、サイズを画面全体に設定しているためです。つまり、1% は、font-size が画面の 1%、つまり 1vw であることを意味します。これが vh の代わりに機能するかどうかはわかりませんが、これによりコードがさまざまな画面に反応するようになり、単一のメディア クエリは使用しませんでした。お役に立てれば。

編集：すみません、読み間違えました。vw 値を取得するには、前のスクリプトを使用してから、次のスクリプトを追加します。

var screenSize = screen.width;
var elemSize=window.getComputedStyle(document.getElementById("yourElement"))
var elemSize=parseInt(elemSize.fontSize)
var vwValue= (elemSize*100)/screenSize

変数 vwValue は、要素の vw のサイズです。調整している場合は、スクリプトを次のように設定できると確信しています

yourElement.style.fontSize=yourVwAmount+"vw"
于 2015-02-27T07:07:32.433 に答える