对手机端的概念

本小妞迷上赌 提交于 2020-10-25 09:05:48

总结

1.英寸
大概2.54cm
5.5英寸 对角线

2.像素
图像最小的不可分割单元

3.分辨率
01:720X1280
02:750X1334
横向容纳750个像素点
纵向容纳1334个像素点
4.ppi
01:pixcel per inch
像素每英寸
02:每英寸像素点的数量
电子设备 72
打印小文件 300
宣传栏 1500-200










5.dpi
在手机上 每英寸 容纳的点大小
dot per inch

6.视网膜屏

Retina 屏 dpi (dot per inch) 超过300的屏幕

7.ios
01:单位pt点
换算像素px
iphone 5/6/7 1:2
iphone 5 6 7 plus 1:3
iphone x 1:3




02:常见尺寸
状态栏20pt
导航栏 44pt
列表44pt
底部 49pt
列表图标/分段器 29pt
switch w51 h31 r28





03:常见间距
8pt
15pt

04:常见文字
标题 17pt
正常 13pt
最新 10pt


08:前端如何运用尺寸
1.设计师的设计稿
750X1334 2倍
720X1280 2倍
1242X2208 3倍
1080X1920 3倍




2.尺寸的安排方式
如果以像素为单位
设计稿子尺寸/倍数
设计稿 :88px height: 44px @2倍
设计稿 :60px height: 20px @3倍
以rem为单位
1.flexable.min.js
2.修改设计稿的宽度在这里插入图片描述
3.尺寸
设计稿的尺寸/100+rem
高88px
写0.88rem










标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!