Different media types, devices, conditional styles apply different types
Simply put: tell the browser or other operating environment that when condition a is met, style a will take effect; when condition b is met, style b will take effect
Achievable effect
- Monitor the height (vh) and width (vw) of the screen
- The height and height of the listening device
- Monitor device orientation (such as vertical and horizontal screens of mobile phones)
- monitor resolution (
resolution), etc.
Instructions
use in css
@media not|only mediatype and (mediafeature and|or|not mediafeature) {
// 自定义样式
}
use in html
<!-- 宽度大于 900px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<!-- 宽度小于或等于 600px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
condition (mediafeature)
When the screen size is different, different styles are displayed, specifically the following 4 types:
- max-width : The maximum visual width that satisfies the condition , if it is less than this, the defined style will be displayed
- min-width : The minimum visual width that satisfies the condition , if it is greater than this, the defined style will be displayed
- max-height : The maximum visual height that satisfies the condition , if it is less than this, the defined style will be displayed
- min-height : The minimum visual height that satisfies the condition , and the defined style will be displayed if it is greater than this
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
body {
background-color:lightgreen;
}
@media screen and (max-width: 300px) {
body {
background-color:lightblue; // 淡蓝色
}
}
@media screen and (min-width: 300px){
body {
background-color:darkred; // 深红色
}
}
</style>
</head>
<body>
<p>重置浏览器查看大小。当浏览器窗口的宽度小于 300 像素时，背景颜色会变成淡蓝，否则是淡绿色。<input type="button" onclick="resize_window()" value="查看效果"></p>
<SCRIPT>
<!--
function resize_window() {
window.open ('https://www.runoob.com/try/demo_source/trycss3_media_example1.htm','newwindow','height=299,width=299,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')
}
//写成一行
-->
</SCRIPT>
</body>
</html>
result:
media type
@mediaDifferent styles can be set for different media types, specifically as follows:
- all : All multimedia type devices
- print : printer and printer preview
- screen : computer screen, mobile phone, tablet, etc.
- speech : screen reader
Common keywords
not, and and only can be used to jointly construct complex media queries, use to ,separate multiple media queries, and combine them into one rule
not
Excluded media queries
only
Media queries that only satisfy
// 【屏幕】生效样式
@media screen and (max-width: 300px) {
body {
background-color:lightblue; // 淡蓝色
}
}
// 【打印机设备】生效样式
@media only print and (min-width: 300px){
body {
background-color:darkred; // 深红色
}
}
result:
and
Receive multiple media query rules
comma(,)
Satisfiable multiple media queries, similar toor
@media print, screen and (min-width: 300px){
body {
background-color:darkorange; // 深橙色
}
}
result:
Note: For media types (Media types), generally all types are defaulted, for example:
// 默认【所有设备-all】生效样式
@media (min-width: 300px){
body {
background-color: darkgreen; // 深绿色
}
}
