viewport-units

1熱

3答えて

私はcssだけを使ってシンプルな単一ページのWebサイトを構築して、CSSに慣れさせようとしています。私は3つの背景画像を重ね合わせています。各画像は100vhの高さに設定されています。これは、それぞれの画像にすばらしい外観を与えますが、テキストをページ中央に配置するために 'top'属性を使用しようとしましたが、テキストは移動しませんでした。誰かがこの状況で「トップ」がうまくいかない理由を教

18熱

1答えて

vh-unitsがスクロールバーを無視しないようにするにはどうすればいいですか？

私は水平スクロールバーを使ってページレイアウトを作成しています。固定幅のパネルを横に並べたものがあります。これらはすべてビューポートの高さでなければなりません。私はvhユニットをテストすることにしました。 .panel { height: 100vh; } スクロールバーが表示されるまで、これは正常に機能しています。問題は、vhがスクロールバーで使用される高さを無視するため、垂直スクロール

5熱

2答えて

モバイルデバイスのHTML電子メールでfont-sizeにvw（ビューポート幅）を使用することはできますか？

HTML電子メールテンプレートを作成しています。デスクトップバージョンはテーブルで、行内CSSは少なく、すべてのサイズは％またはpx値で定義されています。モバイル版の場合はdivとcssで作業します。今私は、ビューポートの幅に応じていくつかのテキストのサイズを変更したいと思います。ヘッダーのfont-sizeを28pxと定義すると、特定のテキストはより広いデバイスでは正常に見えるかもしれませんが

0熱

1答えて

VWユニットを使用しているテキストが機能しない

私はVWユニットを使用してタイポグラフィのサイズを変更したいと考えていますが、そのときテキストは大きく、明らかにビューポートの幅よりも大きくなります。基本的に私のテキストは親の.containerの中で反応的なものにしたいので、pxやemのような静的なサイズのユニットを使うとテキストが決して切り取られたり、あふれたりすることはありませんか？あなたのフィドルが正しくレンダリングされ HTML <di

0熱

1答えて

100vhの背景カバー画像

だから私は100vhでカバーに画像を設定しようとする - しかし、私は非常に特定の状況があります。私のイメージでは、私は大きなプレートとタブレットがこのプレートに "横たわっています"。私の目標はこの画像を100vhヘッダーにすることですが、問題があります。私は大きなモニタでこれを試してみると大丈夫だと思っていますが、小さな高さのモニタでは見栄えが悪いです。すべてのデスクトップデバイスに表示さ

6熱

2答えて

OSX Safari上でビューポート単位のvw/vhが100％でなくズームインしても機能しない

OSX Safariでvwとvhユニットに問題があります。は、一例として、このコードを取る： <body style="margin: 0;"> <div style="background: red; height: 100vh; width: 100vw;"></div> </body> 100％ズームで、それが正常に動作します。た

0熱

4答えて

要素の高さを100％のビューポート幅に設定するには

要素の高さをビューポートの幅と同じに設定しようとしています。これはどのように達成できますか？スクロールバーが存在する場合（一例として、以下のフィドルをとる）...高さと幅と https://jsfiddle.net/minlare/0hnn7pfy/ body{margin:0;} div{min-height: 100vw;} 不一致が発生します。スクロールバーが存在する可能性がある

13熱

4答えて

スクロールバーを使用せずにビューポート幅（vw）を計算することはできますか？

タイトルに記載されているように、をスクロールバーなしでCSSで計算することは可能ですか？たとえば、私の画面の幅は1920pxです。 vwは1920pxを返します。しかし、私の実際の身体の幅は1903pxのようなものです。 1903pxの値をCSSで取得する方法はありますか（bodyの直接の子供だけでなく）、またはこれには絶対にJavaScriptが必要ですか？

18熱

2答えて

"VW" CSSの単位は、Chromeで

新しいvw（およびvh、vminとvmax）が動作していないCSS単位calcがあるとして、非常に便利です。どちらもChromeでうまくいきますが（後者は-webkit-calcという接頭辞ですが）、なんらかの理由で、単位を含むcalcの値（たとえば、）が無効なプロパティ値を生成することがわかりました。これはまだ実装されていないのですか？仕様、またはバグですか？