CSS Media Query
八月 31, 2020
Media Query
What is media query used for?
automatically adjust the layout according to user’s device.
1 | @media (max-width: 1280px){ /*media feature result in true or false*/ |
Media Query with Logical Operators
1 | @media (min-width: 768px) and (max-width: 991px){...} |
Devices with width within this range applies to styling in the curly bracket.
1 | @media (max-width: 768px) , (min-width: 991px){...} |
Devices with width is either < 768 or > 991 applies to styling in the curly bracket.
Notice: not to overlap range boundaries
12-Column Grid Responsive Layout
1 | @media(min-width: 950px) and (max-width:1199px){ |
加载评论