用media screen做響應式布局，為何斷點設為800px時chrome會在783px就變化？

01-14

就是臨界點max-width設為800px時背景變綠,結果在chrome調試窗口的div盒模型寬度為784px時候背景就變綠了，怎麼回事？
代碼

&
&
&
&
&
*{margin:0; padding:0;}
div{height:500px;background:#f00;}
/*媒體查詢*/
@media screen and (max-width:800px){

div{background:#0f0;}
}
&
&
&
&&
&
&

謝邀，這個不是@media的bug, 而是Chrome 和 Safari 計算你的max-width的800px其實是 (780px body + 20px scrollbar)，也就是說滾動條有20像素，其實精確一點應該是780不是783。

Firefox, Opera 和 IE就不計算20的滾動條寬度。如果你要解決這個問題，讓不同瀏覽器的滾動條寬度計算準確，請加入body { overflow-y: scroll; }.

由於瀏覽器版本，滾動條寬度會在15px,17px,20px，但是你設計過程中建議按照20px的標準去計算，這樣能避免不同瀏覽器不同版本的寬度誤差，下面是一些版本對應的滾動條寬度參考：

我測試過現在最新的chrome,safari,firefox的mac版本滾動條經過精確測算是15px，windows版本下的未檢測，感興趣可以自己去測試下.

想更深入的學習css 的盒模型，不錯過任何一個編碼中的細節，請參看W3C的官方標準資料：CSS basic box model

測試你不同的操作系統的不同瀏覽器滾動條，直接點開網址即可測試：http://www.textfixer.com/tutorials/scrollbar-pixel-width-test.php

瀉藥

因為是針對視口的設置

所以你得把滾動條寬度加進去……

瀉藥

題主理解有誤，下面一步步的來解釋。

先說@media的語法，參考@media - CSS

@media & { & }

A & is composed of a media type and/or a number of media features.

media-query由media type 和 media features 組成。

type 在顯示器上取 screen 沒錯。

features 取 width 也沒錯。

但是width前面加上min/max的前綴理解有錯，參考width - CSS | MDN

/* Exact width */ @media (width: 300px) {}


/* Viewport width at least */

@media (min-width: 50em) {}

/* Viewport width at most */ @media (max-width: 1000px) {}

max-width 表示的viewport的最大width。

換言之，就是當viewport的width小於等於時，就會觸發其下的內容。

贊同 @Chuckie Chang的回答，chrome把滾動條的width也算在媒體查詢里。你把chrome調試工具換成右列顯示，就會發現800px時媒體查詢生效了

meta沒加上

瀉藥~

不太懂，老闆要求一般都是用JS判斷用戶是哪個尺寸的屏幕，然後直接替換相應的session["css"]文件這樣來做。前台輸出?css=session["css"]。我們不太害怕效率耗損~ 因為who care ~ 至於對於某個尺寸寬高的CSS代碼的編寫我們不參與~