Multimedia query role:
It is a CSS syntax. According to characteristics of the browser, typically provide a screen or browser width CSS rules. We give different media types, to set different CSS style rules. That is, for different media types (such as mobile phones, tablets, computers, monitors, televisions, etc.) set different CSS style rules.
Terms usually applied are: to adapt the layout of multiple pages at the same time, such as at the same time (page display phone and computer) in
<!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;
}
}
</style>
</head>
<body>
<P> Reset browser to view size. When the width of the browser window is smaller than 300 pixels, the background color will become light blue, or light green. <Input type = "button" onclick = "resize_window ()" value = "see the effect"> </ p>
<SCRIPT>
<!--
function resize_window() {
window.open ('http://www.w3cschool.cc/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')
}
// write a line
-->
</SCRIPT>
</body>
</html>