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

CSS screen size adaptive implementation example

How to expand the disk partition for centos system

Five ways to traverse JavaScript arrays

Nginx cache files and dynamic files automatic balancing configuration script

Complete steps to upgrade Nginx http to https

MySQL 8.0.15 winx64 installation and configuration method graphic tutorial

Vue implements login type switching

Three methods of automatically completing commands in MySQL database

Detailed process of Vue front-end packaging

Docker Nginx container production and deployment implementation method

React High-Order Component HOC Usage Summary

Recommend

Solution to the problem that VMware15 virtual machine bridge mode cannot access the Internet

Detailed explanation of custom events of Vue components

Pure CSS code to achieve flow and dynamic line effects

Writing methods that should be prohibited in native JS

Mysql implements three functions for field splicing

Vue implements three-level navigation display and hiding

This article will help you thoroughly understand the specific use of cgroup in Docker

How to install and uninstall open-vswitch in Linux

MySQL Flush-List and dirty page flushing mechanism

Flex layout realizes left text overflow and omits right text adaptation

Detailed explanation of MySQL precompilation function

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

Linux exposes Sudo privilege escalation vulnerability, any user can also run root commands

MySQL error: Deadlock found when trying to get lock; try restarting transaction solution

How to open ports to the outside world in Alibaba Cloud Centos7.X