# 基于視窗寬度的媒體查詢斷點設置
>[success]前提設置body的字體為100%。其具有一個簡單的計算公式：100% = 16px = 1em = 14pt
>
~~~
/*Viewport = 1920px*/
@media screen and (max-width: 120em){}
/*Viewport = 1680px*/
@media screen and (max-width: 105em){}
/*Viewport = 1400px*/
@media screen and (max-width: 87.5em){}
/*Viewport = 1200px*/
@media screen and (max-width: 75em){}
/*Viewport = 1024px*/
@media screen and (max-width: 64em){}
/*Viewport = 960px*/
@media screen and (max-width: 60em){}
/*Viewport = 800px*/
@media screen and (max-width : 50em){}
/*Viewport = 768px*/
@media screen and (max-width : 48em){}
/*Viewport = 600px*/
@media screen and (max-width: 37.5em){}
/*Viewport = 480px*/
@media screen and (max-width: 30em){}
/*Viewport = 320px*/
@media screen and (max-width: 20em){}
/*Viewport = 240px*/
@media screen and (max-width: 15em){}
/*
High Resolution/Retina Display Media Queries
*/
/*Pixel Density 3*/
@media(-webkit-min-device-pixel-ratio: 3),(min-resolution: 192dpi){}
/*Pixel Density 2*/
@media(-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){}
/*Pixel Density 1.5*/
@media(-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 124.8dpi){}
/*Pixel Density 1.25*/
@media(-webkit-min-device-pixel-ratio: 1.25),(min-resolution: 120dpi){}
/*
Printed Style Media Queries
*/
/*Print Resolution 300 dpi*/
@media print and (min-resolution: 300dpi){}
/*Print Resolution 144 dpi*/
@media print and (min-resolution:144dpi){}
/*Print Resolution 96 dpi*/
@media print and (min-resolution:96dpi){}
/*Print Resolution 72 dpi*/
@media print and (resolution:72dpi){}
~~~
