Article directory
How does mobile responsive CSS display different @media screen responsive layouts according to different resolutions?
The following article will introduce how to use CSS to determine different resolutions and display different width layouts to achieve adaptive width.
Friends in need can refer to it, I hope it will be helpful to everyone.
The difference between @media and @media screen printing web pages
- If the css needs to be used in a printing device, use @media, otherwise, use @media screen.
- However, this is not necessarily true. In fact, if you replace "screen" with "print" and write it as @media print, then the CSS can be used on the printing device;
- But be careful, the css declared by @media print is only valid on printing devices.
1. DIVCSS small case description
We first set a DIV box CSS named ".abc", set its height to 300px, and set the CSS border to black;
- and settings
margin:0 autoThe layout is centered, and these two styles are pre-set for easy viewing.
We manually drag the browser to display the width, and then observe how the width of the box changes:
- When the width of the browser is adjusted to a width of not more than 500px, 100px is displayed corresponding to the width of the box;
- When the width of the browser is adjusted to be less than 901px, ".abc" is displayed corresponding to the width of the box, which displays 200px;
- When the browser width is adjusted to be greater than 1201px, the width of the box object displays 1200px;
- When it is less than 1200px, the display width is 900px.
2, CSS mobile phone mobile terminal adaptive code
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 901px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */- It should be noted that the CSS code order is typesetting CSS from large to small (judging that the larger the browser width, the higher the front).
- This is because of the logical relationship, @media's judgment of CSS debugging will cause the judgment to fail.
3. HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
</style>
</head>
<body>
<div class="abc">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div>
</body>
</html>Note: device-aspect-ratio
- device-aspect-ratio can be used to fit devices with specific screen aspect ratios, which is also a useful property.
- For example, our page wants to define a style for normal screens with an aspect ratio of 4:3.
- Then for 16:9 and 16:10 widescreen, define another style, such as adaptive width and fixed width:
- @media only screen and (device-aspect-ratio:4/3)
4. Compatible with major browsers HTML+CSS+JS source code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
</style>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div class="abc">DIV宽度会随浏览器宽度变化哦，改变浏览器宽度</div>
</body>
</html>The above is the mobile terminal adaptive CSS, which displays different @media screen responsive detailed content according to different screens.
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Shared "Mobile Adaptive CSS Different Screens Display Different @media Screen Responsiveness", which is helpful to you.
Welcome to share the link of this article:https://www.chenweiliang.com/cwl-2074.html
Welcome to the Telegram channel of Chen Weiliang's blog to get the latest updates!
📚 This guide contains huge value, 🌟This is a rare opportunity, don’t miss it! ⏰⌛💨
Share and like if you like!
Your sharing and likes are our continuous motivation!