3

デバイス固有の画像編集を行わずに、画像が多い Wordpress ブログをモバイル最適化する最良の方法は何ですか? 私の投稿の一般的な構造は次のようなものです。


<div class="post" id="post-ID">
<div class="top_o_the_post">
        <h2><a href="My URL" rel="bookmark" title="My Title">My Title</a></h2>
        <small>My Sub-title</small>                         
    </div>

    <div class="entry">
        <p>Some Text</p>
        <p>More text</p>
        <p>Some more text<br>
        <table class="pics">
        <tbody><tr>
            <td>
               <a href="My Image URL"><img src="My image src" alt="Foo" width="729" height="427" class="alignnone size-full wp-image-92687"></a>
            </td>
            <td>
               <a href="My Image URL"><img src="My image src" alt="Foo" width="729" height="427" class="alignnone size-full wp-image-92687"></a>
            </td>
            <td>
               <a href="My Image URL"><img src="My image src" alt="Foo" width="729" height="427" class="alignnone size-full wp-image-92687"></a>
            </td>
        </tr>
        </tbody></table>
    </div>
</div>
4

2 に答える 2

1

ある種の画像プリセット作成モジュールがインストールされている場合は、モバイル フレンドリーな (小さくて軽い) 画像プリセットを作成し、SRC を変更してそれらの画像をモバイル クライアントに提供できます。コード変換の例では、次のようになります。

 $(".//table[@class='pics']") {
    $(".//img"){
        remove("@width")
        remove("@height")
        attribute("src"){
           value(){
              replace("desktop-folder-name", "mobile-folder-name")
           }
        }
     }
 }

また、さまざまな画面サイズに対応する画像を作成することもお勧めします。したがって、SCSS には次のようなものが必要です。

  .pics{
     img{
         width: 90%;
         max-width: 480px;
         display: block;
         margin: 10px auto;
     }
  }
于 2013-04-26T21:21:08.600 に答える