viewport-units

1熱

3答えて

メディアをトリガーする方法javascriptでのstyle.widthのクエリ

jQueryでonclickイベント（html）を作成しています。私のjquery私はこのイベントの幅を設定します。モバイルウェブサイトの幅を変更したいのですがこのために私はメディアクエリーで作業する必要があります。デスクトップ上では50vw、電話で（600pxからトリガー）100vw ... この作業を正しく行うにはどうしますか？ function openMenu() { docume

0熱

1答えて

キーボードが開いているとき、またはアドレスバーが表示されなくなったときに、モバイルでブラウザのサイズ変更を停止するにはどうすればよいですか？

モバイルでアドレスバーが表示されなくなったり、キーボードが開いたりすると、ビューポートのサイズに影響し、vh単位を使用するcss値が変更されます。ビューポート自体が変更されてもvhおよびvwユニットのサイズが保持されるようにする方法はありますか？

0熱

2答えて

画像にメディアクエリを使用する

私のコードでは、デバイスの幅をビューポートにしています。それはテキストと写真の両方の携帯電話で正常に動作します。 .imgはそれで<img> を含むdiv要素に適用される .img { width:100%; height:auto; text-align:center; } @media screen only and (min-device-width:80

0熱

2答えて

CSSでvwとvhの両方を使用できますか？

私はCodePenを使用して、スポーツリーグのブラケットに取り組んでいます。ここでは、コードの行が問題である： #body div[class^="side-"] ol li p.game a { color: #000000; font: bold .7vw/1 tungsten, sans-serif; height: auto; width: auto

0熱

1答えて

幅と高さに応じて16：9のアスペクト比を維持します

私はこのビデオを、全画面ではなく、近いものにします。 16：9のアスペクト比を維持したいのですが、ビデオと画面の端の間には常にパディングやスペースが必要です。だから私は今、https://jsfiddle.net/99yen3v3/、 width: 80vw; height: 45vw; のdivです。 Webブラウザを水平方向に縮小するとうまく動作し、ビデオdivは16：9のアスペクト比を

-2熱

1答えて

vwが特定のビューポートでさらに拡大縮小するのを止めることはできますか？

レイアウト全体の比例スケーリングについては、私のプロジェクトではどこでもviewportユニットを使用しています。ビューポートが '< 960'のときにスケーリングを停止したいのですが、メディアクエリを使用せずにスケーリングを防ぐことはできますか？メディアクエリを使用すると、すべての単一ユニットを再割り当てする必要があることを意味するためです。どのように私はこれをスキップしますか？

3熱

1答えて

Safari 100vwズーム時のレイアウトの問題 - 理解してもらえます

サファリとズームアウトの問題を誰かが見たことがありますか？私は100vwの幅を持つdivがあり、ズームアウトすると100vwは再計算されません。私はビューポートユニットにいくつかの癖があり、canIuseページに記載されていることを知っていますが、それらのどれも私が見ているものではありません。私は対応する財産をどこかに逃していますか？ここには、問題を示すjsFiddleがあります。 Safar

1熱

1答えて

なぜChromeでは動作しませんが、Internet Explorerで動作します

したがって、私はvhを使用しています。私の知る限り、ページのビューの高さは1 percentです。それはパーセンテージのように動作するはずですが、国境などの可能性があります。しかし、Chromeでは、それは動作しませんし、Webページの下部に空白を残します。ここで私は使用していますものです： div /*It most be any element I'm just using div for a

1熱

2答えて

calcとvwを使用した2つのフォントサイズ間のリニアスケーリング

calc()とvw単位の組み合わせを2種類のフォントサイズの間で線形に拡大することはできますか？例：私は次のフォントサイズでのWebページのデザインを与えている：32PX 1024px @：18pxのフォント・サイズである <h1> 360px @： <h1>はフォントサイズです単位を使用してfont-sizeをブラウザの幅と共に拡大することを希望する場合、数式はかなりシンプルです（SCSS構文

1熱

1答えて

一貫性のないVHユニットの動作

私はホバーに表示される擬似的な要素があります。 height: 0.4vh; 高さが変化しない、唯一の幅がありません。何らかの理由で、しかし、特定の条件下で異なる擬似要素の高さは、（ここでは暗いラインの両方がheight: 0.4vhを持っている）が異なります。私は証明するために、このバイオリンを出すが、それが依存することを実現しますビューポートの高さこの奇妙なことが起こるかどうか： htt