when trying to query using css3 media, it is found that both max-width and min-width have uncertainty when expressing a range depending on a given value.
refer to W3C official document , there is a paragraph:
Most media features accept optional "min-" or" max-" prefixes to express "greater or equal to" and "smaller or equal to" constraints.
can basically be understood as
- max-width means less than or equal to
- min-width means greater than or equal to
but in the Google developer documentation, there is the following definition, which has no boundary value and is only less than or greater than:
.
FireFoxChrome
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
</head>
<style>
body{
background-color:-sharp0033FF;
}
@media screen and (min-width: 401px){
body{
background-color:-sharpFFFF00;
}
}
</style>
<body>
my first @media
</body>
</html>found that the range represented by media queries varies with a given value, which is not greater than or equal to or less than or equal to what W3C refers to. It is found that there is no clear rule to follow.
so, is there any Daniel who can explain it?
