像素分辨率 | 易学教程

从网易与淘宝的font-size思考前端设计稿与工作流

阅读更多关于从网易与淘宝的font-size思考前端设计稿与工作流

最近翻了一下关于移动端的rem的使用，怎样最方便。在读到流云诸葛的一篇关于《从网易与淘宝的font-size思考前端设计稿与工作流》的文章后，来总结一下。然而根据我以往做移动端web项目的时候，设计稿一般是640或者750的，我一般会在head里面这样写： <meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi"> 做移动端活动的时候结构也一般这样： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="yes" name="apple-mobile-web-app-capable">  <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title

Vue实现PC端分辨率自适应

阅读更多关于 Vue实现PC端分辨率自适应

方案 lib-flexible + px2remLoader lib-flexible ：阿里可伸缩布局方案 px2rem-loader ： px 转 rem 安装依赖 npm install px2rem-loader -D npm install lib-flexible -S 引入依赖 main.js 引入 lib-flexible import 'lib-flexible' px转换成rem vue-loader 的 options 和其他样式文件 loader 最终是都是由 build/utils.js 里的方法生成的，我们只需在 cssLoader 后再加上一个 px2remLoader 即可， px2rem-loader 的 remUnit 选项意思是 1rem=多少像素，结合 lib-flexible 的方案，我们将 px2remLoader 的 options.remUnit 设置成设计稿宽度的 1/10 ，这里假设设计稿宽为 1920px build/utils.js 中添加 px2remLoader const cssLoader = { loader: 'css-loader', options: { sourceMap: options.sourceMap } } // 增加代码，px转rem配置（需要将px2remloader添加进loaders数组中）

直播画质保障的三要素分析

阅读更多关于直播画质保障的三要素分析

在直播搭建过程中，经常会忽略一些问题的存在，直播间画质的保障是需要码率、帧率、分辨率三者达到平衡才行，拓幻科技具体分析如下： 1.帧率直播过程中，帧率容易影响画面的流畅度，帧率是指1秒钟内传输图片的帧数，也可以理解为图形处理器每秒刷新的次数。帧率越大，直播画面越流畅；帧率越小，画面抖动越厉害。其中，帧率会直接影响到视频的体积，每秒种经过的画面越多，需要的码率就越高，视频的体积也会越大。 2.分辨率直接影响直播图像的大小，分辨率越高图像越大，分辨率越低，图像越小。 3.清晰度直播过程中，如果，码率是固定的，那么分辨率会与清晰度成反比，也就是说，在相同码率情况下，分辨率越高，图像越不清晰，分辨率越低，图像清晰度越高。分辨率固定，码率越高，图像越清晰，分辨率越低，图像越不清晰。如果不将码率的大小进行限制，那么分辨率越高，直播中的画质会越高，帧率越高视频就会越流畅，相应的码率也会很大。因为每秒钟需要用更多的数据去承载更高的清晰度和流畅度，在保证清晰度和流畅度的情况下，流量的消耗也会相应增加，造成的费用开支也会随之变的更多。在开发直播APP软件的过程中，如果给码率一个固定的值，那么帧率越高编码器就越要加大对单帧画面的压缩比，也就是通过降低画质来承载足够多的的帧数，假如是使用摄像头获取视频内容，人眼的极限帧数是24FPS，再过于清晰的画面就可能会造成不适，观看直播

Web地图呈现原理

阅读更多关于 Web地图呈现原理

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 以下内容转载自木的树的文章《Web地图呈现原理》作者：木的树链接： https://www.cnblogs.com/dojo-lzz/p/9250637.html 来源：博客园著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。本篇内容为大家揭开地图呈现原理，大家可通过腾讯位置服务官网了解地图并体验！地图投影对于接触互联网地图的同学来说，最开始接触的恐怕就是坐标转换的过程了。由于地球是个近似椭球的形状，有各种各样的椭球模型来模拟地球，最著名的也就是GPS系统使用的WGS84椭球了。但是这些椭球体的坐标使用的是经纬度，单位是角度。目前我们的地图大多是二维平面上展示，使用角度为基础来计算多有不便，所以有众多数学家提出各种不同的转换方式来将经纬度表示的位置转换成平面坐标，这个转换过程地图学上成为投影。投影的方式多种多样，对我们做互联网地图的来说，最重要的就是墨卡托投影的变体——Web墨卡托投影。我们先来看一下墨卡托投影的转换过程（以赤道本初子午线为原点）投影完毕后的结果就是：先不要头疼数学公式，已经有很多类库做好了代码实现，比如leaflet： L.Projection.Mercator = { R: 6378137, R_MINOR: 6356752.314245179,

