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手机的不同屏幕尺寸所使用的字体样式,当然在其他手机设备上,我们也需要做相应的适配。例如,在华为手机上,我们可以使用华文细黑字体样式。

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

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效