# Media queries

To display a style on a certain screen size, you need to write a number in state

class="512:bg-red"

This means that the background will be red if the screen width is larger than 512px
min-width: 512px

class="m-600:bg-red"

If you add m- to the number, it means that this style will be applied at a width less than 600px
max-width: 600px

maxPrefix

# Variables

screen: {
    sm: 576,
    md: 768,
    lg: 992,
    xl: 1200
}

class="md:bg-red"   // min-width: 768px
class="m-md:bg-red" // max-width: 768px

As with everything in blickcss, these values can be edited in configuration

blick.config({
    screen: {
        md: 600
        foo: [0, 500],
        bar: [null, 500],
    }
})

You can specify either a simple number that will mean (min-width: $px) , or a range [from, to] of the screen size, use null for max-width .

# Read next:

Configuration