Html 320px 及以下的媒体查询
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15673117/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
media query for 320px and less
提问by user1429322
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.
我正在为网页编写媒体查询，并设法为 480px 及更多像素编写媒体查询。但是当我为 320px 编写媒体查询时，它无法正常工作。我想捕捉大多数手机（iphone4、iphone5、iphone3、华硕galaxy 7、三星galaxy sII、三星galaxy s3）的纵向视图，即320px。我创建的网页在这些设备中使用横向视图，但不适用于纵向视图。任何人都可以指出查询中的错误。这是我使用的媒体查询。
@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;
}
}
For 320px I also tried with
对于 320px 我也试过
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait)
{ /*Styles */}
and
和
@media only screen
and (max-width : 320px) {
/* Styles */
}
But none of them is working.Am I doing anything wrong/missing something? Thanks in advance
但是他们都没有工作。我做错了什么/遗漏了什么吗？提前致谢
回答by isherwood
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.
由于您的 480 样式没有最小宽度，并且由于这些样式稍后出现在样式表中，因此它们会覆盖您放在它们之前的任何内容。
@media (max-width: 320px) {
html {
font-size:0.1em;
}
}
@media (min-width: 321px) and (max-width: 480px) {
html {
font-size:0.20em;
}
}
...
回答by Dawson
A
一种
@media (max-width: 320px)
{
html { font-size:0.1em; }
}
B
乙
@media (max-width: 480px)
{
html { font-size:0.20em; }
}
Using the above, consider a 320px viewport.
使用上述内容，考虑一个 320 像素的视口。
A and Bare true, as 320 hits the limit of A and falls well below the max of B. But since B overrides A by being declared later in the stylesheet, font-size is dictated by the later declaration -- B
A 和 B是true，因为 320 达到了 A 的限制并且远低于 B 的最大值。但是由于 B 通过在样式表中稍后声明来覆盖 A，因此字体大小由后面的声明决定 -- B
Adding a min-width:321pxrequirement to Bwould force B to test false for the 320px viewport -- so font-size would stay at 0.1em until B became true (minimum width of 321px).
向B添加min-width:321px要求将强制 B 测试 320px 视口的 false - 因此 font-size 将保持在 0.1em 直到 B 变为 true（最小宽度为 321px）。
EDIT (maybe a better way to think about it)
Instead of using max, max, max, why not take advantage of the min-width, until you reach a UI that may be best served with a range (like a tablet)
编辑（也许是一种更好的思考方式）
与其使用 max、max、max，为什么不利用min-width, 直到您到达可能最适合某个范围的 UI（例如平板电脑）
/* Set a base */
html { font-size:62.5% }
/* iPhone landscape range */
@media (min-width:321px) and (max-width:480px) {
html { font-size:1.2em }
}
/* larger than iPhone landscape, an in the iPad portrait range */
@media (min-width:481px) and (max-width:768px) {
html { font-size:1.6em }
}
/* bigger than iPad portrait */
@media (min-width:769px) {
html { font-size:2em }
}
