如何根据带有媒体查询的设备使用摘录长度。基础Zurb答案

【问题标题】：How to use excerpt length according a device with media queries. Foundation Zurb如何根据带有媒体查询的设备使用摘录长度。基础Zurb
【发布时间】：2014-06-21 08:04:47
【问题描述】：

我在主题 wordpress 中使用 Foundation 框架。我想根据设备显示长度摘录。示例 25 个词用于移动设备，45 个用于平板电脑等等。

我为多个摘录尝试了这段代码 (Multiple excerpt lengths in wordpress)，效果很好。但是现在我需要知道如何使用它来查询“@media only screen and (max-width: 40.063em” or "class="show-for-small-only"。

问候

【问题讨论】：

标签： php wordpress frameworks media-queries zurb-foundation

【解决方案1】：

您可以采取多种方法来实现您想要的。第一个，考虑到您想使用 Foundation，您可以简单地使用它自己的类，如下所示：

<p class="show-for-small-only"><?php echo excerpt(25); ?></p>
<p class="show-for-medium-only"><?php echo excerpt(45); ?></p>
<p class="show-for-large-up"><?php echo excerpt(65); ?></p>

您还可以通过媒体查询采用完整的 css 方法：

<p class="excerpt"><?php the_content(); ?></p>

样式：

p.excerpt {
text-overflow: ellipsis; 
width: 150px; /* Or whatever you want since i'm taking a mobile-first aproach */
white-space: nowrap;
overflow:hidden; 
}

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
  p.excerpt { width: 250px;/* whatever you wish */ }
} /* Tablet-only */

@media only screen and (min-width: 64.063em) {
  p.excerpt { width: 350px;/* whatever you wish */ } 
} /* min-width 1025px - large screens up */

或者您甚至可以使用 PHP 进行移动检测以实现完全响应：

<?php
        $tablet_browser = 0;
        $mobile_browser = 0;

        if (preg_match('/(tablet|ipad|playbook)|(android(?!.*(mobi|opera mini)))/i', strtolower($_SERVER['HTTP_USER_AGENT']))) {
            $tablet_browser++;
        }

        if (preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android|iemobile)/i', strtolower($_SERVER['HTTP_USER_AGENT']))) {
            $mobile_browser++;
        }

        if ((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml') > 0) or ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))) {
            $mobile_browser++;
        }

        $mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'], 0, 4));
        $mobile_agents = array(
            'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
            'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
            'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
            'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
            'newt','noki','palm','pana','pant','phil','play','port','prox',
            'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
            'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
            'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
            'wapr','webc','winw','winw','xda ','xda-');

        if (in_array($mobile_ua,$mobile_agents)) {
            $mobile_browser++;
        }

        if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'opera mini') > 0) {
            $mobile_browser++;

            $stock_ua = strtolower(isset($_SERVER['HTTP_X_OPERAMINI_PHONE_UA'])?$_SERVER['HTTP_X_OPERAMINI_PHONE_UA']:(isset($_SERVER['HTTP_DEVICE_STOCK_UA'])?$_SERVER['HTTP_DEVICE_STOCK_UA']:''));
            if (preg_match('/(tablet|ipad|playbook)|(android(?!.*mobile))/i', $stock_ua)) {
              $tablet_browser++;
            }
        }

        if ($mobile_browser > 0): ?>
           <p class="show-for-small-only"><?php echo excerpt(25); ?></p>

        <?php 
        else if ($tablet_browser > 0): ?>
           <p class="show-for-medium-only"><?php echo excerpt(45); ?></p>

        <?php
        else: ?>
           <p class="show-for-large-up"><?php echo excerpt(65); ?></p>


        <?php endif; ?>

【讨论】：

【解决方案2】：

根据主题，您可以使用多个元素并为每个元素应用某些类。例如，引导程序提供了将根据媒体类型显示/隐藏的元素。

http://getbootstrap.com/css/#responsive-utilities

因此，您可以为移动设备创建一个包含 25 个单词的元素，并在其上应用 visible-xs 类，在另一个具有 visible-md 类的元素中应用 45 个单词，等等。

【讨论】：

【解决方案3】：

我也想过。 Foundation 有媒体查询 (http://foundation.zurb.com/docs/media-queries.html)，但我认为一个函数或类似的东西可能更直观。

感谢您的建议。

【讨论】：