CSS screen size adaptive implementation example

CSS screen size adaptive implementation example

To achieve CSS screen size adaptation, we must first introduce the CSS3 @media media query:

Media usage and rules:

①On what device will the linked document be displayed?

②Used to specify different styles for different media types.

grammar:

@media device name only (selection condition) not (selection condition) and (device selection condition), device two {sRules}

Examples:

/* This is the CSS code for matching the horizontal screen state*/

@media all and (orientation :landscape){}

/* This is the CSS code for matching the vertical screen state*/

@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 960px, hide the footer structure*/

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

In actual application, you must first add the following code to the HTML header file <head>:

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

explain:

width = device-width: The width is equal to the width of the current device

initial-scale: The initial scale (the default setting is 1.0)

minimum-scale: The minimum scale to which the user is allowed to zoom (default setting is 1.0)

maximum-scale: The maximum scale to which the user is allowed to zoom (default setting is 1.0)

user-scalable: Whether the user can manually zoom in and out (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 the corresponding link of the novice tutorial: https://www.jb51.net/css/103906.html

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

CSS adaptive screen size method:

@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%;
            }
}

explain:

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

Add the following content in css to customize the display style of different screens:

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

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

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

/* Resolution between a horizontally placed phone and a vertically placed tablet*/
@media (max-width: 767px) { ... }

/* Mobile phones placed horizontally and devices with smaller resolutions*/
@media (max-width: 480px) { ... }

This is the end of this article about the implementation examples of CSS screen size adaptation. For more relevant CSS screen adaptation content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

<<:  Mobile browser Viewport parameters (web front-end design)

>>:  js uses FileReader to read local files or blobs

Recommend

Implementation of nested jump of vue routing view router-view

Table of contents 1. Modify the app.vue page 2. C...

Detailed explanation of Vue3's responsive principle

Table of contents Review of Vue2 responsive princ...

Briefly describe the difference between Redis and MySQL

We know that MySQL is a persistent storage, store...

How to solve the problem of zabbix monitoring causing Chinese garbled characters in the graphical interface due to PHP problems

Solve the problem of Chinese garbled characters i...

Summary of MySQL 8.0 Online DDL Quick Column Addition

Table of contents Problem Description Historical ...

Zen coding for editplus example code description

For example, he enters: XML/HTML Code div#page>...

Introduction to the use of anchors (named anchors) in HTML web pages

The following information is compiled from the Int...

Detailed tutorial on jdk installation and environment variable configuration under Win10

Table of contents Preface 1. Preparation 2. Insta...

mysql8.0.11 winx64 installation and configuration tutorial

The installation tutorial of mysql 8.0.11 winx64 ...

This article teaches you how to play with CSS border

Border Style The border-style property specifies ...

Enter two numbers in html to realize addition, subtraction, multiplication and division functions

1. parseFloat() function Make a simple calculator...

Build a Docker private warehouse (self-signed method)

In order to centrally manage the images we create...

Detailed explanation of Nginx version smooth upgrade solution

Table of contents background: Nginx smooth upgrad...

Detailed explanation of the WeChat applet request pre-processing method

question Because some of our pages request data i...

Detailed explanation of how Node.js handles ES6 modules

Table of contents 1. Differences between the two ...