css区分手机

CSS（层叠样式表）可以帮助我们区分手机和电脑的访问。首先我们在head标签中加上以下代码：

meta name="viewport" content="width=device-width, initial-scale=1.0">

这样可以让页面自适应不同尺寸的设备屏幕。

接下来我们可以使用媒体查询来设置不同的样式。例如：

@media (max-width: 768px) {
/* 手机屏幕下的样式 */body {
    font-size: 14px;
}
}
@media (min-width: 769px) {
/* 电脑屏幕下的样式 */body {
    font-size: 16px;
}
}

这里我们使用了max-width和min-width来分别针对不同尺寸屏幕设置样式。在这个例子中，当屏幕宽度小于等于768px时，应用第一个媒体查询下的样式；当屏幕宽度大于769px时，应用第二个媒体查询下的样式。可以根据实际需要，设定不同的尺寸。

除了设置字体大小外，我们也可以设置其他的样式，例如：

@media (max-width: 768px) {
/* 手机屏幕下的样式 */.nav {
    display: none;
 /* 隐藏导航栏 */}
}
@media (min-width: 769px) {
/* 电脑屏幕下的样式 */.nav {
    display: block;
 /* 显示导航栏 */}
}
    

这样我们就可以轻松区分手机和电脑访问，并分别适配不同的样式效果，提升用户体验。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！