[https://developer.mozilla.org/zh-CN/docs/Web/CSS/Layout\_mode](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Layout_mode) 在早期沒有平板和智能手機等移動設備大行其道的時期，Web?頁面的設計主要是面向 PC 端電腦分辨率展開的。這種分辨率比例比較單一，基本上只要滿足最低分辨率設計即可。一般來說有 4:3、16:10、16:9?這樣的主要分辨率。那么，從這種比例上來看，長度總是大于寬度的。從最低分辨率 1024 \* 768?設計即可。為了使瀏覽器底部不出現滾動條，需要減去適當的寬度，比如減去 28，最終固定長度設置為 996?即可。當然，也有一些網站在近兩年講最低分辨率設置為 1280?減去滾動條寬度，因為大顯示器逐步主流。 除了剛才所說的固定長度的布局，還有一種是流體布局，就是布局的長度為百分比，比如 100%。不管你是什么分辨率，它都能全屏顯示，當然，局限性也特別大，只適合一些單一頁面，復雜的頁面，會隨著不同瀏覽器產生各種閱讀障礙 800*600 760～772 1024*768 960～996 大家取的都是990 1280*800 1200左右（一般寬屏設計網頁用的都是1280*1024） 以576px, 768px, 992px和1200px為分界線，對應手機/平板/小尺寸電腦屏幕/大尺寸電腦屏 50英寸的電視機,分辨率是3840*2160; 5.5英寸的小手機,分辨率是1920*1080; PPI: 401 PPI: pixal per inch每平方英寸像素的個數。 手機的PPI很大,所以屏幕小但是像素多,所以顆粒感小,視網膜屏,讓人看不到屏幕上的像素點。 如果用1:1的視口呈遞網頁,那么將會像從高空俯瞰整個頁面。你想啊,你的手機的高度就是1920px,我們做的博雅互動總高才1415px。也就是說,如果用手機1:1的視口呈遞頁面,所有的頁面都是高空俯瞰。文字很小,不可讀。所以手機不可能用1:1的視口呈遞網頁。 http://gs.statcounter.com/ [Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/)