Media Query Enqueue Conditional CSS & Stylesheets (2 posts)

  1. joesnellpdx
    Posted 3 years ago #

    Please help!

    I am trying to develop a mobile first site and want to use stylesheets conditionally.

    In html, here is my goal (via Brad Frost at http://www.html5rocks.com/en/mobile/responsivedesign/):

    <link rel="stylesheet" type="text/css" href="style.css" media="screen, handheld" />
    <link rel="stylesheet" type="text/css" href="enhanced.css" media="screen  and (min-width: 40.5em)" />
    <!--[if (lt IE 9)&(!IEMobile)]>
    <link rel="stylesheet" type="text/css" href="enhanced.css" />

    So in WP:

    In functions.php I want to use the following:

    wp_enqueue_style( 'style', get_stylesheet_uri() );

    wp_enqueue_style( 'enhanced', get_stylesheet_uri() . '/styles/enhanced.css', 'css', true );

    Is it possible to put conditions on the enqueue_style? Can I do the first line by media="screen, handheld" and the second line by media="screen and (min-width: 40.5em"? How?

    I can't find anything on this on the interwebs. I will be HUGELY grateful for any help on this!

    Thank you!

    Joe Snell

  2. jasonlcrane
    Posted 3 years ago #

    Hi Joe, I think you want the $media parameter in the wp_enqueue_style function. Like this:

    wp_register_style( 'style',
        'screen, handheld' );
    wp_register_style( 'enhanced',
        get_stylesheet_uri() . '/styles/enhanced.css',
        'screen and (min-width: 40.5em' );

    Here's the documentation: http://codex.wordpress.org/Function_Reference/wp_enqueue_style

    Good luck.

Topic Closed

This topic has been closed to new replies.

About this Topic