如何根据带有媒体查询的设备使用摘录长度.Zurb开发基础 - How to use excerpt length according a device with media queries. Foundation Zurb

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

我尝试了这个代码(多个摘录长度在wordpress)的多个摘录和工作良好。但是现在我需要知道我如何使用它来查询"@media only screen and (max-width: 40.063em) "或"class="show-for-small-only"

对

您可以采用几种方法来实现您想要的。第一个，考虑到你想使用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; ?>

根据主题，您可以使用多个元素，并为每个元素应用特定的类。例如，bootstrap提供了基于媒体类型显示/隐藏的元素。

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

你可以创建一个25字的移动元素，并在其上应用类别visible-xs，在另一个45字的元素上应用类别visible-md，等等

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

谢谢你的建议。