发表新帖
发表新帖

CSS Media Query min-width not working correctly

前端 未结
关注
3 535
别跟我提以往
别跟我提以往 2021-01-04 10:59

I have a HTML like:
相关标签:
3条回答
  • Happy的楠姐
    2021-01-04 11:12

    I have had this happen to me from time to time. Make sure your tab is not zoomed in (⌘0)

    0 讨论(0)
  • 青春惊慌失措
    2021-01-04 11:26

    I used this HTML:

    <!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Code: NewYork</title>
</head>
<body data-ng-app="us">
    <input type="text" />
</body>
</html>

    With a simpler media query declaration like this one:

    @media (min-width: 1000px) and (max-width: 1200px) {

 input {
        background-color: green;
    } 

}

    It's working great here: http://jsbin.com/ubehoy/1

    Debugging with Firefox Responsive Design View and dragging the resizer, it changes the input background color correctly when the width limits are reached.

    Tried with Chrome 26.0.1410.64 m/IE 10 and it's working great too.

    0 讨论(0)
  • 天命终不由人
    2021-01-04 11:27 
    @media (min-width: 1000px) and (max-width: 1200px) {

 input {
        background-color: green;
    } 

}

    This works, but make sure you check the zooming. (I got this answer from the comments, as it seems this is the big catch around here.. I fell for it too)

    0 讨论(0)
 看不清?
提交回复
热议问题