Title: WP_Theme_JSON::get_viewport_media_queries
Published: August 20, 2026

---

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

## In this article

 * [Description](https://developer.wordpress.org/reference/classes/wp_theme_json/get_viewport_media_queries/?output_format=md#description)
 * [Parameters](https://developer.wordpress.org/reference/classes/wp_theme_json/get_viewport_media_queries/?output_format=md#parameters)
 * [Return](https://developer.wordpress.org/reference/classes/wp_theme_json/get_viewport_media_queries/?output_format=md#return)
 * [Source](https://developer.wordpress.org/reference/classes/wp_theme_json/get_viewport_media_queries/?output_format=md#source)
 * [Changelog](https://developer.wordpress.org/reference/classes/wp_theme_json/get_viewport_media_queries/?output_format=md#changelog)

[ Back to top](https://developer.wordpress.org/reference/classes/wp_theme_json/get_viewport_media_queries/?output_format=md#wp--skip-link--target)

Returns CSS media queries for responsive viewport style states.

## 󠀁[Description](https://developer.wordpress.org/reference/classes/wp_theme_json/get_viewport_media_queries/?output_format=md#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](https://developer.wordpress.org/reference/classes/wp_theme_json/get_viewport_media_queries/?output_format=md#parameters)󠁿

 `$viewport_settings`mixedoptional

Viewport settings from theme.json.

Default:`null`

`$options`arrayoptional

Options for generating media queries.

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

Default:`array()`

## 󠀁[Return](https://developer.wordpress.org/reference/classes/wp_theme_json/get_viewport_media_queries/?output_format=md#return)󠁿

 array Responsive media queries.

## 󠀁[Source](https://developer.wordpress.org/reference/classes/wp_theme_json/get_viewport_media_queries/?output_format=md#source)󠁿

    ```php
    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](https://developer.wordpress.org/reference/files/wp-includes/class-wp-theme-json.php/)
[View on Trac](https://core.trac.wordpress.org/browser/tags/7.1/src/wp-includes/class-wp-theme-json.php#L720)
[View on GitHub](https://github.com/WordPress/wordpress-develop/blob/7.1/src/wp-includes/class-wp-theme-json.php#L720-L751)

## 󠀁[Changelog](https://developer.wordpress.org/reference/classes/wp_theme_json/get_viewport_media_queries/?output_format=md#changelog)󠁿

| Version | Description | 
| [7.1.0](https://developer.wordpress.org/reference/since/7.1.0/) | Introduced. |

## User Contributed Notes

You must [log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fclasses%2Fwp_theme_json%2Fget_viewport_media_queries%2F)
before being able to contribute a note or feedback.