<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<!--
content属性值 :
width:可视区域的宽度，值可为数字或关键词device-width
height:同width
intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放，no 禁止缩放
-->
<!--meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- 手机 -->
<link href="m.css" rel="stylesheet" media="only screen and (max-width:320px)">
<!-- 平板 -->
<link href="pad.css" rel="stylesheet" media="only screen and (min-width:321px) and (max-width:768px)">
<!-- 小屏PC -->
<link href="spc.css" rel="stylesheet" media="only screen and (min-width:769px) and (max-width:1200px)">
<!-- 大屏PC -->
<link href="bpc.css" rel="stylesheet" media="only screen and (min-width:1201px)">
<style>
p{ font-size:22px; text-align:center;}
@media only screen and (max-width:320px){
p:before{ content:"[手机]";}
}
@media only screen and (min-width:321px) and (max-width:768px){
p:before{ content:"[平板]";}
}
@media only screen and (min-width:769px) and (max-width:1200px){
p:before{ content:"[小屏PC]";}
}
@media only screen and (min-width:1201px){
p:before{ content:"[大屏PC]";}
}
</style>
</head>
<body>
<p>阅谁问君诵，水落清香浮</p>
</body>
</html>
效果图：
标签：media,screen,查询,content,width,only,H5,before From： https://blog.51cto.com/u_16171388/6557280