做頁面時我們常常遇到一個問題，做響應式布局時斷點應該設在哪里？難道要對着各種設備尺寸一個一個地調？這得調到猴年馬月。
當然，我們能想到這個問題，各大框架也會考慮到這點，而且只會得考慮得更周到。這時候我們只需要打開一些做得比較好的前端框架，查看下它關於響應式的源代碼就可以找到我們想要的答案。
而我參考的框架是uikit（http://www.getuikit.net）：
1、手機縱向：小於 479px
2、手機橫向：480px 到 767px
3、平板電腦縱向：768px 到 959px
4、台式機或平板電腦橫向：960px 到 1199px
5、大屏幕設備：1200px 或以上
說了這么多，一定有人要問我代碼怎么寫,下面我就列一些我常用的用法：
1、從大屏樣式開始寫到小屏(在@media下的優先級比較高)。代碼如下：
@media screen and (max-width: 1200px) {}//在大於1200px這個屏寬下應用
@media screen and (max-width: 960px) {}
@media screen and (max-width: 768px) {}
@media screen and (max-width: 480px) {}
2、從小屏樣式開始寫到大屏。代碼如下：
@media screen and (min-width: 480px) {}//在小於48px這個屏寬下應用
@media screen and (min-width: 768px) {}
@media screen and (min-width: 960px) {}
@media screen and (min-width: 1200px) {}
3、如果只想改變一個范圍下的尺寸可以這樣寫（注意：max-width和min-width都是包括當前值的）當然你也是可以繼續添加其他范圍。代碼如下：
@media screen and (max-width: 767px)
and (min-width: 480px){}
4、如果只想改變一個寬度下的樣式，可以直接定義他的width值。代碼如下：
如果使用的less或sass，還可以先定義一個變量來儲存寬度，然后用@media直接引用變量就好啦，當需求改變的時候就只用改變一個變量就好啦