在媒体查询中为高分辨率设备设置大字体大小
问题描述:
IPad分辨率为768 * 1024,但移动设备可能为720 * 1024。我想为设备设置更大的字体,所以它的大小与pt相同。例如:在媒体查询中为高分辨率设备设置大字体大小
@media (min-width: 700px) {
#div_test{
font-size:22px;
}
}
如何修改@media条件?
答
@media (min-width: 700px){
/*code*/
}
媒体查询中的min-width
属性有点不同。这不是屏幕的分辨率。它是等效的CSS像素。
这里有几篇文章。
A pixel is not a pixel is not a pixel。
如果你想目标设备的分辨率,你应该使用
@media all and (max-device-width: 320px) {
}.
max-device-width
:此属性测量设备宽度。如果使用这种方式编写使用媒体查询的css,它会变得有点复杂(手机标签,甚至桌面可以有1080p分辨率的屏幕)。为了定位设备分辨率,您可能需要查看诸如 - device-pixel-ratio
,orientation
和device-height
之类的属性,以更好地控制布局。
Here is a list of media queries for ipad
该媒体查询目标的所有的iPad。
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */}