Question

移动优化我的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>

Answer 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;
     }
  }

Answer 2

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

@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 */ }

使用Moovweb SDK移动优化WordPress博客

2 个答案: