<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 排版视窗 -->
<!--
width: 排版视窗宽度
device-width : 设备的物理宽度
initial-scale : 初始化缩放;0.1~10
maximum-scale : 允许用户最大缩放程度
minimum-scale : 允许用户最小缩放程度
user-scalable : 是否禁止用户缩放屏幕。yes/no
target-scalable : 表示没英寸点数 70~400
-->
<!-- <meta name="viewport" content="width=100"> -->
<!-- <meta name="viewport" content="width=device-width,
initial-scale=1.0,
user-scalable=yes"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>测试</title>
<style type="text/css">
body {
background-color:lightgreen;
}
<!-- 内嵌 -->
@media screen and (max-width: 360px) {
body {
background-color:lightblue;
}
}
/* 外联 */
/* @import url(style.css) screen (max-width: 360px) */
/* 超小屏幕 手机 (<768px)
小屏幕 平板 (≥768px)
中等屏幕 桌面显示器 (≥992px)
大屏幕 大桌面显示器 (≥1200px) */
</style>
<!--
max-width : 360px 小于等于
min-width: 360px 大于等于
-->
</head>
<body>
<div style="width: 500px; height: 100px; background: red;">Test</div>
</body>
<script type="text/javascript">
// screen.width 返回屏幕的总宽
var media = window.matchMedia("(max-width: 360px)");
// media.matches=true 条件是否成立
// media.addListener(myFunction); 状态改变执行;myFunction为执行时调用的监听函数
// media.removeListener(myFunction);
</script>
</html>
CSS3@media查询(媒体查询)
猜你喜欢
转载自blog.csdn.net/qq_27870421/article/details/89437271
今日推荐
周排行