Media query does not work on non-responsive site

Question

Media query does not work on non-responsive site

Navigation

#1 by (3 votes)

1

Good afternoon everyone, I put media query css3 to run on a fixed-width site, but it does not work. Only works on responsive sites?

link

@media only screen and (max-width: 959px) {
.tit-h2{margin-left:2px!important;}
#rodape{
width: 104%;
height: 180px;
background: #F68624;
position: absolute;
bottom: 0;}}

Thank you all.

css3 media-queries

asked by anonymous 19.02.2015 / 15:45

1 answer

Transform a function from JavaScript to PHP How to plot routes in a C # Windows Forms application from latitude and longitude

score 3 · Answer 1

You should put METATAG VIEWPORT in the header HEAD of the page:

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

NOTE: You can modify your need by changing the value of the attributes:

width - Defines a width for the viewport. The values can be in PX or "device-width", which automatically determines a value equal to width of the device screen.
height - Defines a height for the viewport. The values can be in PX or "device-height", which automatically determines a value equal to height of the device screen.
initial-scale - Sets the initial scale of the viewport.
user-scalable - Sets the user's ability to zoom in place on the screen. It is activated when the user hits two times with your finger at a place on the screen.

With CSS you only define styles for each resolution.

The METATAG is to inform the device that the width that it should use is the width that it appears to have, not that of the resolution of it which is in PIXELS .

You need to use CSS with MEDIA QUERIES and METATAG VIEWPORT .

I recommend that you start working with relative rather than fixed measures to work with responsive layouts as they are more appropriate.