0


I am loading stylesheets into my wordpress theme using wp_enqueue_style(), like this:

wp_enqueue_style(
    'custom-stylesheet',
    get_stylesheet_directory_uri() . '/stylesheets/style.css',
    array(),
    '1.0.0'
);

My goal is to use one stylesheet file for each resolution or media query.

So I found the following solution :

<link rel="stylesheet" media='screen and (min-width: 140px) and (max-width: 380px)' href="style.css"/>

At this point, I'll need to use media attribute on my <link> tag.

How can I use it in wordpress ?

cimmanon
  • 67,211
  • 17
  • 165
  • 171
Vladimir
  • 456
  • 1
  • 7
  • 20

1 Answers1

2

wp_enqueue_style() accepts media as the final argument:

wp_enqueue_style(
    'custom-stylesheet',
    get_stylesheet_directory_uri() . '/stylesheets/style.css',
    array(),
    '1.0.0',
    'screen and (min-width: 140px) and (max-width: 380px)'
);

Read more in the docs.

rnevius
  • 26,578
  • 10
  • 58
  • 86
  • Thanks ! I have found a similar solution but within sass with `@import url(“style.scss”) only screen and (min-width:320px);`. Is there any performance difference between these two alternatives ? – Vladimir Mar 06 '16 at 14:00
  • 1
    Yes, doing an `@import` is always going to be slower: http://stackoverflow.com/questions/7199364/import-vs-link – rnevius Mar 06 '16 at 14:35