> ## :-: 響應式頁面開發 ``` <!-- 移動端適配 - 視口寬度：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); ```