我注意到，有些网页适合移动设备。 我知道如何为手机等进行元素定位。 我的问题是字体。这些移动设备具有相当高的屏幕分辨率。而且字体太小，因为屏幕小。
我可以在较小的屏幕上以某种方式使用较大的字体吗？
【问题讨论】：
标签： css responsive-design media-queries
此媒体查询不依赖于移动分辨率。这取决于设备宽度 假设 iphone 宽度是垂直 320 像素和水平 480 像素。 让我们试试这段代码
假设你有一堂课
.header{
font-size:30px;
}
手机版
我认为你的移动宽度是 360px*640px
所以试试吧
@media screen and (max-width: 360px) {
.header{
font-size:25px;
}
}
@media screen and (max-width: 640px) {
.header{
font-size:25px;
}
【讨论】：
在这种情况下，您必须针对视网膜显示。有不同的方法可以解决这个问题。很可能你正在做一个完全响应的网站，所以我建议只做一个媒体查询来定位视网膜“高分辨率”并设置你的字体大小、边距等。
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* Retina-specific stuff here */
}
【讨论】：
您可以利用媒体查询来根据当前屏幕的不同宽度改变字体大小。
@media only screen and (max-width: 768px) {
style-element {
font-size: 20px;
}
}
@media only screen and (max-width: 320px) {
style-element {
font-size: 10px;
}
}
看看这些链接：
【讨论】：