媒体查询小于等于320px [英] media query for 320px and less
问题描述
我正在编写网页的媒体查询,并设法编写480px以上的媒体查询.但是,当我为320px编写媒体查询时,它无法正常工作.我想捕获320px的大多数手机(iphone4,iphone5,iphone3,华硕银河7,三星银河sII,三星银河s3)的纵向视图.我创建的网页正在这些设备中使用横向视图,但无法缩放为纵向视图.任何人都可以指出查询中的错误.这是我使用的媒体查询.
I am writing a media query for a web-page and managed to write media queries for 480px and more. But when I write media query for 320px it doesn't work properly. I want to capture the portrait views of most of the mobiles( iphone4, iphone5,iphone3,asus galaxy 7,samsung galaxy sII, samsung galaxy s3 ) which is 320px. The webpage I created was working with landscape views in these devices but doesnt scale for portrait views. Can anybody please point out the error in the query. This is the media queries I used.
@media (max-width: 320px)
{
html
{
font-size:0.1em;
}
}
@media (max-width: 480px)
{
html
{
font-size:0.20em;
}
}
@media (max-width: 767px)
{
html
{
font-size:0.38em;
}
}
@media (min-width: 768px) and (max-width: 979px)
{
html
{
font-size:0.65em;
}
}
@media (min-width : 980px) and (max-width:1025px)
{
html
{
font-size:0.7em;
}
}
对于320像素,我也尝试过
For 320px I also tried with
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait)
{ /*Styles */}
和
@media only screen
and (max-width : 320px) {
/* Styles */
}
但是他们都没有工作.我做错了什么/缺少什么吗? 预先感谢
But none of them is working.Am I doing anything wrong/missing something? Thanks in advance
推荐答案
由于480种样式没有最小宽度,并且由于这些样式稍后出现在样式表中,因此它们会覆盖您放在样式之前的所有内容.
Since you don't have a min-width on your 480 styles, and since those styles come later in your stylesheet, they override anything you put before them.
@media (max-width: 320px) {
html {
font-size:0.1em;
}
}
@media (min-width: 321px) and (max-width: 480px) {
html {
font-size:0.20em;
}
}
...
这篇关于媒体查询小于等于320px的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!