Search code examples
htmlcssresponsive-designmedia-queries

Can I reference the media size in responsive css instructions?

I am familiar with setting rules using media queries for breakpoints in responsive CSS however I want to know if I can use the same method for providing the CSS with instructions for formatting a class/object?

E.g. can I have something along the lines of 

#image {
    max-width:([whatever the media width is]-20) px;
}

?

Solution

  • Since media width is 100% you can use it using calc() method:

    #image {
    max-width: calc(100% - 20px);
}

    See browser compatibility.