[英]media query for 320px and less
我正在为网页编写媒体查询,并设法编写480px及更多的媒体查询。 但是当我为320px编写媒体查询时,它无法正常工作。 我想拍摄320px的大部分手机(iphone4,iphone5,iphone3,asus galaxy 7,samsung galaxy sII,samsung galaxy s3)的纵向视图。 我创建的网页正在使用这些设备中的横向视图,但不会缩放纵向视图。 任何人都可以指出查询中的错误。 这是我使用的媒体查询。
@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;
}
}
对于320px我也尝试过
@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 */
}
但他们都没有工作。我做错什么/遗失了什么? 提前致谢
由于480个样式没有最小宽度,并且由于这些样式在样式表中稍后出现,因此它们会覆盖您放在它们之前的任何内容。
@media (max-width: 320px) {
html {
font-size:0.1em;
}
}
@media (min-width: 321px) and (max-width: 480px) {
html {
font-size:0.20em;
}
}
...
一种
@media (max-width: 320px)
{
html { font-size:0.1em; }
}
乙
@media (max-width: 480px)
{
html { font-size:0.20em; }
}
使用上面的内容,考虑一个320px的视口。
A和B都是正确的 ,因为320达到A的极限并且远远低于B的最大值。但是由于B通过在样式表中稍后声明而覆盖A,因此字体大小由后面的声明决定--B
向B添加min-width:321px
要求会强制B为320px视口测试假 - 因此字体大小将保持在0.1em,直到B变为真(最小宽度为321px)。
编辑(也许是更好的思考方式)
而不是使用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 }
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.