WP_Theme_JSON::get_viewport_media_queries( mixed $viewport_settings = null, array $options = array() ): array

Returns CSS media queries for responsive viewport style states.

Description

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.

Parameters

$viewport_settingsmixedoptional

Viewport settings from theme.json.

Default:null

$optionsarrayoptional

Options for generating media queries.

include_desktop bool
Whether to include the desktop media query. Default false.

Default:array()

Return

array Responsive media queries.

Source

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

View all references View on Trac View on GitHub

Changelog

Version	Description
7.1.0	Introduced.

User Contributed Notes

You must log in before being able to contribute a note or feedback.