设计方案--如何设计移动端高清方案
一、前言
有时候需要前端做到移动端高清显示,1、面对开发移动端H5页面,2、面对不同分辨率的手机,3、面对不同屏幕尺寸的手机。
二、视觉稿
前端开发正常是,视觉的小哥哥给我们psd或者导出的skech文件,这个就是视觉稿,然后前端开始写结构,写元素,调整,优化等等。
对于移动端开发而言,达到页面高清的效果,视觉稿的规范往往会遵循这两点:
(1)选取一款手机的屏幕宽高作为基准(以前是iphone4的320*480,现在更多的是iphone6的375*667)。
(2)对于retina屏幕(可以将更多的像素点压缩至一块屏幕里,从而达到更高的分辨率并提高屏幕显示的细腻程度)(如:dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(比如iphone6的,原先的375*667,就会变成750*1334)。
肯定有疑问:(1)为啥dpr=2的手机,为什么画布大小*2,就可以解决高清问题?(2)对于2倍大小的视觉稿,具体的css是如何还原每一个区块的真实宽高(布局问题)?
三、基础概念
1、物理像素:一个物理像素是显示器(手机屏幕)上最小的物理显示单元,在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值。
2、设备独立像素:设备独立像素也叫与密度无关像素,可以认为是计算机坐标系统中得到一个点,这个点代表一个可以由程序使用的虚拟像素(比如:css像素),然后由相关系统转换为物理像素。
所以,物理像素和设备独立像素之间存在一定的对应关系,这就是要说的设备像素比。
3、设备像素比:设备像素比(简称为dpr)定义了物理像素和设备独立像素的对应关系,它的值可以根据公式计算得出:
设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上,x方向或者y方向
在javascript中,可以通过window.devicePixelRatio方法获取当前设备的dpr。
在css中,通过-webkit-device-pixel-ratio,-webkit-min-device-pixel-ratio和-webkit-max-device-pixel-ratio进行媒体查询,对于不同的dpr的设备,做一些样式适配(主要是针对webkit内核的浏览器和webview)。
4、举个例子
以iphone6为例:
(1)设备宽高为375*667,可以理解成设备的独立像素(css像素);
(2)dpr为2,根据上面计算公式,物理像素应该就是750*1334。
用一张图来表现,就是这样(原谅我的盗图):
在不同的屏幕上(普通屏幕 vs retina屏幕),css像素所呈现的大小是一致的,不同的是1个css像素所对应的物理像素个数是不一致的。
在普通屏幕下,1个css像素 对应 1个物理像素(1:1
)。 在retina 屏幕下,1个css像素对应 4个物理像素(1:4
)。
5、位图像素
一个位图像素是栅格图像(如:png,jpg,gif等)最小的数据单元。每一个位图像素都包含了一些自身的显示信息(如:显示位置,颜色值,透明度等)。
理论上:一个位图像素对应于1个物理像素,图片才能得到完美清晰的展示。。
普通屏幕没有问题的,但是在retina屏幕下会出现位图像素点不够,从而导致图片模糊的情况。
看一张图:
如图所示:对于dpr=2的retina屏幕而言,1个位图像素对于4个物理像素,由于单个位图像像素不可以在分隔,只能就近取色,从而导致图片模糊。
所以对于图片高清的问题,比较好的方案是两倍图片(长宽增大到2倍)。
如:200×300(css pixel)img标签,就需要提供400×600的图片。
如此下来,位像素点个数就是原来的4倍,在retina屏幕下,位图像素点个数就可以跟物理像素点个数形成1:1的比例,图片自然就清晰了,解决了第一个疑问。
如果出现,普通屏幕下,也用了两倍图片,会怎么样?
很明显,在普通屏幕下,200×300(css pixel)img标签,所对应的物理像素个数就是200×300
个,而两倍图片
的位图像素个数则是200×300*4
,所以就出现1个物理像素点对应4个位图像素点,它的取色也只能通过一定的算法(显示结果就是一张只有原图像素总数四分之一,我们称这个过程叫做downsampling(
降采样,降低数据采样率或分辨率的过程)
).肉眼看上去虽然图片不会模糊,但是会觉得图片缺少一些锐利度,或者是有点色差(但还是可以接受的)。
四、总结
移动端H5开发,在不同的分辨率,不同屏幕的手机下会遇到几个经典问题
1、retina下,图片高清的问题
上面已经讲到了解决方案:图片的长宽的两倍,然后图片容器缩小50%。
比如:
1、img 标签
width: 200px;
height: 300px;
2、背景图片
width: 200px;
height: 300px;
background-image: url(image@2x.jpg);
background-size: 200px 300px; // 或者: background-size: contain;
这样的缺点就是,普通屏幕下:
1、同样下载长度都2倍的图片,造成了资源浪费。
2、图片由于downSampling,会失去一些锐利度(或者色差)。
所以最好的解决办法:不同的dpr下,加载不同的尺寸的图片。
不管是通过css媒体查询,还是通过js条件判断都是可以的。所以需要准备两套图片。
2、retina下,border:1px的问题
1px是设计师用他的像素眼,最关心的问题。
还是通过一张图来解释(原谅我再次盗图):
上图中,对于一条1px
宽的直线,它们在屏幕上的物理尺寸(灰色区域)的确是相同的,不同的其实是屏幕上最小的物理显示单元,即物理像素,所以对于一条直线,iphone5它能显示的最小宽度其实是图中的红线圈出来的灰色区域,用css来表示,理论上说是0.5px
。
所以,设计师想要的retina下border: 1px;
,其实就是1物理像素宽,对于css而言,可以认为是border: 0.5px;
,这是retina下(dpr=2)下能显示的最小单位。
然而,无奈并不是所有手机浏览器都能识别border: 0.5px;
,ios7以下,android等其他系统里,0.5px会被当成为0px处理,那么如何实现这0.5px
呢?
最简单的一个做法就是这样(元素scale
):
.scale{position: relative;
}
.scale:after{content:"";position: absolute;bottom:0px;left:0px;right:0px;border-bottom:1px solid #ddd; -webkit-transform:scaleY(.5); -webkit-transform-origin:0 0; }
我们照常写border-bottom: 1px solid #ddd;
,然后通过transform: scaleY(.5)
缩小0.5倍来达到0.5px
的效果,但是这样hack实在是不够通用(如:圆角等),写起来也麻烦。
或者可以使用js来判断当前浏览器是否支持border的0.5px,如果支持就会在HTML上添加一个class名hairlines,
if (window.devicePixelRatio && devicePixelRatio >= 2) {var testElem = document.createElement('div'); testElem.style.border = '.5px solid transparent'; document.body.appendChild(testElem); if (testElem.offsetHeight == 1) { document.querySelector('html').classList.add('hairlines'); } document.body.removeChild(testElem); }
css
div {border: 1px solid #bbb;
}.hairlines div {border-width: 0.5px;
}
五、参考
1、http://www.smashingmagazine.com/2012/08/20/towards-retina-web/
2、http://www.paintcodeapp.com/news/iphone-6-screens-demystified
3、http://iconmoon.com/blog2/iphone-6-plus-screen-size/
4、http://dieulot.net/css-retina-hairline
转载于:https://www.cnblogs.com/chengxs/p/10944721.html
设计方案--如何设计移动端高清方案相关推荐
- 移动端高清、多屏适配方案
2019独角兽企业重金招聘Python工程师标准>>> 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件 ...
- 移动端高清适配方案(解决图片模糊问题、1px细线问题)
移动端高清适配方案(解决图片模糊问题.1px细线问题) 参考文章: (1)移动端高清适配方案(解决图片模糊问题.1px细线问题) (2)https://www.cnblogs.com/superliz ...
- 移动端高清、多屏幕适配方案
2019独角兽企业重金招聘Python工程师标准>>> 移动端高清.多屏幕适配方案 http://div.io/topic/1092 https://github.com/amfe/ ...
- AHD模拟高清方案汇总及国产替代方案介绍
** AHD模拟高清方案汇总及国产替代方案推荐 由于目前车载市场模拟高清方案对比LVDS数字高清方案在降本.远距离传输等方面的优势明显,及实现方案相对简单等原因,模拟高清方案一直是车载产品上有着较重要 ...
- 下载 电子商城类型htm模板_【精品素材】 3C数码科技手机产品首页装修psd模板PC端店铺首页设计素材_高清psd图片素材 1920*5054像素...
分类:PC端店铺首页 类目:数码家电 格式:psd 体积: 尺寸:1920*5054 编号:13028435 软件: Photoshop CS6(.psd) 颜色模式 : RGB 图像类型:位图 版权 ...
- css怎么实现加载的圆圈_图像高清方案——响应式图像让图像加载又快又省
# 什么是响应式图像 响应式图像指的是根据设备分辨率.设备像素比,甚至是屏幕方向.屏幕尺寸.页面布局等来加载正确图像,并且图片体积尽可能的小,视觉效果足够高清. 一个真实的场景:用户上传了一张高清图片 ...
- XS9922A,XS9922B四路模拟高清方案
XS9922A/B 是 4 通道模拟复合视频解码芯片方案,支持 HDcctv 高清协议和 CVBS 标清协议,最高支持 4 路 2M@30fps. XS9922A/B 将接收到的高清模拟复合视频信号经 ...
- 关于TI、海思(Hisilicon)、安霸(Ambarella)三家的百万高清方案的简单比较
针对百万高清前端摄像机,TI.Hisilicon.Ambarella三家的方案都有各自的优劣,没有一家是所有维度都占优的. 1.TI: 作为之前的监控芯片占有率No.1,技术底蕴丰厚,不过感觉TI前些 ...
- htpc电脑方案_完美高清方案!网友实战超迷你HTPC
随着高清应用的普及,客厅里组配一台专用的高清平台的人们也越来越多,我们都知道高清平台在硬件上看,大体差别不会不大,但高清平台的硬件均有一定的偏向性及属性,如一般高清平台主机均需要有节能.低功耗.体积小 ...
最新文章
- 聚焦基础科学 引领未来发展
- 2017-2018-2 20179204《网络攻防实践》第八周学习总结
- Perl新接触的小命令
- java oop_Java实现OOP(面向对象编程)
- 使用腾讯云提供的针对Nuget包管理器的缓存加速服务
- nvcc找不到的问题(Ubuntu16.04 CUDA 8.0)
- python 通过ip获取城市_python 根据ip获取地理位置
- wepy组件子父传值_【WePY小程序框架实战三】-组件传值
- Linux: 举例说明Linux diff 命令
- 架构师到底是啥玩意?
- Idea 添加lib文件夹,并添加至项目Libary
- 魔兽世界架设 mysql_魔兽世界单机版局域网的架设方法
- 计算机原理(3)-内存工作原理
- JavaWeb之servlet详解(转帖)
- java 伊甸园_离伊甸园仅一步之遥
- proxmox 控制台无法连接_Proxmox VE 5.4中的NAT网络-重置网络接口后,VM的连接消失了...
- 折线迷你图怎么设置_Excel如何制作小微型的迷你图?
- 推荐一个制作ios图标的网站
- 通讯型高清视频会议摄像机
- movie计算机英语作文,关于电影的英语作文movie
热门文章
- python职位应该叫什么_从事什么职位的人适合学习Python​?
- 配置python开发环境搭建_Eclipse配置Python开发环境
- linux新系统配置网络,怎样配置新安装的Ubuntu版Linux系统的..._网络编辑_帮考网
- java查询出来的日期类型_Java的第29天,Oracle函数
- Apple任意代码执行漏洞
- Spring Cloud Alibaba基础教程:Nacos的数据持久化 1
- [唐诗]183清平调词三首-李白
- 创建IPSEC连接安全
- mdk系列 Adsl 成功上网指南(非USB ADSL)
- 负载均衡mysql的使用_使用负载均衡集群集化 MySQL - Azure Virtual Machines | Microsoft Docs...