How to use @media in mobile adaptive styles

General mobile phone style:

@media all and (orientation : portrait) {
/*Vertical screen*/
}
@media all and (orientation : landscape) {
/*Horizontal screen*/
}

Specify the height style for mobile phones:

@media screen and (max-width: 750px)
@media screen and (min-width: 720px) and (max-width: 960px) {//devices with 720 <= xxx < 960}

Styles set according to different devices:

@media (min-width: 768px) { //> = 768 devices}
@media (min-width: 992px) { //> = 992 devices}
@media (min-width: 1200) { //> = 1200 devices}

Pay attention to the order. If you write @media (min-width: 768px) below, it will be a tragedy, because the CSS file is read from top to bottom, and the latter CSS will have a higher priority.

@media (min-width: 1200) { //> = 1200 devices}
@media (min-width: 992px) { //> = 992 devices}
@media (min-width: 768px) { //> = 768 devices}

Because if it is 1440, since 1440>768 then your 1200 will be invalid.

So when we use min-width, the smaller one is on top and the larger one is on the bottom. Similarly, if we use max-width, the larger one is on top and the smaller one is on the bottom.

@media (max-width: 1199){ //<=1199 devices}
@media (max-width: 991px){ //<=991 devices}
@media (max-width: 767px){ //<=768 devices}

Attach a small example

<style type="text/css">
@media (max-width: 768px) {
.change{
height: 100%;
float: right;
margin: 15px;
}
}
@media (min-width: 768px) {
.change{
display: none;
}
}

It can be seen that the navigation bar above changes with the change of screen size, and finally all the items in the navigation bar are moved to a button in the upper right corner.
This demo is very simple, just used to record my first adaptive demo

The main syntax to note is:

1. @media (max-width: 768 px) {
CSS code;
}
//
"max-width limit width: 768px" mainly means that the following CSS code block will be executed only when the width of this control is less than 768px, otherwise the existing CSS code will be executed.
"min-width minimum width: 768px" mainly means that the following CSS code block will be executed only when the width of this control is greater than 768px.
2.
col-sm-6 col-md-4 col-lg-3
Mainly represents the bootstrap grid system, which corresponds to different grid distributions for small, medium, and large screens (the horizontal rows are 2, 4, 3, and the smallest is 1)

The above is all the content about how to use @media mobile adaptive style. I hope it will be helpful for everyone’s learning and solving problems. I also hope that everyone will support 123WORDPRESS.COM.