javascript - ブラウザの幅に応じてcss値を変更する

Question

私は本当にこれについて助けが必要です:

たとえば、私をクリックしてください

背景画像を含む div コンテナー #green (緑の境界線) があります。div は幅 100% で、背景画像は css3 の -cover- です。この div には、位置の絶対値と正しい値を持つ別の div #red があります。#red div が背景画像のモチーフと常に同じ距離になるように強制したい。ブラウザウィンドウをスケーリングする場合、ギャップは常に同じでなければならないことを意味します。#red { right: 25px }私の試みは、 cssを除算して、$(window).width()この係数を使用することでした

var factor = 0,253;
var width = $(window).width()*factor;

('#red').css('right', width);

しかし、それは機能しません。あなたが私の主張を理解してくれることを願っています、そしてあらゆる助けが大歓迎です:)

Answer 1

メディア クエリを使用します。

@media (min-width:500px) { … }

Answer 2

var factor = 0,253は無効な構文です

する必要があります

var factor = 0.253;

ブラウザー コンソールを使用してエラーを確認します。これはすぐに表示されます。