可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试):
问题:
In the styles.css, I am using media queries, both of which use a variation of:
/*--[ Normal CSS styles ]----------------------------------*/
@media only screen and (max-width: 767px) {
/*--[ Mobile styles go here]---------------------------*/
}
The sites resize to the layout I want in a regular browser (Safari, Firefox) when I shrink the window, however, the mobile layout isn\'t shown at all on a phone. Instead, I just see the default CSS.
Can anyone point me in the right direction?
回答1:
All three of these were helpful tips, but it looks like I needed to add a meta tag:
<meta content=\"width=device-width, initial-scale=1\" name=\"viewport\" />
Now it seems to work in both Android (2.2) and iPhone all right...
回答2:
Don\'t forget to have the standard css declarations above the media query or the query won\'t work either.
.edcar_letter{
font-size:180px;
}
@media screen and (max-width: 350px) {
.edcar_letter{
font-size:120px;
}
}
回答3:
I suspect the keyword only
may be the issue here. I have no issues using media queries like this:
@media screen and (max-width: 480px) { }
回答4:
i used bootstrap in a press site but it does not worked on IE8, i used css3-mediaqueries.js javascript but still not working. if you want your media query to work with this javascript file add screen to your media query line in css
here is an example :
<meta name=\"viewport\" content=\"width=device-width\" />
<style>
@media screen and (max-width:900px) {}
@media screen and (min-width:900px) and (max-width:1200px) {}
@media screen and (min-width:1200px) {}
</style>
<link rel=\"stylesheet\" type=\"text/css\" href=\"bootstrap.min.css\">
<script type=\"text/javascript\" src=\"css3-mediaqueries.js\"></script>
css Link line as simple as above line.
回答5:
Today I had similar situation. Media query did not work. After a while I found that space after \'and\' was missing.
Proper media query should look like this:
@media screen and (max-width: 1024px) {}
回答6:
@media all and (max-width:320px)and(min-width:0px) {
#container {
width: 100%;
}
sty {
height: 50%;
width: 100%;
text-align: center;
margin: 0;
}
}
.username {
margin-bottom: 20px;
margin-top: 10px;
}
回答7:
Make sure your css comments all use this markup /*
... */
-- which is the correct comment markup for css according to MDN
I had copied bootstrap 4 media queries straight from their docs and every query is labeled with the same javascript style comment markup //
!
Furthermore, IntelliJ text editor allowed me to comment out specific lines of css in a LESS file but automatically used //
. It\'s no freeware so I assumed it had it right. There\'s a preference menu for correcting this behavior.
Also, validate your css with a trustworthy online validator. Here\'s one by W3
回答8:
I use a few methods depending.
In the same stylesheet i use: @media (max-width: 450px), or for separate make sure you have the link in the header correctly. I had a look at your fixmeup and you have a confusing array of links to css. It acts as you say also on HTC desire S.
回答9:
For me I had indicated max-height
instead of max-width
.
If that is you, go change it !
@media screen and (max-width: 350px) { // Not max-height
.letter{
font-size:20px;
}
}