如何根据具有媒体查询的设备使用摘录长度。 Zurb基金会

I am using Foundation framework in a theme wordpress. I want to display a length excerpt according a device. Example 25 words for mobile, 45 for tablet and so for.

I tried this code (Multiple excerpt lengths in wordpress) for multiple excerpts and works well. But now I need to know how I use it con query "@media only screen and (max-width: 40.063em" or "class="show-for-small-only" in that.

Regards

Depending on the theme, you can use multiple elements and just apply certain classes for each one. For example, bootstrap offers elements that will be shown/hidden based on the media type.

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

So you can just create one element with 25 words for mobile and apply the class visible-xs on it, 45 words in another element with the class visible-md, etc.

I thought about it too. Foundation have mediaqueries (http://foundation.zurb.com/docs/media-queries.html), but I think that a function or something like that it could be more intuitive.

Thanks for your advice.

You can take several approaches to achieve what you want. The first one, considering you want to use Foundation you can simply use its own classes, like so:

<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>

You can also take a full css approach with Media Queries:

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

The styles:

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

Or you can even go full responsive using PHP for mobile detection:

<?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; ?>