role

“Media Query”, as the name implies, is to query the current media device belongs to

The greatest use of media queries is to adapt layout and element size depending on the window size of the device viewing the page

The basic grammar

/* Normal style */
@media(Condition) {/** the style of the condition **/
}
Copy the code

or

<link rel="stylesheet" media="(conditions)" href="CSS files introduced when conditions are met">
Copy the code

Syntactic logic in conditions

The main logic is as follows:

  • and
  • 【 OR 】
  • Select * from ‘not’;
  • The only operator is used to apply a style only if the media query matches successfully, which prevents the selected style from being applied in older browsers.
@media (min-width: 600px) and (max-width: 700px) {
    /** Window width in 600-700 pixels style **/
}
@media (not min-width: 600px) and (not max-width: 700px) {
    /** A window width of less than 600 or more than 700 pixels **/
}
@media (max-width: 600px.min-width: 700px) {
    /** A window width of less than 600 or more than 700 pixels **/
}
Copy the code

Use the sample

The sample a

Functions:1.By default, the background color of the left column is yellow2.When the browser window is smaller than400At pixel, the background color of the left column becomes orange3.As the window continues to shrink, less than300When pixels, the background color of the left column becomes redCopy the code

@media (max-width: 400px) {
    .leftColumn {
         background-color:orange; }}@media (max-width: 300px) {
    .leftColumn {
         background-color:OrangeRed; }}Copy the code

Example 2

Implementation functions: (1By default, the page is split into left and right columns. Left column fixed width, right column adaptive width (2Most mobile websites use only one column, because the screen is small and two columns side by side don't look good. So when the browser window width is less than568At pixels, the left navigation bar moves below the main content.Copy the code
/* The left column has a fixed width and the right column has an adaptive width (via float and negative margin) */
aside.NavSidebar
{
  padding: 5px 15px 5px 15px;
  width: 203px;
  background-color:#f9f9f9;
  font-size: small;
  float:left;
  margin-right: -100%;
}
Copy the code

The effect

/* When the browser window width is less than 568 pixels, the left navigation bar moves below the main content. (Since the left column is defined below the main content in an HTML page, simply de-float the left and right columns and reset the width (each column occupies the available width).) */
.ContentOuter {
  float: right;
  width:100%; 
}
.Content {
  padding: 20px;
  margin-left:233px;
}
@media (max-width: 700px) {
    aside.NavSidebar {
         float:none;
         width:auto;
         margin-right:auto;
    }
    .ContentOuter {
         float:none;
         width:auto;
    }
    .Content {
          margin-left:0px; }}Copy the code

The effect

Replace the entire stylesheet

<! -- Use hangge. CSS for Windows larger than 568px or hangge_small. CSS for Windows larger than 568px -->
<head>
  <link rel="stylesheet" href="hangge.css">
  <link rel="stylesheet" media="(max-width: 568px)" href="hangge_small.css">
</head>
Copy the code

It can also be used to identify mobile devices

Use max-device-width to distinguish between a normal computer and a mobile device. As a rule of thumb, setting max-device-width to 568 pixels should cover current iPhone and Android phones (both landscape and vertical)

<link rel="stylesheet" media="(max-device-width: 568px)" href="hangge_mpbile.css">
Copy the code