【转】响应式布局常用的分辨率

简介: 类型     布局宽度       列宽   间隙宽度 大屏幕    大于等于1200px     70px   30px 默认       大于等于980px        60px   20px平板     大于等于768px       42px   20px手机到平板  小于等于...

类型     布局宽度       列宽   间隙宽度
大屏幕    大于等于1200px     70px   30px
默认       大于等于980px        60px   20px
平板     大于等于768px       42px   20px
手机到平板  小于等于767px       流式列     无固定宽度
手机     小于等于480px       流式列   无固定宽度


/* 大屏幕 */
@media (min-width: 1200px) { ... }

/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media (max-width: 767px) { ... }


/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) { ... }

相关文章
|
4月前
|
编解码 UED
描述一下你是如何处理不同屏幕尺寸和分辨率的。
```markdown 使用响应式设计、媒体查询适应屏幕尺寸;利用弹性布局保证元素自适应;通过图像适配提供高质量视图;多设备测试与优化确保兼容性,持续关注新技术以应对屏幕多样性。 ```
41 3
|
编解码
LabVIEW自适应屏幕分辨率的两种方法
前阵子做的一个项目是在显示器分辨率为 2560*1600,缩放选项为 150% 的笔记本上开发的,但是当 vi 文件在另一台显示器分辨率为 1920*1080,缩放选项为 150% 的笔记本上时出现了显示不完全的问题,也就是说,换成了低分辨率的显示器后,并没有自适应屏幕,因此花费了一点儿时间解决了这个问题,在此记录一下。
381 2
|
前端开发 容器
CSS不同手机型号各种尺寸设备宽高比
CSS不同手机型号各种尺寸设备宽高比
111 0
|
编解码
LabVIEW自适应屏幕分辨率缩放
在使用 LabVIEW进行上位机项目开发的时候软件的分辨率是根据我们所开发的电脑所决定的,但是当开发完的上位机软件运行在其他分辨率较高或者较低的电脑上时可能会出现比例不合适而导致变形。
337 0
|
编解码 前端开发 UED
实现响应式布局
在现代 Web 开发中,响应式布局已经成为了一个非常重要的概念。由于不同设备有不同的屏幕尺寸和分辨率,需要通过响应式布局来适应不同的设备。实现响应式布局的方式有很多种,下面介绍一些常见的方法。
116 0
|
编解码 前端开发 数据可视化
前端各种分辨率问题总结
前端各种分辨率问题总结
pc端媒体查询尺寸大全
pc端媒体查询尺寸大全
119 0
|
编解码 前端开发
|
移动开发 前端开发 HTML5
响应式 - 使视频自适应于屏幕宽度
响应式 - 使视频自适应于屏幕宽度
507 0
响应式 - 使视频自适应于屏幕宽度
|
编解码 API 开发者
iPhone屏幕尺寸、分辨率及适配
1.iPhone尺寸规格 设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Factor 设备分辨率(pixel) PPI 3GS 2.4 inch
2976 0