CSS3 multimedia query example

In this chapter we will demonstrate some multimedia query examples for you.

Example:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 媒体查询</title>
<style type="text/css">
    body { margin: 20px 0; }
    .clear{ clear:both}
    #container { width: 960px; margin: auto; }
    #wrapper { width: 740px; float: left; }
    .height { line-height: 168px; text-align: center; font-weight: bold; font-size: 1em; margin: 0 0 20px 0; }
    #main { width: 520px; float: right; background: yellow; }
    #left { width: 200px; float: left; background: orange; }
    #right { width: 200px; float: right; background: green; }
    /* 窗口宽度在1000px以上 */
    @media screen and (min-width: 1000px) {
    /* 3栏显示*/
    #container { width: 1000px; }
    #wrapper { width: 780px; float: left; }
    #main { width: 560px; float: right; }
    #left { width: 200px; float: left; }
    #right { width: 200px; float: right; }
    }
    /* 窗口宽度在640px-999px */
    @media screen and (min-width: 640px) and (max-width: 999px) {
    /* 2栏显示 */
    #container { width: 640px; }
    #wrapper { width: 640px; float: none; }
    .height { line-height: 200px; }
    #main { width: 420px; float: right; }
    #left { width: 200px; float: left; }
    #right { width: 100%; float: none; clear: both; line-height: 100px; }
    }
    /* 窗口宽度在639px以下 */
    @media screen and (max-width: 639px) {
    /* １栏显示 */
    #container { width: 100%; }
    #wrapper { width: 100%; float: none; }
    body { margin: 20px; }
    .height { line-height: 300px; }
    #main { width: 100%; float: none; }
    #left { width: 100%; float: none; line-height: 100px; }
    #right { width: 100%; float: none; line-height: 100px; }
    }
    /*CSS3随分辨率改变当前样式显现*/
    .wrapper {padding: 5px 100px; margin:8px auto;width:70%; text-align: center; border: solid 1px #999; color: #999; }
    .viewing-area{ text-align:center}
    .viewing-area span { color: #666; display: none; }
    @media screen and (max-width: 600px) {
    .one { background: red; border: solid 1px #000; color: #fff; }
    span.ppi600 { display: inline-block; }
    }
    @media screen and (min-width: 900px) {
    .two { background: red; border: solid 1px #000; color: #fff; }
    span.ppi900 { display: inline-block; }
    }
    @media screen and (min-width: 600px) and (max-width: 900px) {
    .three { background: red; border: solid 1px #000; color: #fff; }
    span.ppi600-900 { display: inline-block; }
    }
    @media screen and (max-device-width: 480px) {
    .iphone { background: #ccc; }
    }
</style>
</head>
<body>
    <div id="container">
    <div id="wrapper">
    <div id="main" class="height">主栏</div>
    <div id="left" class="height">左栏</div>
    </div>
    <div id="right" class="height">右栏</div>
    </div>
    <div class="clear"></div>
    <p class="viewing-area"><strong>当前视图宽度:</strong><span class="ppi600">小于600px</span><span class="ppi600-900">在600 - 900px之间</span><span class="ppi900">大于900px</span></p>
    <div class="wrapper one">窗口宽度小于600像素</div>
    <div class="wrapper two">窗口宽度大于900像素</div>
    <div class="wrapper three">窗口宽度介于600像素到900像素之间</div>
    <div class="wrapper iphone">IE iPhone设备，最大宽度为480像素。</div>
</body>
</html>

700 to 1000px - will add a background Color

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
ul {
    list-style-type: none;
}
ul li a {
    color: green;
    text-decoration: none;
    padding: 3px; 
    display: block;
}
@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background-color:yellow;
    }
}
@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "name : ";
        font-style: italic;
        color: #666666;
    }
}
</style>
</head>
<body>
<h1>改变浏览器窗口大小，查看效果!</h1>
<ul>
  <li><a href="#">Doe</a></li>
  <li><a href="#">Moe</a></li>
  <li><a href="#">Panda</a></li>
</ul>
</body>
</html>

Greater than 1151px Width - Add background

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
ul {
    list-style-type: none;
}
ul li a {
    color: green;
    text-decoration: none;
    padding: 3px; 
    display: block;
}
@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
    ul li a {
        padding-left: 30px;
        background-color:pink;
    }
}
@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "name: ";
        font-style: italic;
        color: #666666;
    }
}
@media screen and (min-width: 1001px) {
    ul li a:after {
        content: " (" attr(data-email) ")";
        font-size: 12px;
        font-style: italic;
        color: #666666;
    }
}
</style>
</head>
<body>
<h1>改变浏览器窗口大小，查看效果!</h1>
<ul>
  <li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">Doe</a></li>
  <li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Moe</a></li>
  <li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Panda</a></li>
