网站首页 > 技术文章 正文
什么是前端设计尺寸呢?像素?英寸?分辨率?没错,但是规则就是用来打破的,不要拘泥于规则。
那么首先介绍英寸:
- 屏幕对角线的长度,一英寸~~3.多厘米
像素:(Pixel—px)—物理分辨率
- 物理分辨率是硬件支持
- 像素是图像的基本采样单位,是组成位图的最小单元
- 不是一个具体的量,而是一个抽样的
- 尽管像素能够使用一个点来表示,但是因为像素的点不尽相同,所以是个抽象
分辨率
网点密度(DPI)
像素密度(PPI)
逻辑分辨率(pt–point),像素倍率
有软件支持
逻辑分辨率的多少倍是物理分辨率,看具体情况
前端与设计所用的尺寸
设计师:一般使用px即物理分辨率
前端:一般使用pt即逻辑分辨率
设计尺寸的问题-
375px—没有viewport 是指物理分辨率,1px == 1px
375px—有viewport 是指pt,逻辑分辨率,1px = 1pt
所以,这就是为什么需要viewport,pt与px有倍率关系(根据不同的手机倍率是不一样的)
但是移动端,我们通常使用rem,
iPhone的pt与px的倍率关系
iPhone6/7/8:中 1pt == 2px
iPhone6/7/8 plus:中 1pt == 3px
iPhone X :中 1pt == 3px
设计的常用尺寸—移动端(ios)
状态条:20pt(前端不写)
导航条:40pt
一般列表:44pt
底部导航栏:高度—49pt,文字高度—10pt
弹出框:宽度—270pt,圆角—12pt
列表图片:29pt
分段器:29pt
计步器:29pt
间距:
8pt
15pt
文字:
17pt
20pt
12pt
13pt
10pt
圆:28pt
设计师:
设计师什么尺寸都有
转成pt再写(非响应式)
750px宽 转 375pt
1125px 转 375pt
1242px 转 414pt
前端用flex
100px 转 1rem
修改flex.js的参数(第一个参数设计稿的宽)
小程序
750rpx == 一个平面宽
设计师设计 750px 1px = 1rpx
1125px 30px/3*2---转成pt*2,转成2倍屏
对于前端设计师来说规则是用来打破的,不用称为一个个的模板,要学会举一反三
猜你喜欢
- 2025-05-26 技术干货:前端开发之jQuery单页面开发
- 2025-05-26 15个程序员们都应该知道的大模型高级提示词指令模板和示例
- 2025-05-26 架构案例丨苏宁易购:商品详情系统架构设计
- 2025-05-26 每日源码分享之集电脑站+手机站+微信站+APP+小程序五合一系统
- 2025-05-26 10分钟做出领导满意的可视化大屏,这30份模板一定要收藏好
- 2025-05-26 多用途游戏娱乐新闻网站HTML5模板
- 2025-05-26 京东前台PC首页系统技术详解
- 2024-09-24 前端教程:Django模板系统
- 2024-09-24 前端小白如何在10分钟内打造一个爆款Web响应式登录界面?
- 2024-09-24 11套高端大气的登录模板
你 发表评论:
欢迎- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (58)
- oracle面试 (55)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)