Implementation example of CSS screen size adaptation

Time:2020-11-20

In order to realize the adaptive screen size of CSS, CSS3 @ media query is introduced first

Usage and rules of media:

① The device on which the linked document will be displayed.

② Used to specify different styles for different media types.

Grammar:

@Media device name only (selection condition) not and (device selection condition), device two {srules}

example:

/*This is the status of matching the horizontal screen, the CSS code when the screen is horizontal*/

@media all and (orientation :landscape){}

/*This is the status of matching the vertical screen, and the CSS code for vertical screen*/

@media all and (orientation :portrait){}

@media X and (min-width:200px){}
/*X is the media type -- > such as print / screen / TV, etc*/

/*When the width is greater than 600px and less than 960, the footer structure is hidden*/

@media all and (min-height:640px) and (max-height:960px){
      footer{display:none;}
}

In practical application, the following code must be added to the HTML header file < head >:


<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 

Explanation:

Width = device width: the width is equal to the width of the current device

Initial scale: initial scale (default setting is 1.0)

Minimum scale: the minimum scale the user is allowed to zoom to (default setting is 1.0)

Maximum scale: the maximum scale the user is allowed to zoom to (default setting is 1.0)

User scale: whether users can zoom manually (the default setting is no, because we don’t want users to zoom in and out of the page)

Because there are many types of media, here is a link to the rookie tutorial:https://www.jb51.net/css/103906.html

The following are media type screens (for computer screens, tablets, smartphones, etc.):

The method of CSS adaptive screen size is as follows


@media screen and (min-width: 320px) and (max-width: 1156px){

              .site-bg-dl {
              position: fixed;
              height: 100%;
              width: 100%;
              z-index: 0;
              background-image: url(bjxzfwzx/images/bj1.png);
              background-size: cover;
              background-repeat: no-repeat;
              background-attachment: fixed;
              background-size:100% 100%;
              -moz-background-size:100% 100%;
            }
}

Explanation:

Tell the browser to execute this code when the screen is larger than 320px and less than 1156px;

You can customize the display style of different screens by adding the following contents to CSS:

/*Large screen: greater than or equal to 1200px*/
@media (min-width: 1200px) { ... }

/*Default*/
@media (min-width: 980px){...}

/*Resolution between tablet and small screen*/
@media (min-width: 768px) and (max-width: 979px) { ... }

/*Resolution between horizontally placed mobile phones and vertically placed flat plates*/
@media (max-width: 767px) { ... }

/*Horizontal mobile phones and smaller resolution devices*/
@media (max-width: 480px) { ... }

This article on the CSS screen size adaptive implementation example of the article introduced here, more related CSS screen adaptive content, please search the previous articles of developeppaer or continue to browse the related articles below, I hope you will support developeppaer more in the future!