css区分手机 |用记事本写css3

<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; /* 显示导航栏 */
}
}

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