0

最近この WordPressサイトを作成し、ピクセルと余白を使用して 2 つの半透明のコンテンツ ボックスのレイアウトを作成しました。ただし、私よりも経験豊富な人は、これがまったく応答性が低く、クロスブラウザーフレンドリーではないことを認識していると確信しています! そのため、ピクセルではなくパーセンテージに切り替えるようにアドバイスされましたが、既存の CSS をどこから始めればよいかわかりません。

これを実現するには、5 列のレイアウトを作成する必要がありますか?

  • 左側の空白スペースを作成するための最初の列の空白
  • 2 番目の列に大きな青いコンテンツ ボックスを含める
  • 2 つの列の間にスペースを作成するための 3 番目の列の空白
  • 4 列目の小さい青色のコンテンツ ボックス
  • 5 列目は右端の空白スペースを作成します

もっと簡単な方法はありますか？

ここに私の既存のスタイルシートへのリンクがあります

必要な情報を渡すのを忘れた場合は、お知らせください。

4

2 に答える 2

0

もっとレスポンシブなものが必要な場合は、 http://adapt.960.gsを参照してください ;) 使い方はとても簡単です。

最初に JS ファイルを追加する必要があります。

<script src="js/adapt.min.js" type="test/javascript"></script>

次に、CSS (ユーザー ブラウザーで JS が非アクティブ化されている場合のフォールバックとして):

<link type="text/css" rel="stylesheet" href="css/960.min.css" />

最後に、ブラウザーに CSS ファイルを切り替えるように指示する JS 行は、ブラウザーの幅によって異なります。

<script type="text/javascript">
  var ADAPT_CONFIG = {
    path: 'assets/css/',
    range: [
      '0px    to 760px  = mobile.css',
      '760px  to 980px  = 720.css',
      '980px  to 1280px = 960.css',
      '1280px to 1600px = 1200.css',
      '1600px to 1920px = 1560.css',
      '1920px           = fluid.css'
    ]
  };
</script>

次に、HTML で標準グリッドを使用できるようになり、あらゆる用途に適応します。ページhttp://adapt.960.gs/は、追加の説明とデモを提供します (ブラウザのウィンドウのサイズを変更するか、モバイルからアクセスしてみてください) ;)

于 2012-08-12T12:43:52.087 に答える
0

これを行う最も簡単な方法：

  1. 最も幅の広い要素を見つけます。幅ですXXXpx、 があなたの新しい になります100%。

  2. px値を持つ他のすべての要素を検索しますYYYpx。幅は になります(YYY/XXX * 100)px。

  3. サイトを視覚的に調べて、すべてが正しく表示されていることを確認してください。すべてのスタイルがパーセンテージ ベースであるとは限らないため、いくつかは元に戻す必要があります。

于 2012-08-12T12:33:32.047 に答える