分辨率

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

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

Linux学习之分辨率设置及保存

亡梦爱人 提交于 2019-12-15 09:36:33
Linux学习之分辨率设置及保存 (该段为闲聊,关注问题请直接向下跳到问题描述及解决)最近在学习时需要安装Linux来学习使用,由于自己电脑机械硬盘的问题没法安装双系统,而我又不想动自己的C盘分出空间来使用安装Linux,所以无奈之下只好退而求其次使用虚拟机安装Ubuntu18.04版来使用。 当然这个18.04版本也确实让我比较惊喜的是它在我分配两核四进程之后几乎不卡顿,很流畅,就在我准备用它学习Linux同时,出现了学习路上的第一个问题。 问题描述及解决 在安装完成之后点击打开虚拟机,发现开机进度条“字”特别大,真正开机之后发现问题所在,是分辨率的问题。原本觉得和windows一样直接在设置中将分辨率一改就完事了,然后发现,压根没有符合我电脑的分辨率选项“1920*1080”, 那我就觉得,我找个看的过去的就凑合用吧,于是就选了“1920*1440”,保存的时候发现第一个问题,由于分辨率太小,鼠标压根点不到保存配置,此时该问题解决方法: 按住[ALT]键同时用鼠标拖动该对话框到适合位置即可点击保存配置。 至此由于无法点击到保存按钮的问题解决。 但是,这样只能用一次,下次启动电脑的时候,又会恢复原来的未经设置的分辨率,又得再重新设置,再保存,比较烦。那么有没有可以一劳永逸的方法呢,答案是有。 此时我们需要添加 /etc/X11/xorg.conf 文件

像素点+分辨率+帧缓存器

孤人 提交于 2019-12-15 00:50:26
像素+分辨率+帧缓冲器[对话框篇] 一、像素点 定义: 像素点是指图形显示在屏幕上时候,按当前的图形显示分辨率所能提供的最小元素点 举例: 如下图所示,截取一张电脑屏幕图片 如下图所示,放大后可以看见图片是由小的四方形组成,每一个四方形就是一个像素点 二、分辨率 屏幕分辨率就是屏幕上能显示的像素个数. 例如上面截取的电脑屏幕图片是大小是1920*1080(因为是截取整个电脑屏幕,因此也是屏幕分辨率的大小), 指的是每一行有1920个像素组成,每一列由1080个像素组成. 三、帧缓冲器 定义: 它是屏幕所显示画面的一个直接映象,又称为位映射图(Bit Map)或光栅。帧缓存的每一存储单元对应屏幕上的一个像素,整个帧缓存对应一帧图像。 存储单元 帧缓冲器的存储单元个数至少与显示器能显示的像素总数相同,且存储单元一一对应于可寻址的屏幕像素位置; 例如屏幕像素个数1920 1080,则对应显存的1920 1080个存储单位; 帧缓冲器每一个存储单元的位长决定了一幅画面上能同时显示的不同灰度的数目或颜色的种类 1)如果存储单元位长是1bit,则表示2种颜色的黑白图,显示效果如下 2)如果存储单元位长是4Bit,则是16种颜色(2的4次方)灰度图,显示效果如下 3)我们常用存储单元位长是是24bit,也就是RGB每一个用一个字节表示,显示效果如下 来源: CSDN 作者: 热带宇林1 链接:

EfficientNet论文解析

偶尔善良 提交于 2019-12-14 10:12:05
《EfficientNet:Rethinking Model Scaling for Convolutional Neural Networks》 论文地址: https://arxiv.org/pdf/1905.11946.pdf 参考原文 : https://www.cnblogs.com/dengshunge/p/11369695.html https://blog.csdn.net/Trent1985/article/details/91126085 https://blog.csdn.net/h__ang/article/details/92801712 1、基本概述 EfficientNet是谷歌大脑在2019年提出的,主要想解决的一个问题是, 如何平衡网络的深度、宽度和分辨率来提高模型的准确率 。 通常而言,提高网络的深度、宽度和分辨率来扩大模型,从而提高模型的泛化能力。但如果单一提高某个参数的话,模型准确率很快会达到饱和,如下图所示: 因此,需要同时对深度、宽度和分辨率来进行调整。作者提出了“复合相关系数(compound coefficient)”来动态提高这3个参数,如下图所示,(a)是baseline model,(b)-(d)是单一提高某个参数,(e)是3个参数动态调整。 下面,我们具体来了解一下EfficientNet的细节。 前文提及到,动态调整深度

超分辨率技术如何发展?这 6 篇 ECCV 18 论文带你一次尽览

