浏览器和屏幕各种高度宽度

原生JS

document.body.clientWidth; //网页可见区域宽(body) 

document.body.clientHeight; //网页可见区域高(body) 

document.body.offsetWidth; //网页可见区域宽(body)，包括border、margin等 

document.body.offsetHeight; //网页可见区域宽(body)，包括border、margin等 

document.body.scrollWidth; //网页正文全文宽，包括有滚动条时的未见区域 

document.body.scrollHeight; //网页正文全文高，包括有滚动条时的未见区域 

document.body.scrollTop; //网页被卷去的Top(滚动条) 

document.body.scrollLeft; //网页被卷去的Left(滚动条) 

window.screenTop; //浏览器距离Top 

window.screenLeft; //浏览器距离Left 

window.screen.height; //屏幕分辨率的高 

window.screen.width; //屏幕分辨率的宽 

window.screen.availHeight; //屏幕可用工作区的高 

window.screen.availWidth; //屏幕可用工作区的宽

Jquery

$(window).height(); //浏览器当前窗口可视区域高度 

$(document).height(); //浏览器当前窗口文档的高度 

$(document.body).height(); //浏览器当前窗口文档body的高度 

$(document.body).outerHeight(true); //浏览器当前窗口文档body的总高度 包括border padding margin 

$(window).width(); //浏览器当前窗口可视区域宽度 

$(document).width(); //浏览器当前窗口文档对象宽度 

$(document.body).width(); //浏览器当前窗口文档body的宽度 

$(document.body).outerWidth(true); //浏览器当前窗口文档body的总宽度 包括border padding margin

PC端 按屏幕宽度大小排序 分辨率 比例 | 设备尺寸

1024*500 （8.9寸） 

1024*768 （比例4：3 | 10.4寸、12.1寸、14.1寸、15寸; ） 

1280*800（16：10 |15.4寸） 

1280*1024(比例：5：4 | 14.1寸、15.0寸) 

1280*854(比例：15：10 | 15.2） 

1366*768 (比例：16：9 | 不常见） 

1440*900 （16：10 17寸 仅苹果用） 

1440*1050（比例：5：4 | 14.1寸、15.0寸） 

1600*1024（14：9 不常见） 

1600*1200 （4：3 | 15、16.1） 

1680*1050（16：10 | 15.4寸、20.0寸） 

1920*1200 (23寸）

PC端响应式媒体断点

@media (min-width: 1024px){
    body{font-size: 18px} /*>=1024的设备*/
} 

@media (min-width: 1100px) {
    body{font-size: 20px} /*>=1100的设备*/
} 
@media (min-width: 1280px) {
    body{font-size: 22px;} /*>=1280的设备*/
} 

@media (min-width: 1366px) {
    body{font-size: 24px;}
}  

@media (min-width: 1440px) {
    body{font-size: 25px;}
} 

@media (min-width: 1680px) {
    body{font-size: 28px;}
} 
@media (min-width: 1920px) {
    body{font-size: 33px;}
}