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 回答
0

我会在你的 CSS 中使用 @media 包含：

@media screen and (min-width: 600px) { .entry{ width:"600px" } }

@media screen and (min-width: 900px) { .entry{ width:"900px" } }

您还可以通过执行以下操作自动缩放所有图像：

img { max-width: 100%; height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */ }

于 2013-04-26T21:29:47.107 回答