Android碎片化之屏幕适配

阅读更多关于 Android碎片化之屏幕适配

Android碎片化之屏幕适配现如今，因Android系统的开放性，市场上出现了不同厂商出厂的各种android版本、分辨率、型号等设备。那对我们开发来说，碎片化绝对是一个让人头脑炸裂的问题，Android系统碎片化、Android机型屏幕尺寸碎片化、Android屏幕分辨率碎片化。市面上安卓手机的主流屏幕尺寸种类繁多，就算搞定了屏幕尺寸问题，各种分辨率又让人眼花缭乱。面对测试同学抛过来的适配问题，心肝肺都要颤一颤。今天我们就谈谈屏幕适配的解决步骤。一、解决屏幕适配的方案都有： “布局”匹配：使用相对布局（RelativeLayout），禁用绝对布局（AbsoluteLayout）。根据屏幕的配置来加载相应的UI布局，尺寸（size）限定符。 “布局组件”匹配：使用"wrap_content"、"match_parent"和"weight“来控制视图组件的宽度和高度 “图片资源”匹配：使用自动拉伸位图：Nine-Patch的图片类型二、Android屏幕适配的一些名词含义：屏幕尺寸：也就是我们平时所说的某某手机是几寸屏，比如HTC one V这款手机是3.7寸的，这里的寸说的是英寸（inch），国际上习惯使用的单位，1inch = 2.54cm，3.7寸指的是屏幕的对角线的长度。屏幕分辨率：指屏幕的宽和高的像素数，比如HTC one V是480*800的。

9102年了，再谈屏幕适配！

阅读更多关于 9102年了，再谈屏幕适配！

前言众所周知，Android授权的厂商不计其数，生产出的机型也数不胜数，导致尺寸碎片化很严重。当然，都9102年了，大家逐渐得到了最优解，国内主流机型基本上都在720、1080、1440徘徊，最多高度上各有所长，但是还是保留着不少其他分辨率的手机，先来看一组数据（来源：友盟）如图所证上述结论的正确性，但是可以看到，每年都有比例不小的其他尺寸的手机占据着市场份额，更何况那些还在服役的古董机器。我相信，这部分用户群是不可能被产品经理所割舍的。为了解决这个问题，我们当然可以：善于使用RelativeLayout、Linearlayout、ConstraintLayout；合理使用wrap_content、match_content；使用minHeight、minWidth、lines、ellipsize等等属性；使用dp、sp单位；以某个页面为单位针对不同的手机使用不同的布局、图片、dimen；但是我想说，以上种种，只是一个Android开发应该具备的基本素质。也许有人会问，这些还不够吗？而且dp、sp不已经是官方适配过了的单位吗？下面我们就来逐步剖析。为什么官方需要使用设备独立像素适配设备独立像素（dp、sp），又叫逻辑像素，是一种用缩放因子（scale）计算出来的、和像素有一定的换算比例的、不受设备分辨率和密度（ppi）制约的尺寸单位。那么什么是分辨率

9102年了，再谈屏幕适配！

阅读更多关于 9102年了，再谈屏幕适配！

分辨率、DPI、PPI和屏幕尺寸，你都知道是啥么？

阅读更多关于分辨率、DPI、PPI和屏幕尺寸，你都知道是啥么？

