3

私が取り組んでいるプロジェクトでは、八角形のグリッドを作成する必要があります。cssを使用して八角形を作成できます。問題は、ブラウザウィンドウに合わせてサイズが変更されないため、ブラウザに応答しないことです。Webサイトは複数のデバイスで表示され、グリッドはモバイルデバイスで表示可能である必要があるため、これは重要です。

八角形は純粋に表示目的であるため、画像の背景だけを使用することも可能ですが、可能であればそれを避けたいと思います。私はJavaScriptを使用してそれを行うことに反対していませんが、私はJavaScriptの専門家ではなく、どこから始めればよいのかわかりません。

4

4 に答える 4

4

あなたはこのようなことを達成しようとしていますか？（ブラウザウィンドウのサイズを変更して、動作を確認します）。

.o {
  float: left;
  overflow: hidden;
  position: relative;
  padding: 5%;
}

.o::before {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: rotate(45deg);
  background: linear-gradient(dodgerblue, black);
  content: '';
}
<div class="o"></div>
<div class="o"></div>
<div class="o"></div>
<div class="o"></div>
<div class="o"></div>

またはこのようなもの？

.o-outer {
  float: left;
  position: relative;
  padding: 5%;
  margin: 4.33% -3% 0 0
}

.o {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
}

.o::before {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: rotate(45deg);
  background: radial-gradient(dodgerblue, black);
  content: '';
}

.o-outer:nth-child(even) .o {
  margin: 71.66% 0 -71.66% 0;
}
<div class="o-outer"><div class="o"></div></div>
<div class="o-outer"><div class="o"></div></div>
<div class="o-outer"><div class="o"></div></div>
<div class="o-outer"><div class="o"></div></div>
<div class="o-outer"><div class="o"></div></div>

于 2012-09-24T06:35:45.910 に答える
1

以下はあなたの問題に対する別の方法です。どれだけ複雑にしたいのかわかりませんが、デバイスに応じて異なるcssを適用します。プロジェクトの複雑さを考慮してください。

Web サイトが複数のデバイスで表示される場合は、デバイスやブラウザーごとに異なる CSS を使用することをお勧めします。

<link rel="stylesheet" media="screen and (min-device-width: 500px)" href="500example.css" />

上記のコードは、上記の css を 500 以上のデバイスに適用します。

これは、ブラウザの幅ではなくデバイスの幅をチェックするため、モバイル/ハンドヘルド デバイスを使用する場合に非常に便利なため、適切な方法です。

もう 1 つの方法は、ブラウザの幅を確認することです。

<link rel='stylesheet' media='screen and (min-width: 500px) and (max-width: 800px)' href=example2.css' />

上記のコードは、ブラウザ ウィンドウが 500px から 800px の間の場合にのみスタイル シートを適用します。

cssを適用する条件をチェックする関数を書くことができます。

ファイルを追加する

<link rel="stylesheet" type="text/css" href="main.css" /> 
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="example2.css" />

ウィンドウが調整されるたびに、適用するcssを確認できます[Add jQuery]

function adjust(width) {
    width = parseInt(width);
    if (width < 701) {
        $("#size-stylesheet").attr("href", "css/ex1.css");
    } else if ((width >= 701) && (width < 900)) {
        $("#size-stylesheet").attr("href", "css/ex2.css");
    } else {
        $("#size-stylesheet").attr("href", "css/wide.css");
    }
}

$(function() {
    adjust($(this).width());
    $(window).resize(function() {
        adjust($(this).width());
    });
});
于 2012-09-24T03:21:02.413 に答える
0

OPによると、彼はCSSで画像を描画したため、background-sizeを使用しても機能しません。八角形を描くために書いたCSSコードを投稿していただけませんか。

正直なところ、私はidoに同意します。特に、ある種の装飾的な機能として単純に横切ることを計画している場合は、cssで描画された画像（pngではなく）を使用することによるパフォーマンスの大幅な向上は見られません。

とにかく、このJsFiddleを見てください：http：//jsfiddle.net/XkM9R/10/ 、私はまだ動的なサイズ変更に取り組んでいます。

于 2012-09-24T02:43:02.000 に答える
0

私の理解が正しければ、これは Javascript を使用して解決すべき問題ではありません。重すぎて不器用

CSSで作るのを諦めれば、CSSだけで整理できると思います。この場合background-size、パーセンテージで試してみてください。ここにいくつかの例があります: http://whereswalden.com/files/mozilla/background-size/more-examples.htmlとここhttps://developer.mozilla.org/en-US/docs/ CSS/背景サイズ

または、目的がモバイル デバイスのサポートである場合は、可能なズームを無効にすることもできます。モバイル Web ページでズームを「無効」にするにはどうすればよいですか?

于 2012-09-24T02:25:53.510 に答える