Home > Industries > Media
Media queries can set CSS styles based on device display characteristics .
Media query Syntax:
1, written in the style:
@media conditions
@media screen and (max-width:550px) {/* style * /}2, written in the link tag
<rel= "stylesheet" media= "screen and (max-width:550px)" href = "Media.css" />
Media queries are commonly used to detect viewport widths (width) and screen widths (device-width).
Try it:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Media Enquiry</title> <style>Body{Background-color:Grey; } /*Window < 960px*/@media screen and (max-width:960px){body{Background:Red; } } /*Window < 768px*/@media screen and (max-width:768px){body{Background:Orange; } } /*Window < 550px*/@media screen and (max-width:550px){body{Background:Yellow; } } /*Window < 320px*/@media screen and (max-width:320px){body{Background:Green; } } </style></Head><Body>changes the width of the browser window, and the background color changes depending on the current viewport size. </Body></HTML>
Responsive layout 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
