> ## :-: 响应式页面开发 ``` <!-- 移动端适配 - 视口宽度：width=device-width, initial-scale=1.0 user-scalable=no ----- 禁止双击页面缩放 user-scalable --- 是否允许用户缩放 minimum-scale --- 最小缩放比 maximum-scale --- 最大缩放比 device-width --- 设备宽度 --> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <!-- 在屏幕宽度小于500px时作用这个样式、 --> <link rel="stylesheet" media="screen and (max-width:500px)" href="style.css"> <!-- 第二种css样式引入方法 --> <style> @import 'style.css' screen and (max-width:500px); </style> /* css样式引入、媒体查询不占用权重 (所以一般写在css后面) */ /* and ----- 且 , ----- 或 not ----- 非 */ @media not screen,(max-width:500px) and (min-width:300px) { body { background: red; } } ``` > ## :-: css函数及元素居中 ``` position: absolute; left: calc(50% - 150px); top: calc(50% - 25px); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); ``` > ## :-: 炫酷特效 ``` /* 旋转效果 */ -webkit-transform: rotate(720deg); /* 毛玻璃模糊效果 */ filter: blur(5px); ```