微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

css不同屏幕手机字体样式

在移动互联网时代,我们不可避免地要面对各种屏幕尺寸的手机设备,而不同的屏幕尺寸也意味着用户在手机上看到的页面显示效果差异较大。其中,字体样式是一个非常重要的元素。

css不同屏幕手机字体样式

在CSS中,我们可以使用font-family属性来定义字体样式。常见的字体样式包括宋体(Simsun)、微软雅黑(Microsoft Yahei)、黑体(SIMHei)等等。但是,对于不同的屏幕尺寸,我们需要使用不同的字体样式。

/* iphone5 */
@media only screen and (max-width: 320px){
  body{
    font-family: "PingFang SC","Microsoft YaHei",sans-serif;
  }
}

/* iphone6 */
@media only screen and (min-width: 321px) and (max-width: 375px){
  body{
    font-family: "Heiti SC",sans-serif;
  }
}

/* iphone6 plus */
@media only screen and (min-width: 376px){
  body{
    font-family: "Hiragino Sans GB",sans-serif;
  }
}

以上是针对iPhone手机的不同屏幕尺寸所使用的字体样式,当然在其他手机设备上,我们也需要做相应的适配。例如,在华为手机上,我们可以使用华文细黑字体样式。

总之,对于不同屏幕尺寸的手机设备,我们需要针对其视口大小,来选择合适的字体样式。这样,我们才能确保网页在各大主流手机设备上都能够有比较好的显示效果

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。