Media query Syntax:
1. Inline notation: Must have spaces after and
@media screen and (min-width:960px//Judging browser size conditions) {
Body{background:red}//General style
}
2. External wording: When the screen meets the criteria to connect the href CSS file
<link= ' stylesheet ' media= ' screen and (min-width:960) ' href= ' xx.css '/>
<link= ' stylesheet ' media= ' screen and (min-width:960) and (max-width:1960) ' href= ' xx.css '/>
Media queries display different interfaces on different screens in two ways:
1. Write a different style after the braces in different media queries are determined
2. Write two of the same HTML internal content, through the media query to determine the interface, show one, hide another
1 <!DOCTYPE HTML>2 <HTML>3 <HeadLang= "en">4 <MetaCharSet= "UTF-8">5 <title></title>6 <style>7 *{8 margin:0;9 padding:0;Ten } One . Big{ /*1*/ A width:1000px; - Outline:1px solid #000; - margin:Auto; the Color:#fff; - } - . Big>div{ - width:50%; + Height:200px; - Outline:1px dashed Yellow; + background:Orange; A float: Left; at } - . Big2{ /*2*/ - width:600px; - Outline:1px solid #000; - margin:Auto; - Color:#fff; in Display:None; - } to . Big2>div{ + width:100%; - Height:200px; the Outline:1px dashed Yellow; * background:Lightpink; $ Clear:both;Panax Notoginseng } - @media screen and (max-width:640px){ the . Big{display:None} + . Big2{Display:Block} A } the </style> + </Head> - <Body> $ <Divclass= "Big"> $ <Div>1</Div> - <Div>2</Div> - <Div>3</Div> the <Div>4</Div> - <Div>5</Div>Wuyi <Div>6</Div> the </Div> - Wu <Divclass= "Big2"> - <Div>1</Div> About <Div>2</Div> $ <Div>3</Div> - <Div>4</Div> - <Div>5</Div> - <Div>6</Div> A </Div> + </Body> the </HTML>
Media Queries (PC-side, mobile-side layouts)
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
