网页屏幕分辩率尺寸

网页屏幕分辨率

 各屏幕分辨率使用占比：

1920*1080  26.7%

1600*900  7.42%

1366*768  21.97%

1024*768  4.84%

1680*1050  3.68%

做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080

基础格式

body {//1600-1920

    ...//其它样式

    font-size: 13px;//必须

}

@media only screen and (max- 1360px) {//1366-1600

    body {

        font-size: 12px;

    }

    .

    .

    .//其它对象

}

 

@media  only screen and (max- 1161px) { //0-1366

    body {

        font-size: 10px;

    }

    .

    .

    .//其它对象

}

 

 

对象里需要调整font-size时 以上述font-size为基础进行调整

例如

a{//1920

    font-size:30px;

}

则 换算成em

a{//1920

font-size:1.875em;(30px/16px)

}

 

例如

a{//1366

font-size:18px;

}

则换算成em

a{//1366

font-size:1.5em;(18px/12px)

}

 

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  

CSS代码

@media (min- 1024px){
  body{font-size: 18px}
} /*>=1024的设备*/
@media (min- 1100px) {
  body{font-size: 20px}
} /*>=1024的设备*/
@media (min- 1280px) {
  body{font-size: 22px;}
} 
@media (min- 1366px) {
  body{font-size: 24px;}
}  
@media (min- 1440px) {
  body{font-size: 25px !important;}
} 
@media (min- 1680px) {
  body{font-size: 28px;}
} 
@media (min- 1920px) {
  body{font-size: 33px;}
}