functions - Split Media Queries in different files!

admin管理员组

文章数量:1122832

I woke up this morning with a thought. Is it a good idea to split the different media queries in different files, check the width of the page in functions.php and then with an IF call the "correct" using wp_register_style and wp_enqueue_style?

I woke up this morning with a thought. Is it a good idea to split the different media queries in different files, check the width of the page in functions.php and then with an IF call the "correct" using wp_register_style and wp_enqueue_style?

• functions
• css
• wp-enqueue-style
• wp-register-style

Share Improve this question edited Apr 25, 2014 at 10:45 Pieter Goosen 55.4k2323 gold badges115115 silver badges209209 bronze badges asked Apr 25, 2014 at 10:39 MarkMark 35111 gold badge44 silver badges1515 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 2

There are no functions in wordpress that checks or determine screen sizes. These are all browser related stuff that has got nothing to do with wordpress. There are jquery functions that can maybe work, but again, this is not wordpress related. wp_is_mobile can be used to load stuff conditionally for mobile phones, but then again, wp_is_mobile don't have the logic determining screen sizes, it also can't differentiate between things like mobile phones and tablets.

Your solution here is to do it old school, using media queries in your main stylesheet as done in all of the default themes shipped with wordpress.

Closing off, I would most probably think that if there was such functions to determine screen sizes in wordpress, that it would be completely overrated and useless and time wasting just to load something simple like a stylesheet

Using media queries in your main stylesheet is OK but does not optimize the priority or even the ability to let HTTP/2 determine which files need to be loaded when a particular size screen is opened in the browser.

Example: wp_enqueue_style('html5blank', false, array(), false, 'all and (min-width: 1200px)'); would only load a stylesheet when browser is desktop.

To avoid loading large "main" stylesheet file you can split the calling of the files according to media: mobile, tablet, desktop, print and style.css.

Separating the CSS and specifying a media attribute value on each link tag allows the browser to prioritize what it currently needs.

Also, one large stylesheet inhibits regression tests on devices in that specific media query range. Compare that to the prospect of deploying the single bundled site.css file, an approach that would normally trigger a full regression test.

Good read: https://alistapart.com/article/mobile-first-css-is-it-time-for-a-rethink/

本文标签： functionsSplit Media Queries in different files