CSS3 multimedia queries

CSS3's multimedia query inherits all the ideas of CSS2 multimedia types: instead of looking for the type of device, CSS3 displays adaptively according to the settings.

Media queries can be used to detect many things, such as:

The width and height of the viewport(window)

The width and height of the device

Orientation (intelligent Mobile phone horizontal screen, vertical screen).

Resolution

Currently, many devices such as Apple phones, Android phones, and tablets use multimedia queries.

Multimedia query syntax

Multimedia query consists of a variety of media and can contain one or more expressions. The expression returns true or false depending on whether the condition is true.

@media not|only mediatype and (expressions) {

CSS-Code ;

}

If the specified multimedia type matches the device type, the query result returns true, and the document will display the specified style on the matching device. Effect.

Unless you use the not or only operators, all styles will adapt to display on all devices.

not: not is used to exclude certain specific devices, such as @media not print (non-printing device).

only: Used to specify a special media type. For mobile devices that support Media Queries, if the only keyword exists, the mobile device's web browser will ignore the only keyword and directly apply the style file based on the following expression. For devices that do not support Media Queries but are capable of reading Media Type web browsers, this style file will be ignored when the only keyword is encountered.

all: All devices, this should be seen often.

Instance 1:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
 /*    小于200px*/   
        @media only screen and (max-width:200px ) {   
            #p{   
                background: red;   
            }   
        }   
/*    大于300px*/   
        @media only screen and (min-width:300px ) {   
            #p{   
                background: yellow;   
            }   
        }   
</style>
</head>
<body>
  <p id="p">小于200px背景变红色大于300px背景为黄色</p> 
</body>
</html>

Instance 2:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
    <style>  
        /body{background:blue;}/*宽度500px-800px之间+高度100px-400px之间 蓝色*/
        @media screen and (max-width:500px){body{background:green;}}/*宽度小于500px时 绿色*/
        @media screen and (min-width:800px){body{background:red;}}/*宽度大于800px时 红色*/
        @media screen and (max-height:100px){body{background:yellow;}}/*高度小于100px时 黄色*/
        @media screen and (min-height:400px){body{background:pink;}}/*高度大于400px时 粉色*/
    </style>  
</head>
<body>
    <p>效果演示，请缩小/扩大浏览器的窗口大小注意背景色的变化。逻辑如下：</p>
    <p>/*宽度500px-800px之间+高度100px-400px之间 蓝色*/</p>
    <p>/*宽度小于500px时 绿色*/</p>
    <p>/*宽度大于800px时 红色*/</p>
    <p>/*高度小于100px时 黄色*/</p>
    <p>/*高度大于400px时 粉色*/</p>
</body>
</html>

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"> <title>php.cn</title> <style> .wrapper {overflow:auto;} #main {margin-left: 4px;} #leftsidebar {float: none;width: auto;} #menulist {margin:0;padding:0;} .menuitem { background:#CDF0F6; border:1px solid #d4d4d4; border-radius:4px; list-style-type:none; margin:14px; padding:12px; } @media screen and (min-width: 300px) { #leftsidebar {width:200px;float:right;} #main {margin-left:216px;} } </style> </head> <body> <div class="wrapper"> <div id="leftsidebar"> <ul id="menulist"> <li class="menuitem">php</li> <li class="menuitem">js</li> <li class="menuitem">css</li> <li class="menuitem">html</li> <li class="menuitem">ios</li> </ul> </div> <div id="main"> <p>在屏幕可视窗口尺寸小于 300 像素时将菜单浮动到页面右侧。</p> </div> </div> </body> </html>

submit Reset Code

Automatic operation

CSS3 multimedia queries

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]