做頁面時我們常常遇到一個問題，做響應式布局時斷點應該設在哪裏？難道要對著各種設備尺寸一個一個地調？這得調到猴年馬月。

當然，我們能想到這個問題，各大框架也會考慮到這點，而且只會得考慮得更周到。這時候我們只需要打開一些做得比較好的前端框架，查看下它關於響應式的源代碼就可以找到我們想要的答案。

而我參考的框架是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直接引用變量就好啦，當需求改變的時候就只用改變一個變量就好啦

響應式斷點應該要設在哪裏