<!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>
效果图: