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

作頁面時咱們經常遇到一個問題，作響應式佈局時斷點應該設在哪裏？難道要對着各類設備尺寸一個一個地調？這得調到猴年馬月。

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

而我參考的框架是uikit（http://www.getuikit.net）：

一、手機縱向：小於 479px

二、手機橫向：480px 到 767px

三、平板電腦縱向：768px 到 959px

四、臺式機或平板電腦橫向：960px 到 1199px

五、大屏幕設備：1200px 或以上

說了這麼多，必定有人要問我代碼怎麼寫,下面我就列一些我經常使用的用法：

一、從大屏樣式開始寫到小屏(在@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) {}

二、從小屏樣式開始寫到大屏。代碼以下：

@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) {}

三、若是隻想改變一個範圍下的尺寸能夠這樣寫（注意：max-width和min-width都是包括當前值的）固然你也是能夠繼續添加其餘範圍。代碼以下：

@media  screen  and (max-width: 767px)

　　　　　　　　　and (min-width: 480px){}

四、若是隻想改變一個寬度下的樣式，能夠直接定義他的width值。代碼以下：

若是使用的less或sass，還能夠先定義一個變量來儲存寬度，而後用@media直接引用變量就好啦，當需求改變的時候就只用改變一個變量就好啦