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寸）
常用分辨率
1024 1280 1366 1440 1680 1920
@media screen and (min-width: 1024px) and (max-width:1100px){
} /*>=1024 and <1100的设备*/
@media screen and (min-width: 1100px) {
} /*>=1100的设备*/
@media screen and (min-width: 1280px) {
} /*>=1280的设备*/
@media screen and (min-width: 1366px) {
}
@media screen and (min-width: 1440px) {
}
@media screen and (min-width: 1680px) {
}
@media screen and (min-width: 1920px) {
}
移动端分辨率
@media screen and (max-width: 768px){
}
（h5和pc）
var wWidth = window.screen.width;// 当前窗口的宽
if (wWidth <= 768) {//移动端
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
var len = 100* (clientWidth / 750);
docEl.style.fontSize = len + 'px';
};
recalc();
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
})(document, window);
} else {//pc端
$(window).resize(function ()// 绑定到窗口的这个事件中
{
pcRem()
});
pcRem();
function pcRem () {
var whdef = 100/1920;// 表示1920的设计图,使用100px的默认值
var wH = window.screen.height;// 当前窗口的高度
var wW = window.screen.width;// 当前窗口的宽度
if(wW>768&&wW<=1920){
var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
$('html').css('font-size', rem + "px");
}else {
$('html').css('font-size', 100 + "px");
}
}
}
注：rem不兼容ie8和ie8以下的浏览器