浪子不回头ぞ 提交于 2019-12-12 15:14:51
<div class="markdown-body topic-content-big-font" id="emojify"> <blockquote> 作者:Tetianka Martyniuk 来源:量子位@微信公众号 还有什么能比国际顶会更能反映图像技术的最前沿进展?在这篇文章中,亲历了ECCV 2018的机器学习研究员Tetianka Martyniuk挑选了6篇ECCV 2018接收论文,概述了超分辨率(Super-Resolution, SR)技术的未来发展趋势。 一:学习图像超分辨率,先学习图像退化 论文: To learn image super-resolution, use a GAN to learn how to do image degradation first 为什么超分辨率经常被认为是个相当简单的问题?我曾经说过,因为它能够轻松得到训练数据(只需要降低获取图像的清晰度即可),所以和图像修复任务相比,超分辨率可能显得有些无聊。 但人工生成的低分辨率图像,和真实自然存在的图像一样吗?答案是否定的。和通过双三次插值生成的图像不同,真实世界的低分辨率图像明显属于不同类别。 因此,有人认为用这些人工生成的图像训练GAN并不能生成真实的图像。 为了处理这个问题,这篇论文的作者建议了两步走的方法:首先,用未配对的图像训练一个降低分辨率的GAN

论文阅读笔记(八)【IEEEAccess2018】:High-Resolution and Low-Resolution Video Person Re-Identification: A Benchmark

做~自己de王妃 提交于 2019-12-10 16:37:15
Introduction (1)Motivation: 监控视频中的行人,有的比较清晰,有的因为距离较远非常模糊. 在高低分辨率方面的行人重识别缺乏数据集和研究. (2)Contribution: ① 提供了一个关于高低分辨率问题(person re-identification between low-resolution and high-resolution,PRLHV)的新数据集,即 HLVID. ② 提出了集合间半耦合映射距离矩阵学习方法(semi-coupled mapping based set-to-set distance learning approach,SMDL). HLVID DataSet 记录人数:200人,50656张image,平均长度为126帧. 相机:2个,Camera A:1920*1080,Camera B:640*480. 行人帧的规格:高分辨率帧(HR):44*120 到 173*258,平均 105*203;低分辨率帧(LR):8*19 到 19*31,平均 11*21. 高分辨率帧的数量约为低分辨率数量的91倍. Approach (1)SMDL方法: ① 目标函数(假设相机A拍摄的数据为高分辨率,B拍摄的数据为低分辨率): 其中 W 表示距离矩阵,V表示高低分辨率对半耦合映射矩阵. 下文具体介绍目标函数中的两项. ② 半耦合映射项

关于canvas绘制图像模糊问题

笑着哭i 提交于 2019-12-10 10:26:02
前段时间在做项目的裁剪并上传图像功能的时候,发现裁剪后展示的图像比较模糊,之后去百度上搜索了一下,看到有一个解决方案是设置canvas的宽高为css宽高的3倍,使用后感觉效果很好,当时就没管原理接着做功能去了。 在昨天,我想试试做一个鼠标划入图片,图片已鼠标为中心,部分区域放大的demo(类似淘宝商品展示页面的那种)。在制作过程中,我又遇到了canvas转图片模糊的问题,因为当时在解决上个的问题的时候使用了谷歌搜索问题,便又用谷歌搜索了一下(当时忘了刚解决过同样的问题),发现出现这个问题的的原因在于当前显示设备的物理分辨率与CSS分辨率不同,这两个分辨率的比值可在JS中使用 window.devicePixelRatio 获取, 该属性返回一个当前显示设备的物理像素分辨率与CSS像素分辨率的比值。该值也可以被解释为像素大小的比例:即一个CSS像素的大小相对于一个物理像素的大小的比值。 在获取这个属性的值后,对canvas的宽高进行对应的缩放就可以得到不会模糊的图片啦。 这是示例代码: // img为用于展示canvas绘图结果的img元素 const img = document.querySelector('#img'); // 创建canvas const canvas = document.createElement('canvas'); const ctx = canvas

谈谈个人对移动端视口的理解

我是研究僧i 提交于 2019-12-08 02:09:29
1.笔者发现,同样的一个网页,在电脑端显示清楚,但是如果在移动端没有做自适应,有些情况下同一个网页在 移动端字体会变得很模糊。在开发移动端应用的时候,习惯性的我们会加上一下meta标签。 < meta name= "viewport" content= "width=device-width,initial-scale=1.0" user-scalable= "no;" > 2.为什么需要加上这个标签? (1)首先谈谈自己对于Layout viewport(布局视口)的理解 个人对于布局视口的理解,就是 设备当前选择的分辨率 。默认情况下,如果同一个电脑端网页要在移动端 显示IOS,Android都将这个视口设为980px,设想一般手机的分辨率是400*600px左右,如果要在该手机上呈现一个98 0px的视口,那么显然这个网页会变得模糊不清。 (2)什么是Visual viewport(视觉视口) 视觉视口,个人认为视觉视口与物理像素有关,一般的手机设备物理像素是大大的高于分辨率的, 也就是说视觉视口的大小是远远大于布局视口,下面是一段官方对于视觉视口的解释: visual viewport(视觉视口)备物理屏幕的可视区域,屏幕显示器的物理像素,同样尺寸的屏幕,像素密度大的设备,硬件像素会更多。例如iPhone的物理像素: iPhone5 :640 * 1136 iPhone6