H5 media 媒体查询

最新推荐文章于 2024-09-13 19:40:27 发布

iteye_17658

最新推荐文章于 2024-09-13 19:40:27 发布

阅读量1.9k

点赞数 1

分类专栏：境-H5 文章标签： H5 media media @media 媒体查询

本文链接：https://blog.csdn.net/iteye_17658/article/details/82671504

版权

境-H5 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

<!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>

效果图：