其他分享
首页 > 其他分享> > CSS媒体查询-各种屏幕大小

CSS媒体查询-各种屏幕大小

作者:互联网

1、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

2、移动端

320*568

360*740

375*667

375*812

390*844

393*851

414*736

414*896

540*720

768*1028

820*1180

912*136

@media (min-width: 1024px){ body{font-size: 18px} }

布局

最外层容器可以根据 屏幕宽度,设置成固定宽度,然后内部使用百分比。

1.container类

响应式布局的容器,固定宽度
大屏(>=1200px)宽度为1170px
中屏(>=992px)宽度为970px
小屏(>=768px)宽度为750px
超小屏(100%)

2.container-fluid类

流式布局容器,百分比宽度
占据全部视口(viewpoint)的容器
适合于单独做移动端开发

标签:1024,768,1280,10,16,查询,宽度,屏幕,CSS
来源: https://www.cnblogs.com/zhanglw456/p/16446936.html