calc() not working within media queries

后端未结

关注

 4  1884

@media screen and (max-width: calc(2000px-1px)) { 
  .col { width: 200px; }
}

The value after subtraction s

相关标签:

4条回答

陌清茗

2020-11-30 11:17

Pinal's answer is great, but your CSS wouldn't work anyways. You need spaces separating your units. In CSS 2000px-1px would be considered a single value, which obviously isn't a valid unit. It should be 2000px - 1px.

I'm currently using Chrome 66 and calc works fine in media queries.

0 讨论(0)
发布评论:

提交评论
- 加载中...

挽巷

2020-11-30 11:27

There is no support for media queries with calc() in IE11 (Up to October 2020).

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Media query</title>
    <style>
        body {
            background-color: powderblue;
        }

        @media screen and (min-width: calc(700px + 1px)) {
            body {
                background-color: yellow;
            }
        }
    </style>
    
</head>

<body>
</body>

</html>

0 讨论(0)

生来不讨喜

2020-11-30 11:29

ANSWER WAS EDITED 13.02.2018:

Using calc in media queries is supported by the spec, but support was only implemented by browsers recently (February 2018). Currently, calc in media queries is supported by Safari Technology Preview 49+, Chrome 66+, and Firefox 59+. See MDN's calc() page for the most up-to-date information.

0 讨论(0)
发布评论:

提交评论
- 加载中...
小鲜肉

2020-11-30 11:39
Support for use of calc() in media queries is browser-dependent HOWEVER the use of mixed units (e.g. em and px at same time) have limited or no current support. Please take a look at this JSFiddle (which tests 4 current browsers - Chrome 80.0.3987.163, Opera 67.0.3575.115, Firefox 74.0.1, and Microsoft Edge 44.18362.449.0) to verify.

For example, these media queries are valid for certain browsers (Chrome 80.0.3987.163, Opera 67.0.3575.115, and Firefox 74.0.1 but NOT Microsoft Edge 44.18362.449.0)
```
@media (min-width:calc(2em - 1em)) { div { color: green } } // valid

@media (min-width:calc(2px - 1px)) { div { color: green } } // valid
```
whereas this media query is only valid in Firefox 74.0.1
```
@media (min-width:calc(1em - 1px)) { div { color: green } } // different units are "mixed" in same calc() -----> invalid except Firefox
```
0 讨论(0)
发布评论:

提交评论
- 加载中...