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
Solve the problem of docker pull image error
describe: Install VM under Windows 10, run Docker...
JavaScript to achieve full screen page scrolling effect
After I finished reading JavaScript DOM, I had a ...
How to use nginx to block a specified interface (URL)
1. Introduction Sometimes, after the web platform...
Detailed code for adding electron to the vue project
1. Add in package.json "main": "el...
Implementation of docker-compose deployment of zk+kafka+storm cluster
Cluster Deployment Overview 172.22.12.20 172.22.1...
MySQL GTID comprehensive summary
Table of contents 01 Introduction to GTID 02 How ...
MySQL slow query and query reconstruction method record
Preface What is a slow query and how to optimize ...
Simplify complex website navigation
<br />Navigation design is one of the main t...
Detailed steps to implement the Excel import function in Vue
1. Front-end-led implementation steps The first s...
docker run -v mounts data volumes abnormally, and the container status is always restarting
Problems: After adding the -v parameter to docker...
MySQL startup error 1067 and invalid recovery after changing character set and restarting
Downloaded the unzipped version of mysql-5.6.37-w...
Vue uses canvas handwriting input to recognize Chinese
Effect picture: Preface: Recently, I was working ...
CSS3 border effects
What is CSS# CSS (abbreviation of Cascading Style...
Detailed explanation of the concept of docker container layers
Table of contents 01 Container consistency 02 Con...
mysql5.7 remote access settings
Setting up remote access in mysql5.7 is not like ...