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
How to run .sh files in Linux system
There are two ways to run .sh files in Linux syst...
Example of using CSS to achieve floating effect when mouse moves over card
principle Set a shadow on the element when hoveri...
Detailed explanation of ensuring the consistency of MySQL views (with check option)
This article uses an example to illustrate how to...
Detailed explanation of Docker data backup and recovery process
The data backup operation is very easy. Execute t...
Detailed explanation of Shell script control docker container startup order
1. Problems encountered In the process of distrib...
Detailed explanation of Vue3 encapsulation Message message prompt instance function
Table of contents Vue3 encapsulation message prom...
Detailed analysis of the difference between Ref and Reactive in Vue3.0
Table of contents Ref and Reactive Ref Reactive T...
Implement a simple search engine based on MySQL
Table of contents Implementing a search engine ba...
Tomcat CentOS installation process diagram
Tomcat CentOS Installation This installation tuto...
Tomcat Server Getting Started Super Detailed Tutorial
Table of contents 1. Some concepts of Tomcat –1, ...
Setting up VMware vSphere in VMware Workstation (Graphic Tutorial)
VMware vSphere is the industry's leading and ...
How to use regular expression query in MySql
Regular expressions are often used to search and ...
Super simple implementation of Docker to build a personal blog system
Install Docker Update the yum package to the late...
Detailed explanation of the relationship between Linux and GNU systems
Table of contents What is the Linux system that w...
The difference between key and index in MySQL
Let's look at the code first: ALTER TABLE rep...