CSS Media Query Regex Pattern

Live Regex Tester

Pattern Breakdown

Code Examples

const regex = /@media\s*\([^)]+\)\s*\{/g;
const test = "@media (max-width: 768px) {";
console.log(regex.test(test)); // true

// Extract matches
const matches = test.match(regex);
console.log(matches);

import re

pattern = r'@media\s*\([^)]+\)\s*\{'
test = "@media (max-width: 768px) {"
match = re.findall(pattern, test)
print(match)  # Found!

package main

import (
    "fmt"
    "regexp"
)

func main() {
    re := regexp.MustCompile(`@media\s*\([^)]+\)\s*\{`)
    fmt.Println(re.MatchString("@media (max-width: 768px) {")) // true
}

Common Use Cases

Match Examples

About the CSS Media Query Regex

Matches CSS media query declarations for responsive design. Extracts breakpoints and conditions from stylesheets.

Regular expressions (regex) are powerful pattern matching tools used across virtually all programming languages. The css media query pattern is classified as intermediate difficulty in the web & html category. This pattern is specifically designed for CSS.

When using this regex, always consider edge cases and test thoroughly with real-world data. Use the interactive tester above to validate the pattern against your specific inputs before deploying to production.

More Web & HTML Patterns