当前位置:网站首页>Multimedia query
Multimedia query
2022-07-05 03:28:00 【Lao Zhang typed the code online】
min-device-width Follow min-width The difference between
@media screen and (min-device-width:375px) and (max-device-width:540px){
#div0{
background: red;
}
}
@media screen and (min-width:541px) and (max-width:800px){
#div0{
background: blue;
}
}
min-device-width Is the width of the entire display area of the device , for example , Real device screen width .
min-width Is the width of the target display area , for example , Browser width .
Example :
If you use min-device-width, So in PC When browsing a web page on a browser , When the browser percentage is reduced or enlarged, it is not executed CSS Of ,PC The equipment will not change .
But if max-width, When zooming out or zooming in on the browser, you execute CSS Of , Because browsers ( Display area ) The size has changed .
If you use max-device-width, When the mobile phone changes from vertical to horizontal ,CSS It's not enforced , Because the width of the mobile phone has not changed .
If you use max-width, So when the mobile phone changes from vertical to horizontal ,CSS It's Executive , Because the display area has changed .
In actual development, we can flexibly use these two respective characteristics to achieve responsive development
Multimedia query is often introduced
1. Internal style
Inside the current component style Directly in the label @media Compiling
2. External style
Use in components link Introduce externally created css Style sheets
3. Inside style Label style
utilize style On the label media attribute , Create multiple... According to different sizes of equipment style label (link It's also on the label media attribute , therefore link You can also import more )
边栏推荐
- Leetcode92. reverse linked list II
- Apache build web host
- Share the newly released web application development framework based on blazor Technology
- IPv6 experiment
- Talk about the SQL server version of DTM sub transaction barrier function
- 单项框 复选框
- Logstash、Fluentd、Fluent Bit、Vector? How to choose the appropriate open source log collector
- 2. Common request methods
- Delphi free memory
- SPI and IIC communication protocol
猜你喜欢
Learning notes of raspberry pie 4B - IO communication (I2C)
Azkaban installation and deployment
Multi person online anonymous chat room / private chat room source code / support the creation of multiple chat rooms at the same time
Huawei MPLS experiment
为什么腾讯阿里等互联网大厂诞生的好产品越来越少?
Devtools的简单使用
Flume configuration 4 - customize mysqlsource
C file in keil cannot be compiled
Share the newly released web application development framework based on blazor Technology
Subversive cognition: what does SRE do?
随机推荐
Design and implementation of community hospital information system
Design and implementation of campus epidemic prevention and control system based on SSM
PHP cli getting input from user and then dumping into variable possible?
Three line by line explanations of the source code of anchor free series network yolox (a total of ten articles, which are guaranteed to be explained line by line. After reading it, you can change the
Anchor free series network yolox source code line by line explanation four (a total of ten, ensure line by line explanation, after reading, you can change the network at will, not just as a participan
Usage scenarios and solutions of ledger sharing
Anchor free series network yolox source code line by line explanation Part 2 (a total of 10, ensure to explain line by line, after reading, you can change the network at will, not just as a participan
2021 Li Hongyi machine learning (3): what if neural network training fails
Leetcode92. reverse linked list II
Asp+access campus network goods trading platform
Utilisation simple de devtools
Smart pointer shared_ PTR and weak_ Difference of PTR
Design and implementation of high availability website architecture
Cette ADB MySQL prend - elle en charge SQL Server?
SQL performance optimization skills
为什么腾讯阿里等互联网大厂诞生的好产品越来越少?
单项框 复选框
Dart series: collection of best practices
v-if VS v-show 2.0
Delphi read / write JSON format