前端移动端页面与手机尺寸和分辨率的关系

概念

英寸
1英寸大概2.54cm
5.5英寸指的是手机对角线
像素
. 　一个屏幕都是由一个一个像素组建而成的，每个像素都对应一个小点。我们常见的 640*960 像素就说明了一个屏幕中包含了多少个小点（像素点），640列与960行像素点，乘一下就知道有多少个了，反正很多很多个。没错，手机中显示的任何图形和图像都是由这些小点组成。
分辨率
.、 720x1280
. 、 750x1334 横向容纳750个像素点纵向容纳1334个像素点
ppi
— pixcei per inch 像素每英寸
每英寸像素点的数量
电子设备72
打印小文件 300
宣传栏 150-200
dpi
在手机上每英寸容纳的点的大小dot per inch
视网膜屏
. Retina屏 dpi(dot per inch)超过300的屏幕
单位pt
换算像素px
iphone 5/6/7
1:2
iphone 5 6 7plus
1:3
iphonx
1：3
常见尺寸
状态栏20pt
导航栏44pt
列表44pt
底部49pt
列表图标/分段器29pt
switch w51 h31 r28
常见间距
8pt
15pt
常见的文字
标题17pt
正常13pt
最新10pt
前端如何运用
设计师的设计稿
750x1334
2倍
720x1280
2倍
1242x2208
3倍
1080x1920
3倍
看网上
尺寸安排方式

如果以像素为单位设计稿子尺寸/倍数
设计稿：88px
写height:44px @2倍
设计稿：60px
写height：20px@3倍
- 以rem为单位

前端移动端页面与手机尺寸和分辨率的关系相关推荐

jsp页面适应手机屏幕_JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码...
手机的屏幕有大有小,移动web最好做成响应式布局,也就是自适应屏幕,没有固定宽高,这样的话,在所有手机上都可以正常显示.关于移动端页面按手机屏幕分辨率自动缩放的js,先附上代码 var phoneWi ...
手机整屏显示数据php,JavaScript实现移动端页面按手机屏幕分辨率自动缩放示例...
这篇文章主要介绍了移动端页面按手机屏幕分辨率自动缩放的js代码,通过阻止浏览器的默认行为各方面分析缩放的功能实现,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下. 手机的屏幕有大有 ...
关于移动端页面在手机调整字体大小后无法正常显示（已解决）
关于移动端页面在手机调整字体大小后内容适配的问题,作为新手我也刚好是第一次遇到, 已经完成的移动端页面,正常情况下在手机上的浏览器端和App端都可以正常显示,可当测试把手机字体调大后,布局就忽然变乱 ...
mac 4k分辨率字太小 27寸 hidpi_2019年显示器选购经验分享上篇（点距与尺寸和分辨率的关系）...
最近不知道怎么了,总想研究显示器,其实现在用的显示器也没坏,也许是需要新鲜感. 先说用途需求和预算: 接苹果MBP和台式机设计,修图,视频剪辑,但不靠这个吃饭. 打打单机游戏,看看电影看重:更大的 ...
Web前端——移动端页面开发
Web前端笔记第五部分:移动端页面开发 1. 移动端与PC端页面布局区别视口视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域大, 宽度可能是980px或者1024px,目的是为了显示 ...
移动端页面按手机屏幕分辨率自动缩放的js
1 <script> 2 var phoneWidth = parseInt(window.screen.width); 3 var phoneHeight = parse ...
常用手机尺寸以及分辨率
最近做的页面用到手机尺寸和常用的分辨率对比,整理了一下,共享一下: 320*240 3.7 400*240 3.8 432*240 4 480*272 4.2 480*270 4.3 480*320 ...
vue移动端页面调用手机拍照_vue实现PC端调用摄像头拍照、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式...
export default { () { return {} }, methods: { # // 压缩图片 and 旋转角度纠正下方代码 # 需要自行去掉个人只作为着色效果加上 compres ...
手机像素与分辨率的关系
前几天弄的安卓app今天测试突然变慢了,巧了的是安卓手机出毛病了(180买的二手安卓机)不能ADB调试,更巧的是电脑安卓模拟器也打不开(网络适配器出问题了),Android studio运行不了deb ...

前端移动端页面与手机尺寸和分辨率的关系

概念

前端移动端页面与手机尺寸和分辨率的关系相关推荐

最新文章

热门文章