</ul>
</body>
</html>

Continuing Learning

new file

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS3 媒体查询</title> <style type="text/css"> body { margin: 20px 0; } .clear{ clear:both} #container { width: 960px; margin: auto; } #wrapper { width: 740px; float: left; } .height { line-height: 168px; text-align: center; font-weight: bold; font-size: 1em; margin: 0 0 20px 0; } #main { width: 520px; float: right; background: yellow; } #left { width: 200px; float: left; background: orange; } #right { width: 200px; float: right; background: green; } /* 窗口宽度在1000px以上 */ @media screen and (min-width: 1000px) { /* 3栏显示*/ #container { width: 1000px; } #wrapper { width: 780px; float: left; } #main { width: 560px; float: right; } #left { width: 200px; float: left; } #right { width: 200px; float: right; } } /* 窗口宽度在640px-999px */ @media screen and (min-width: 640px) and (max-width: 999px) { /* 2栏显示 */ #container { width: 640px; } #wrapper { width: 640px; float: none; } .height { line-height: 200px; } #main { width: 420px; float: right; } #left { width: 200px; float: left; } #right { width: 100%; float: none; clear: both; line-height: 100px; } } /* 窗口宽度在639px以下 */ @media screen and (max-width: 639px) { /* １栏显示 */ #container { width: 100%; } #wrapper { width: 100%; float: none; } body { margin: 20px; } .height { line-height: 300px; } #main { width: 100%; float: none; } #left { width: 100%; float: none; line-height: 100px; } #right { width: 100%; float: none; line-height: 100px; } } /*CSS3随分辨率改变当前样式显现*/ .wrapper {padding: 5px 100px; margin:8px auto;width:70%; text-align: center; border: solid 1px #999; color: #999; } .viewing-area{ text-align:center} .viewing-area span { color: #666; display: none; } @media screen and (max-width: 600px) { .one { background: red; border: solid 1px #000; color: #fff; } span.ppi600 { display: inline-block; } } @media screen and (min-width: 900px) { .two { background: red; border: solid 1px #000; color: #fff; } span.ppi900 { display: inline-block; } } @media screen and (min-width: 600px) and (max-width: 900px) { .three { background: red; border: solid 1px #000; color: #fff; } span.ppi600-900 { display: inline-block; } } @media screen and (max-device-width: 480px) { .iphone { background: #ccc; } } </style> </head> <body> <div id="container"> <div id="wrapper"> <div id="main" class="height">主栏</div> <div id="left" class="height">左栏</div> </div> <div id="right" class="height">右栏</div> </div> <div class="clear"></div> <p class="viewing-area"><strong>当前视图宽度:</strong><span class="ppi600">小于600px</span><span class="ppi600-900">在600 - 900px之间</span><span class="ppi900">大于900px</span></p> <div class="wrapper one">窗口宽度小于600像素</div> <div class="wrapper two">窗口宽度大于900像素</div> <div class="wrapper three">窗口宽度介于600像素到900像素之间</div> <div class="wrapper iphone">IE iPhone设备，最大宽度为480像素。</div> </body> </html>

submit Reset Code

Automatic operation

CSS3 multimedia query example

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]