@Media媒体查询 ----笔记

整理一下关于@media适配的笔记：

1、适配主流分辨率
我所碰到的项目大都需要适配 1280*800， 1366*768， 1920*1080

分辨率：1280*800

/* 
  所适配的条件：
  		在1280*800下浏览器全屏大小的窗口长宽比最大为1280/658
  		（窗口大小我是在开发者工具中查看html大小）
  		最小宽度为768 （一般768以下属于mobile版本）
 */
@media (max-aspect-ratio: 1280/658)  and (min-width: 768px){ ... }

/* 
  所适配的条件：
  		在1280*800下设备屏幕长宽比最大为1280/800
  		最小宽度为768 （一般768以下属于mobile版本）
 */
@media (max-device-aspect-ratio: 1280/800)  and (min-width: 768px){ ... }

分辨率：1366*768

/* 
  所适配的条件：
  		在1366*768下浏览器全屏大小的窗口长宽比最大为1366/626
  		最小宽度为768 （一般768以下属于mobile版本）
 */
@media (max-aspect-ratio: 1366/626)  and (min-width: 768px){ ... }

/* 
  所适配的条件：
  		在1366*768下设备屏幕长宽比最大为1366/768
  		最小宽度为768 （一般768以下属于mobile版本）
 */
@media (max-device-aspect-ratio: 1366/768)  and (min-width: 768px){ ... }

分辨率：1920*1080

/* 
  所适配的条件：
  		在1920*1080下浏览器全屏大小的窗口长宽比最大为1920/938
  		最小宽度为768 （一般768以下属于mobile版本）
 */
@media (max-aspect-ratio: 1920/938)  and (min-width: 768px){ ... }

/* 
  所适配的条件：
  		在1920*1080下设备屏幕长宽比最大为1920/1080
  		最小宽度为768 （一般768以下属于mobile版本）
 */
@media (max-device-aspect-ratio: 1920/1080)  and (min-width: 768px){ ... }