You need to add a meta tag to identify width requests and media to perform the action when the width is different. It would also be useful to add a percentage to your css elements, not pixels.
HTML code:
<!doctype html> <meta name="viewport" content="width=device-width"/>
add a meta tag so that the page identifies the width of the device. see mozilla will take it
In this example, the query will be applied for four different device widths in the <p> and in the background.
<body> <h1>Media Queries Examples</h1> <p>Increase or decrease the size of your window to see the background color change</p> </body>
CSS code:
p { font-family: arial,san-serif; font-size: 13px; font-color: black; } h1 { font-size:30px; } @media screen and (min-width:761px) { body { background-color:white; } h1 { color:red; } } @media screen and (max-width:760px) { body { background-color: #333; } h1 { color:red; } p { color: white; } } @media screen and (max-width:480px) { body { background-color: #807f83; } h1 { color:white; } p { color: white; } } @media screen and (max-width:360px) { body { background-color: #0096d6; } h1 { color:white; font-size:25px; } p { color: white; } }
So using @media Screen inside your css triggers a request for the screen. You can use @Media all for all media devices (see Further reading), when the width of the device reaches the limits of this request, then css will be applied to the element in question. see current example . When you drag the window in the JSFiddle window, it will change the background color and the recording color if the request is executed. You can apply the same logic to phones, tablets, TVs and desktops. Media Queries for Standard Devices - CSS Tricks
This example was provided by an anonymous JSFiddle user. It gives a clear example of what you need to make sure that your elements are designed in accordance with this unit. I do not take a loan.
additional literature
- Microsoft - Media Requests
- @ Media Rules - W3C
- Responsive Web Design Wiki