精华内容
下载资源
问答
  • 概念 英寸 1英寸 大概2.54cm ...没错,手机中显示的任何图形图像都是由这些小点组成。 分辨率 .、 720x1280 . 、 750x1334 横向容纳750个像素点 纵向容纳1334个像素点 ppi — pixcei per inch 像素

    概念

    1. 英寸
      1英寸 大概2.54cm
      5.5英寸 指的是手机对角线

    2. 像素
      .  一个屏幕都是由一个一个像素组建而成的,每个像素都对应一个小点。我们常见的 640*960 像素就说明了一个屏幕中包含了多少个小点(像素点),640列与960行像素点,乘一下就知道有多少个了,反正很多很多个。没错,手机中显示的任何图形和图像都是由这些小点组成。

    3. 分辨率
      .、 720x1280
      . 、 750x1334 横向容纳750个像素点 纵向容纳1334个像素点

    4. ppi
      — pixcei per inch 像素每英寸
      每英寸像素点的数量
      电子设备72
      打印小文件 300
      宣传栏 150-200

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

    6. 视网膜屏
      . Retina屏 dpi(dot per inch)超过300的屏幕

    7. 单位pt
      换算像素px
      iphone 5/6/7
      1:2
      iphone 5 6 7plus
      1:3
      iphonx
      1:3

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

    9. 常见间距
      8pt
      15pt

    10. 常见的文字
      标题17pt
      正常13pt
      最新10pt

    11. 前端如何运用
      设计师的设计稿
      750x1334
      2倍
      720x1280
      2倍
      1242x2208
      3倍
      1080x1920
      3倍
      看网上

    12. 尺寸安排方式

    如果以像素为单位
     设计稿子尺寸/倍数
    设计稿:88px
    写height:44px @2倍
    设计稿:60px
    写height:20px@3倍
    - 以rem为单位
    
    展开全文
  • 手机的尺寸和分辨率

    2020-09-10 19:21:35
    手机的尺寸和分辨率一、移动端尺寸基础知识1、英寸2、像素3、分辨率4、IOS前端如何运用 一、移动端尺寸基础知识 1、英寸 英寸是常用的长度单位,在工业领域被广泛使用,很多图纸、铭牌上都是使用英寸作为长度单位。...

    一、移动端尺寸基础知识

    1、英寸

    英寸是常用的长度单位,在工业领域被广泛使用,很多图纸、铭牌上都是使用英寸作为长度单位。显示设备特别是电视机使用英寸来表示大小,手机屏幕也继承了这个计量单位。
    在这里插入图片描述
    如描述iPhone 4s的屏幕是3.5英寸

    2、像素

    图像是由一个个小点组成的,这些小点就是像素点。图像的基本采样单位,它不是一个确定的物理量,因为像素点的物理大小是不确定的。像素也不是一个具体的点或者小方块(尽管可以用点和小方块来呈现),而是一个抽象的概念。

    3、分辨率

    分辨率是屏幕像素的数量,一般用屏宽像素数乘以屏高像素数表示。
    描述iPhone 6的屏幕分辨率是750×1334,就是iPhone 6的屏幕是由750列和1334行的像素点排列组成的,每个像素点发出不同颜色的光,构成我们所看到的画面。
    在PC时代,分辨率越高,意味着屏幕越大,因为PC具有固定的PPI。但智能手机的屏幕就不是如此了,因为手机的像素密度是不一样的。

    4、IOS

    1、单位pt点
    换算像素px
    iPhone 5/6/7
    换算: 1:2

    iPhone 5/6/7 plus
    换算: 1:3

    iPhone x
    换算: 1:3
    2、常见尺寸
    常见尺寸
    状态栏 20pt
    导航栏 44pt
    列表 44pt
    底部 49pt
    列表图标/分段器 29pt
    switch w51 h31 r28
    3、常见间距
    常见间距
    8pt
    15pt
    4、常见的文字
    常见的文字
    标题 17pt
    正常 13pt
    最新 10pt

    前端如何运用

    1、设计师的设计稿
    750x1334
    2倍

    720x1280
    2倍

    1242x2208
    3倍

    1080x1920
    3倍

    看的网上
    2、尺寸安排的方式

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    

    如果以像素为单位

    设计稿子尺寸/倍数
    设计稿:88px
    写height:44px @2倍

    设计稿:60px
    写height:20px @3倍

    以rem为单位
    flexable.min.js
    修改设计稿的宽度
    在这里插入图片描述

    尺寸
    设计稿的尺寸/100+rem
    高:88px
    写 0.88rem

    展开全文
  • 移动端设备屏幕尺寸非常多,碎片化严重。尤其是Android,你会听到很多种分辨率:480×800, 480×854, 540×960, 720×1280, 1080×1920,而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了:640×960, 640×...

    9e18c8797ddd

    尺寸.png

    手机屏幕分辨率是手机重要的参数,大家可能会把分辨率对成手机的高宽度,这是不正确,了解分辨率是ui设计必要的,前端所需要知道的。

    移动端设备屏幕尺寸非常多,碎片化严重。尤其是Android,你会听到很多种分辨率:480×800, 480×854, 540×960, 720×1280, 1080×1920,而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了:640×960, 640×1136, 750×1334, 1242×2208。

    逻辑分辨率与物理分辨率

    俗话说物理分辨率是硬件所支持的,逻辑分辨率是软件可以达到的。我来看看iphone的参数图

    9e18c8797ddd

    ios-物流尺寸分辨率.png

    物理尺寸是指屏幕的实际大小。大的屏幕同时必须要配备高分辨率,也就是在这个尺寸下可以显示多少个像素,显示的像素越多,可以表现的余地自然越大

    640*960、640*1136等这些都是物理尺寸或是物理分辨率。

    而下面的320*480、320*568等这些都是逻辑分辨率或是逻辑尺寸。

    如果我们设计的时候用单位px,可以说是物理分辨率尺寸。

    如果我们设计的时候用单位pt,可以说是逻辑分辨率尺寸。

    下面拿iphone 6 plus详细分析:

    9e18c8797ddd

    iphone-6-plus-物流尺寸分辨率2.png

    1、iPhone 6 Plus 的逻辑point分辨率用 360×640,也不是不可以,也即上面图表中的 iPhone 6+ (b)方案,那么 scale 用 @3x,最终像素分辨率 360×640@3x 正好是 1080×1920,完美1:1映射,无需缩放;但缺点就是:iPhone 6 Plus的逻辑pt分辨率 360×640 就会比 iPhone 6的 375×667 还低,这天理不容啊,一个Plus的大屏幕虽然很精细,但是可显示的实际内容比 iPhone 6 还少。完全不符合 Bigger than bigger 。

    打个比方就是:相同字号的情况下,iPhone 6如果一行显示了25个字,而 iPhone 6 Plus 按这个逻辑pt方案,一行就会只能显示24 个字了。

    2、那如果逻辑point分辨率用 540×960 呢,也即图表中的 iPhone 6+ (c) , scale 沿用老的 @2x ,最终像素分辨率 540×960@2x 不正好是 1080×1920 吗,也是完美1:1映射,无需缩放,还不需要多余做 @3x 素材; 而且这个方案的优点也很明显: pt 面积是 iPhone 6 的两倍 (540×960 = 375x667x 2),这样屏幕可显示的内容一下就增多了 ; 但这个方案的缺点就更明显了: 所有 iOS UI 元素尺寸在屏幕上的实际物理面积一下子就变小了,比如标签栏或导航栏按钮的物理高度只有原来的 81.5% ,

    点击面积就只有iPhone 6的 0.815*0.815=66.4%,用户点击就困难了,总不至于苹果考虑触摸手指操作,为 <= iPhone 6 做一套设计规范,为 iPhone 6 Plus 再另外做一套设计规范。

    展开全文
  • 分辨率可以分为两方面:屏幕分辨率和图像分辨率。 PPI单位像素密度,表示的是每英寸所拥有的像素数,是图像分辨率的单位。 屏幕分辨率: 例如,屏幕分辨率是1024×768,也就是说设备屏幕的水平方向上有1024个像素点...

    知识点
    像素即px,是画面中最小的点(单位色块)。分辨率=画面水平方向的像素值 * 画面垂直方向的像素值。分辨率可以分为两方面:屏幕分辨率和图像分辨率。
    PPI单位像素密度,表示的是每英寸所拥有的像素数,是图像分辨率的单位。

    1. 屏幕分辨率: 例如,屏幕分辨率是1024×768,也就是说设备屏幕的水平方向上有1024个像素点,垂直方向上有768个像素点。像素的大小是没有固定长度的,不同设备上一个单位像素色块的大小是不一样的。 例如,尺寸面积大小相同的两块屏幕,分辨率大小可以是不一样的,分辨率高的屏幕上面像素点(色块)就多,所以屏幕内可以展示的画面就更细致,单个色块面积更小。而分辨率低的屏幕上像素点(色块)更少,单个像素面积更大,可以显示的画面就没那么细致。
    2. 图像分辨率: 例如,一张图片分辨率是500x200,也就是说这张图片在屏幕上按1:1放大时,水平方向有500个像素点(色块),垂直方向有200个像素点(色块)。 在同一台设备上,图片分辨率越高,这张图片1:1放大时,图片面积越大;图片分辨率越低,这张图片1:1缩放时,图片面积越小。(可以理解为图片的像素点和屏幕的像素点是一个一个对应的)。 但是,在屏幕上把图片超过100%放大时,为什么图片上像素色块也变的越大,其实是设备通过算法对图像进行了像素补足,我们把图片放的很大后看到的一块一块的方格子,虽然理解为一个图像像素,但是其实是已经补充了很多个屏幕像素;同理,把图片小于100%缩小时,也是通过算法将图片像素进行减少。 最后,虽然不同设备上像素块大小会不一样,但是同一台硬件设备上的屏幕分辨率、像素块大小是不会变的。PC电脑上之所以可以调整屏幕分辨率,其实也是通过算法转换了
    3. 5寸1080p分辨率的手机像素没有50寸4K显示器多,但PPI超过50寸4k显示器,所以等同距离下5寸1080p手机更细腻。

    参考:
    百度
    作者:咕咕一棵树
    链接:https://www.zhihu.com/question/21149600/answer/29971490
    来源:知乎

    展开全文
  • 做了个前端之后又出来了 Retina屏,同样尺寸的图,放在retina 的屏幕上的时候,就会相当模糊不清,这又是为什么呢?1.像素(pixel):表示图像数量的最小单位我们通常ps里的图片放大之后的每个小方格,就是一像素。...
  • 之前一直对手机尺寸(iphone4s:3.5英寸)和分辨率(640*960)概念不是特别清晰,简单做一下总结。 设备像素 DP(device pixels)  一个屏幕都是由一个一个像素组建而成的,每个像素都对应一个小点。我们常见的 ...
  • 在前几篇文章,我们大致了解了Android开发的一些常规模式方法,在这个过程中其实...我们看个例子可以看出这个加号icon在分辨率较高,尺寸较大的屏幕上反而显得略小dp(density-independentpixel)是与密度无关的像素单
  • 我们在做大屏的时候经常在开发环境开发的时候显示很完美,但是到了客户电脑就花样百出,出去浏览器对CSS3js语言新特性的兼容问题,其实大多是因为网页的缩放比,或者用户的高分屏的一些设置问题,如图通常这样设置...
  • 大家好。我的网页采用rem方案,需要放到大屏展示。 我利用js控制字体px大小 (function () { var rem =... (rem / 1920) * document....我前端使用了vueecharts插件,不过这个应该不影响。</p>
  • 1、分辨率屏幕尺寸、像素密度(ppi)。 2、逻辑像素物理像素。 3、ppi、pt、dpi、dp、sp它们与px之间的关系。 分辨率屏幕尺寸、像素密度(ppi) 以上是iphone6的尺寸图,它的分辨率是750*1334,大小是...
  • 目录: HTML 题目:屏幕尺寸分辨率,像素的区别 ...题目:屏幕尺寸分辨率,像素的区别 屏幕大小是以英寸为单位的,我们常说的英寸是手机屏幕对角线的长度,1英寸(inch)=2.54厘米(cm); 像素 是...
  • UI设计师web前端都需了解的知识点

    千次阅读 2017-12-14 00:00:00
    设计基础尺寸 字体 排版 色彩 布局 动画1、 尺寸一个网页的尺寸设置与屏幕分辨率和浏览器相关,我们不可能满足所有用户的最佳尺寸,但我们能做的是让绝大多数用户感觉是最佳的。我们可以通过统计分析工具获取用户...
  • 前端——笔试

    2021-02-25 11:45:47
    1.移动端适配 视口 可见视口:屏幕宽度 布局视口:DOM宽度 理想视口:使布局视口就是可见视口 ...屏幕像素密度与屏幕尺寸和屏幕分辨率有关,在单一变化条件下,屏幕尺寸越小、分辨率越高,像素密度越大,反
  • 理想视口(ideal viewport)即通常所说的屏幕分辨率,给出了网页在移动设备上的理想大小。理想视口没有一个固定的尺寸,不同的设备拥有不同的理想视口,可以在 ...
  • 主要重点是移动前端的方向因为现在设备会有各种屏幕比例(16:9) 分辨率(1024px_768px) 像素比(devicePixelRatio) 对于页面适配起来其实有很多值得思考的对方 页面宽度上的处理很方便 可以...
  • 1的屏幕适配,需要根据不同dpr给出合适尺寸的图片; 个人简介 我是歌谣,欢迎大家一起交流前后端知识。放弃很容易, 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
  • 良好前端架构的搭建

    千次阅读 2018-02-02 10:13:21
    建立一个好的前端架构是开始开发 Web 应用或网站的一个基本步骤。良好的实践和编码常规是必不可少...我希望我的项目支持不同的屏幕尺寸和分辨率,换句话说,我希望它是响应式的;我希望最终产品是可被维护的;我希望...
  • 移动设备与PC设备最大的差异在于屏幕,这主要体现在屏幕尺寸和屏幕分辨率两个方面 。通常我们所指的屏幕尺寸,实际上指的是屏幕对角线的长度(一般用英寸来度量) ​ 而分辨率则一般用像素来度量 px,表示屏幕...
  • 前端架构,项目目录结构

    万次阅读 2017-03-20 16:27:58
    建立一个好的前端架构是开始开发Web应用或网站的一个基本步骤。良好的实践和编码常规...我希望我的项目支持不同的屏幕尺寸和分辨率,换句话说,我希望它是响应式的; 我希望最终产品是可被维护的; 我希望最终产品性
  • Responsive Web DesignTester方便快捷的测试响应式网站的小工具WindowResizer模拟不同屏幕分辨率的工具PageRuler绘制页面的分割线,帮助来调整控制页面中的元素Dimensions一个帮助设计师控制屏幕尺寸的工具...
  • 大家在Android开发时,肯定会觉得屏幕适配是个尤其痛苦的事,各种屏幕尺寸适配起来蛋疼无比。如果我们换个角度我们看下这个问题,不知道大家有没有了解过web前端开发,或者说大家对于网页都不陌生吧,其实适配的问题...
  • 屏幕尺寸 屏幕尺寸指的是屏幕可视区域对角线的长度,单位都是英寸。 屏幕分辨率 通常情况下屏幕分辨率指的是屏幕可视区域横向纵向各有多少个物理像素用于显示。比如华为P9、小米5以及iPhone 6 Plus的分辨率都是...
  • Web前端响应式框架

    2021-04-06 16:20:04
    由于各种各样设备屏幕分辨率尺寸和型号越来越多,要在不同屏幕、不同系统平台等环境下保持网页布局的一致性,满足用户的一致体验已成为网页设计行业发展方向。基于Bootstrap框架的响应式网页设计就是一种全新的...
  • 移动端的布局不同于pc端,首先我们要知道在移动端中,css中的1px并不等于物理上的1px,因为手机屏幕的分辨率已经越来越高,高像素但是屏幕尺寸却没有发生太大变化,那就意味着一个物理像素点实际上塞入了好几个像素...
  • 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够。 优点 面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题 ...
  • 前端响应式原理

    2021-02-07 16:27:52
    响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局 响应式设计与自适应设计的区别: 响应式开发一套界面,通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局内容 自适应需要开发多套...
  • 媒体类型,屏幕尺寸分辨率 浏览器功能@supports 视口 用例:连字符,列,svg 颜色 不透明度诉Alpha透明度 外貌 其他伪元素 Flexbox的目的目标 浏览器支持规范 概述 基础知识 Flex容器属性 弹性项目属性 灵活...
  • 我们不仅要满足手机不通屏幕尺寸和分辨率的需求,还要满足其变化多端的外观需求。从早期的时短时长的长方形到后来的“大哥大”,在从精密小个头发展到完美比例的方形,手机丰富多彩、日新月异的变化简直让人抓狂! ...
  • 好程序员web前端技术分享移动端页面布局一、弹性布局(100%布局)的特点顶部与底部的bar不管分辨率怎么变,它的⾼度位置都不变; 中间每条招聘信息不管分辨率怎么变,招聘公司的图标等信息 都位于条目的左边,薪资...

空空如也

空空如也

1 2 3 4 5
收藏数 95
精华内容 38
热门标签
关键字:

前端屏幕尺寸和分辨率