分辨率、DPI、PPI和屏幕尺寸分辨率 DPI/PPI 坑爹的屏幕尺寸 Reference 手机开发中不免会遇到分辨率、DPI、PPI和屏幕尺寸等术语，那就弄弄清楚这些概念的真正含义。分辨率分辨率这个词在很多地方都有，比如相机、视频、扫描仪。这里说的就是显示器的分辨率。显示器是由一个个像素点(pixel)所组成的，一般所说的显示器分辨率是1280x720就表示这个显示器水平方向有1280个像素，垂直方向上有720个像素。但是并非分辨率越高屏幕显示效果越好，还需要根据屏幕的大小来决定。也就是要看像素的密度(pixel density)，这个指标就是DPI(Dots Per Inch)或者PPI(Pixels Per Inch)，即英尺屏幕上像素或者是点的个数。 DPI/PPI DPI = Dots Per Inch PPI = Pixel Per Inch 两个参数的区别就在于Dot和Pixel的区别，dot值的是显示器上每一个物理的点，而pixel指的是屏幕分辨率中的最小单位。这个两个难道会不一样么？会！当一个像素需要多于一个屏幕上的物理点来显示的时候dot就跟pixel不一样了。这个有另一个叫法叫做dppx(dot per pixel)，即每个像素中有多少个点。大部分的显示器中一个像素即一个点，但目前一些比较好的屏幕和一些手机屏幕中dppx会大于1。比如说Mac

对屏幕的理解---分辨率，dpi，ppi，屏幕尺寸，像素等

阅读更多关于对屏幕的理解---分辨率，dpi，ppi，屏幕尺寸，像素等

1. 名词理解屏幕尺寸(screen size) 　　屏幕尺寸(screen size) ，是屏幕的对角线长度，一般讲的大小单位都是英寸。 DPI (dots per inch) 　　dpi 是（英文Dots Per Inch）（每英寸所打印的点数）的缩写，是打印机、鼠标等设备分辨率的单位。国际上都是计算一平方英寸面积内像素的多少。这是衡量打印机打印精度的主要参数之一，一般来说，该值越大，表明打印机的打印精度越高。如果对于扫描设备，dpi越大，则采样点越高，扫描的图片越清晰。　　可以理解为像素的密度，即单位面长度上的所打印点的数量。 PPI (pixels per inch) 　　PPI (pixels per inch)（每英寸的像素数量）的缩写像素(Pixel) （1）对于数字图像来说　　　简单的说，我们通常所说的像素，就是CCD/CMOS上光电感应元件的数量，一个感光元件经过感光，光电信号转换，A/D转换等步骤以后，在输出的照片上就形成一个点，我们如果把影像放大数倍，会发现这些连续色调其实是由许多色彩相近的小方点所组成，这些小方点就是构成影像的最小单位 “像素”（Pixel）。如果这些感光点的是彩色像素点，把一个数字图像方法到一定程度，可以看到一个个像素点，如下图所示：　　（2）对于硬件显示设备来说　　对于计算机的屏幕设备而言，像素

从网易与淘宝的font-size思考前端设计稿与工作流

阅读更多关于从网易与淘宝的font-size思考前端设计稿与工作流

　　从博主学习前端一路过来的经历了解到，前端移动开发是大部分从PC端转战移动端的小伙伴都非常头疼的一个问题，这边博主就根据一篇自己看过的移动开发文章来剖析一下网易和淘宝的rem解决方案，希望能够帮助到一些从PC端转战web移动开发的小伙伴，因为是第一次写博文，写得不好的地方也希望大家多多包涵啦(*^__^*) 嘻嘻……（ps:文章有点长，如果你现在时间紧迫，那可以先收藏，等到有时间了再回头慢慢品尝喔）首先我们一起看看这篇打通博主web移动开发任督二脉的武功秘籍吧（以下内容到分割线前是引用前端大牛的文章，方便大家理解博主内容）：从网易与淘宝的font-size思考前端设计稿与工作流 1. 简单问题简单解决我觉得有些 web app并一定很复杂，比如拉勾网，你看看它的页面在iphone4,iphone6,ipad下的样子就知道了：它的页面有一个特点，就是：顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边这种app是一种典型的弹性布局：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。对于这类app，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放。以图描述：这个规则是一套基本的适配规则，对于这种简单app来说已经足够，同时它也是后面要说的rem布局的基础

订阅像素分辨率