[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/)