Home > Industries > Media
1, the role of media inquiries
@media (Media-feature-name:value) {
/* The style applied when the condition is met * *
}
Above is the basic structure of media query, depending on the device to view the page some important information (such as screen size, resolution, color bit depth, etc.), the page can apply different styles and even replace the entire style sheet.
If the current condition of the browser matches the condition in the parentheses, it takes those styles in curly braces. If they do not match, the browser ignores the styles.
Note: Browsers always take a style that is outside the @media code block. The media query style that satisfies the criteria is applied on a different style basis. For this reason, conditional media query styles often cover other styles, such as hiding the visible elements before, moving the blocks around, adjusting the font size, and so on.
2, the most commonly used media features in media queries (feature)
Attribute Name Value Application Scenario
Width
Min-width
The width of the max-width display area, which is the print surface for the printer, changes the layout to accommodate very narrow (e.g., mobile) or very wide displays.
Height
Min-height
Max-height Display area height change layout to accommodate very long or very short displays
Device-width
Min-device-width
Max-device-width the width of the current computer or device screen
(or the width of the paper when printed) adjust the layout according to different devices (such as mobile phones)
Device-height
Min-device-height
The height of the max-device-height screen or paper adjusts the layout according to different devices (such as mobile phones)
Orientation Landscape (Landscape) or Portrait (portrait) adjusts the layout according to the orientation of the device
Device-aspect-ratio
Min-device-aspect-ratio
Max-device-aspect-ratio the height ratio of the display area (1/1 is a square) adjusts the style according to the window shape (the problem can be more complex)
Color
Min-color
Bit depth of max-color screen color
(1-bit is black and white, the current mainstream monitor is 24 bits) check if the color output is supported (for example, black and white printing)
or the number of colors supported
Although there are so many media features, but the most popular most commonly used is the following:
Max-device-width: Used to create a mobile version of the Web site
Max-width: Used to set different styles for window widths
Orientation: Used to change layouts based on the horizontal or vertical of a tablet computer or ipad
3, using sample one
By default, the background color of the left column is yellow, and when the browser window is less than 400 pixels, the background color of the left column turns orange. When the window continues to shrink, less than 300 pixels, the background color of the left column turns red.
<meta charset= "UTF-8" >
<title>hangge.com</title>
<style>
* {
margin:0px;
padding:0px;
}
. leftcolumn {
width:50%;
Float:left;
Background-color:yellow;
height:300px;
}
. rightcolumn {
width:50%;
Float:left;
Background-color: #7FFF9B;
height:300px;
}
@media (max-width:400px) {
. leftcolumn {
Background-color:orange;
}
}
@media (max-width:300px) {
. leftcolumn {
background-color:orangered;
}
}
</style>
<body>
<div class= "Leftcolumn" >
Left
</div>
<div class= "Rightcolumn" >
Right
</div>
</body>
4, using sample two
Here is a classic two-column layout of the page, we want to use the media query to define a different style, so that it can adapt to mobile browsers and desktop browsers:
(1) By default, the page is divided into left and right two columns. Left column fixed width, right column adaptive width (implemented by floating and negative margins)
(2) The general mobile version of the Web site are only one column, because the screen is small, side two columns is not good-looking. So when the browser window is less than 568 pixels wide, the left navigation bar is moved below the main content. (Because the left column in the HTML page is defined under the main content, you can simply remove the left and right columns by floating, resetting the column width (each column fills the available width)
Style Hangge.css
Article, aside, figure, figcaption, footer, header, Hgroup, nav, section, summary {
Display:block;
}
*{
margin:0px;
padding:0px;
}
Body {
Font-size:medium;
font-family: "Helvetica", "Hiragino Sans GB", "Microsoft Yahei", Sans-serif;
}
A
Color: #999;
Text-decoration:none;
Cursor:pointer
}
a:hover {
Color: #5188a6;
Text-decoration:none
}
#wrapper {
max-width:853px;
}
Header. Siteheader {
padding:10px;
Background: #000000;
}
aside. Navsidebar
{
padding:5px 15px 5px 15px;
width:203px;
Background-color: #f9f9f9;
Font-size:small;
Float:left;
Margin-right:-100%;
}
aside. Navsidebar H2 {
Color: #6B6E3F;
Border-bottom:thin #6B6E3F Solid;
margin-bottom:10px;
margin-top:20px;
}
aside. Navsidebar ul {
padding-left:15px;
}
aside. Navsidebar Li {
padding-bottom:8px;
}
. Contentouter {
Float:right;
width:100%;
}
. Content {
padding:20px;
margin-left:233px;
}
@media (max-width:700px) {
aside. Navsidebar {
Float:none;
Width:auto;
Margin-right:auto;
}
. Contentouter {
Float:none;
Width:auto;
}
. Content {
margin-left:0px;
}
}
. Content H3 {
Color: #24486C;
margin-bottom:2px;
Font-size:medium;
}
. Content p {
margin-top:0px;
}
Header. Articleheader {
padding:10px;
margin:10px;
Text-align:center;
}
Header. Articleheader H2 {
Font-size:xx-large;
}
Footer {
Background: #333333;
Color: #c0c0c0;
padding:10px;
Text-align:center;
Font-size:x-small;
Clear:both;
}
Footer. Disclaimer {
Font-style:italic;
}
Footer P {
margin:3px;
}
Page code:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title> Sailing Song </title>
<link rel= "stylesheet" href= "Hangge.css" >
<body>
<div id= "wrapper" >
<H1 style= "Display:none" >hangge.com
<main class= "Contentouter" >
<article class= "Content" >
<p> I talked about how to make the program request to run in the background short. But this extra time is limited. </p>
<br/>
<p> I talked about how to make the program request to run in the background short. But this extra time is limited. </p>
<br/>
<p> I talked about how to make the program request to run in the background short. </p>
</article>
</main>
<aside class= "Navsidebar" >
<nav>
<ul>
<li><a href= "..." >swift-commissioned (delegate) introduction, and use of samples </a></li>
<li><a href= "..." >swift-After the program hangs, can continue to run tasks in the background </a></li>
<li><a href= "..." >swift-generating random number generators with no duplicates </a></li>
<li><a href= "..." >swift-ftp client's production (using Rebekka library) </a></li>
<li><a href= "..." >swift-a simple animation effect (blocks moving back and forth) </a></li>
<li><a href= "..." >more ...</a></li>
</ul>
</nav>
</aside>
<footer>
<p class= "Disclaimer" >hangge.com copyright, not allowed to reprint without permission </p>
</footer>
</div>
</body>
5, advanced conditions for media inquiries
(1) Using and keyword splicing media query block
/** Normal Style **/
@media (min-width:600px) and (max-width:700px) {
/** window width in 600-700-pixel style **/
}
@media (min-width:500px) and (max-width:599.99px) {
/** window width in 500-600-pixel style **/
}
@media (max-width:499.99px) {
/** window width is less than 500 pixel style **/
}
(2) Use the NOT keyword (the same effect as above)
/** Normal Style **/
@media (not max-width:600px) and (max-width:700px) {
/** window width in 600-700-pixel style **/
}
@media (not max-width:500px) and (max-width:600px) {
/** window width in 500-600-pixel style **/
}
@media (max-width:500px) {
/** window width is less than 500 pixel style **/
}
6, replace the entire style sheet
Creating a new style sheet is easier to manage if the style changes a lot. After you create a stylesheet, you can use a media query to create a style sheet link.
(1) When the page width is less than 568 pixels, the new style is applied and superimposed on the previously existing style.
<link rel= "stylesheet" href= "Hangge.css" >
<link rel= "stylesheet" media= "(max-width:568px)" href= "Hangge_small.css" >
(2) The sample below makes several styles completely independent, without stacking
<link rel= "stylesheet" media= "(min-width:568.01px)" href= "Hangge.css" >
<link rel= "stylesheet" media= "(max-width:568px)" href= "Hangge_small.css" >
But like the older version of IE doesn't understand the media query ignores the two stylesheets, so we need to use conditional annotations to introduce the standard style sheet:
<link rel= "stylesheet" media= "(min-width:568.01px)" href= "Hangge.css" >
<link rel= "stylesheet" media= "(max-width:568px)" href= "Hangge_small.css" >
<!--[If Lt IE 9]>
<link rel= "stylesheet" href= "Hangge.css" >
<! [endif]-->
7, identify the specific mobile device
(1) Detection of mobile phones
Use Max-device-width to differentiate between common computers and mobile devices. Based on experience, setting the Max-device-width to 568 pixels can cover the current iphone and Android phone (regardless of landscape or vertical):
<link rel= "stylesheet" media= "(max-device-width:568px)" href= "Hangge_mpbile.css" >
Note: The above rules for high resolution screens are also applicable, due to the introduction of a pixel ratio (pixel ratio) to a high-screen handset.
Take IPhone5 for example, although its physical pixel is: 640 pixel *1136 pixels, but its pixel ratio is 2 (two physical pixels correspond to a CSS pixel). So its declared CSS pixel is: 320 pixel *568 pixels.
(2) Test plate
For tablets like the ipad, users often change direction. Changing direction will change max-width, but it will not change max-device-width. Regardless of vertical or horizontal, the ipad always reports that its device is 768 pixels wide.
So we're going to combine the max-device-width and orientation attributes to differentiate the ipad from the direction of applying different styles:
7
<link rel= "stylesheet"
Media= "(max-device-width:768px) and (orientation:portrait)"
href= "Ipad_portrait.css" >
<link rel= "stylesheet"
Media= "(max-device-width:768px) and (Orientation:landscape)"
href= "Ipad_landscape.css" >
(The above rules are not limited to the ipad, other devices with similar screen sizes (768 pixels or smaller) are also available)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
