Home > Developer > Web Develop
CSS3 provides the concept of media Queries, which you can use to query the following data:
1, the width and height of the browser window;
2, the width and height of equipment;
3, the equipment hand-held direction, horizontal/vertical;
4, resolution.
The syntax format for @media rules is as follows:
@media: <smedia>{srules}
(1) <SM
Edia>: Specifies the device name. The CSS device types include the following:,
(2) {Srules}: Defines a style sheet.
Case:
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "Utf-8">5 <title></title>6 <styletype= "Text/css">7 . Wrapper{8 Border:1px solid #666;9 padding:5px 10px;Ten margin:40px; One } A . Viewing-area span{ - Color:#666; - Display:None; the } - /*max-width: If the width of the view window is less than 600 pixels, the box will turn magenta*/ - @media screen and (max-width:600px){ - . one{ + background:#FF99CC; - } + span.lt600{ A Display:Inline-block; } at } - /*Min-width: If the view window is larger than 900 pixels, the box will turn orange*/ - @media screen and (min-width:900px){ - . two{ - background:#F90; - } in span.gt900{ - Display:Inline-block; to } + } - /*min-width&max-width: If the width of the window is greater than 600 pixels and less than 900 pixels*/ the @media screen and (min-width:600px) and (max-width:900px){ * . three{ $ background:#9cf;Panax Notoginseng } - span.bt600-900{ the Display:Inline-block; + } A } the /*the style under Max device width is applied to the IE iphone device and the device has a maximum width of 480 pixels*/ + /*@media screen and (max-device-width:480px) { - . iphone{ $ background: #ccc; $ } - }*/ - </style> the </Head> - <Body>Wuyi <Divclass= "wrapper One">If the view window is less than 600 pixels, the box will have the program red</Div> the <Divclass= "wrapper ">If the view window is larger than 900 pixels, the box turns orange</Div> - <Divclass= "wrapper three">If the view window is between 600 pixels and 900 pixels, the box will turn blue</Div> Wu <Divclass= "wrapper iphone">The box can only be applied to IE iphone devices, and the maximum width of the device is 480 pixels</Div> - <Pclass= "Viewing-area"><Strong>Your current view width is</Strong>：<spanclass= "lt600">Less than 600</span><spanclass= "bt600-900">600-900</span><spanclass= "gt900">Greater than 900</span></P> About </Body> $ </HTML>
Results:
CSS Learning: Media Queries
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
