WP_Theme_JSON::get_viewport_media_queries │ public static │ WP 7.1.0

Returns CSS media queries for responsive viewport style states.

Breakpoint values are read from settings.viewport, sanitized, and normalized before the media query strings are generated. By default, the returned keys are the theme.json style-state names (@mobile, @tablet). When $options['include_desktop'] is truthy, @desktop is included.

Method of the class: WP_Theme_JSON{}

No Hooks.

Returns

Array. Responsive media queries.

Usage

$result = WP_Theme_JSON::get_viewport_media_queries( $viewport_settings, $options );

$viewport_settings(mixed)

Viewport settings from theme.json.
Default: null

$options(array)

Options for generating media queries.

Default: array()

• include_desktop(true|false)
  Whether to include the desktop media query.
  Default: false

Changelog

WP_Theme_JSON::get_viewport_media_queries() WP Theme JSON::get viewport media queries code ^{WP 7.1}

public static function get_viewport_media_queries( $viewport_settings = null, $options = array() ) {
	$breakpoints = static::sanitize_viewport_settings( $viewport_settings );

	$responsive_media_queries = array();

	if ( isset( $breakpoints['mobile'] ) ) {
		$responsive_media_queries['@mobile'] = "@media (width <= {$breakpoints['mobile']})";
	}

	if ( isset( $breakpoints['tablet'] ) ) {
		$responsive_media_queries['@tablet'] = isset( $breakpoints['mobile'] )
			? sprintf(
				'@media (%s < width <= %s)',
				$breakpoints['mobile'],
				$breakpoints['tablet']
			)
			: "@media (width <= {$breakpoints['tablet']})";
	}

	if ( ! empty( $options['include_desktop'] ) ) {
		if ( isset( $breakpoints['tablet'] ) ) {
			$desktop_breakpoint = $breakpoints['tablet'];
		} else {
			$desktop_breakpoint = $breakpoints['mobile'];
		}

		$responsive_media_queries['@desktop'] =
			"@media (width > {$desktop_breakpoint})";
	}

	return $responsive_media_queries;
}