CSS 利用@media screen判断识别手机/PC端浏览器

最新推荐文章于 2024-01-15 16:55:56 发布

162100

最新推荐文章于 2024-01-15 16:55:56 发布

阅读量1.2w

点赞数 5

分类专栏： CSS 文章标签： css 前端 html5 html web

本文链接：https://blog.csdn.net/best_inh/article/details/122357010

版权

本文介绍了如何利用CSS的@media screen查询来判断并适配手机和PC端浏览器的字体显示。通过设置不同的屏幕尺寸临界值，确保在手机端使用自定义字体，而在PC端保持浏览器默认字体，避免手机系统字体影响网页样式。

摘要由CSDN通过智能技术生成

一、写此篇的初衷：

手机用户常可以更换自己手机系统的字体，那么在浏览网页的时候，网页内容字体也都随之变了，于是我想，能不能让自己的网站的字体在手机浏览器中保持不变（使用一款自定义字体）呢；而在PC端浏览器不用处理。

二、功能实现依据：

首先，CSS @media查询中有判断横屏（orientation:landscape）、竖屏（orientation:portrait）的功能，那么分别在电脑、手机浏览器上是否有不同表现呢，如果有，就靠它了。先看如下代码：

<style type="text/css">
/*定义竖屏 css*/
@media screen and (orientation:portrait) {
	.portrait { display:block; background-color:#FFCC00; }
	.landscape { display:none; }
}
/*定义横屏 css*/
@media screen and (orientation:landscape) {
	.portrait { display:none; }
	.landscape { display:block; background-color:#FFCC00; }
}
</style>
<div class="portrait">当前（浏览器）是竖屏</div>
<div class="landscape">当前（浏览器）是横屏</div>
<span id="a">