【前端】移动端布局--视网膜屏幕(retina屏幕)清晰度解决方案
视网膜屏幕指的是屏幕的物理像素密度更高的屏幕,物理像素可以理解为屏幕上的一个发光点,无数发光的点组成的屏幕,视网膜屏幕比一般屏幕的物理像素点更小,常见有2倍的视网膜屏幕和3倍的视网膜屏幕,2倍的视网膜屏幕,它的物理像素点大小是一般屏幕的1/4,3倍的视网膜屏幕,它的物理像素点大小是一般屏幕的1/9。
图像在视网膜屏幕上显示的大小和在一般屏幕上显示的大小一样,但是由于视网膜屏幕的物理像素点比一般的屏幕小,图像在上面好像是被放大了,图像会变得模糊,为了解决这个问题,可以使用比原来大一倍的图像,然后用css样式强制把图像的尺寸设为原来图像尺寸的大小,就可以解决模糊的问题。
清晰度解决过程示意图:
图片可以通过css宽高设置成一半的数值进行适配,那个背景怎么处理呢?需要同背景属性设置:
background-size:120px 1680px;
背景图强制改变大小,可以使用background新属性
background新属性
background-size:
- length:用长度值指定背景图像大小。不允许负值。
- percentage:用百分比指定背景图像大小。不允许负值。
- auto:背景图像的真实大小。
- cover:将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
- contain:将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。
【前端】移动端布局--视网膜屏幕(retina屏幕)清晰度解决方案相关推荐
- 前端开发之——网页如何适配Retina屏幕
前言 随着2012年苹果发布第一款Retina Macbook Pro(以下简称RMBP),Retina屏幕开始进入笔记本行业.两年过去了,RMBP的市场占有率越来越高,且获得了一大批设计师朋友的青睐 ...
- 【iOS 开发】iOS 开发 简介 (IOS项目文件 | MVC 模式 | 事件响应机制 | Storyboard 控制界面 | 代码控制界面 | Retina 屏幕图片适配)
一. iOS 项目简介 1. iOS 文件简介 创建一个 HelloWorld 项目, 在这个 IOS 项目中有四个目录 : 如下图; -- HelloWorldTests 目录 : 单元测试相关的类 ...
- 7种方法实现移动端Retina屏幕1px边框效果
在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样 ...
- 前端开发之retina屏幕
像素 && ppi 首先先说一下pixel(picture element),显示图像的最小单位,有多个带色彩的像素点组成的整体就是一张图像.然后再说一下ppi(pixel per i ...
- iOS视网膜(Retina)屏幕的适配方法
转自:http://www.penddy.com/mobile-client-knowledge-processing-1-ios-retinal-adaptation-of-the-retina-s ...
- 关于前端Retina 屏幕兼容和基于Retina 屏幕兼容的雪碧图技巧
由于苹果电脑的普及,所以Retina 屏幕兼容越来越重要,在普通屏幕上正常的背景,在Retina 屏幕上都会发虚. 首先新建一个scss文件,起名为utils.scss ,在文件中写入下面代码: /* ...
- 【移动端布局】1 -基本概念:设备像素、css像素、屏幕尺寸、像素密度ppi、像素比dpr、viewport、meta标签、样式重置
文章目录 0.关于web app 1.移动端与pc端的区别 2.尺寸相关概念 2.1.设备像素(物理像素) 2.2.CSS像素(设备独立像素,逻辑像素) 2.3.屏幕的尺寸 2.4.像素密度PPI - ...
- HTML5与CSS3视口-retina屏幕适配
1.视口 视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域大,宽度可能是980px或者1024px,目的是为了显示下整个为PC端设计的网页,这样会让移动端出现横向滚动条,为了避免这种情况, ...
- Qt on Mac 开发之 Qt在Retina屏幕上的那些问题
目录 1.解决Qt在Retina屏幕上的图片模糊问题 2.解决Qt在Retina屏幕上的密度问题 1. iOS 2. Android 3. 视网膜MacBook 3.解决Qt在Retina屏幕上的刷新 ...
最新文章
- 浏览器默认标签样式总结及css初始化程序(转)
- [转载]Lua和C++交互详细总结
- 硬核!手写一个优先队列
- 天池实验室|读取数据集的两种方式
- 查找列表元素的最大最小值(python)
- redis和memcache的对比
- ubuntu shuangxitong
- 新手理解Navigator的教程
- [FZYZOJ 1002] 雨天
- matlab在高等数学中的应用,Matlab在高等数学中的若干应用
- 一款真正可以操作的数据中心可视化管理软件
- 以图搜图 图像匹配_基于内容的图像检索(CBIR) ——以图搜图
- 涉密计算机病毒库升级管理,涉密计算机管理制度.doc
- Android平台版本-API级别与版本号对照表,移动开发技术导论答案
- 台式计算机怎么进入bios,小编告诉大家hp台式机怎么进bios
- HX711称重模块的使用
- python—you-get下载工具、wget下载工具
- 【无为则无心Python基础】— 18、Python字符串的格式化输出
- 如何在Microsoft Edge中更改主页
- 蹲175年的号子?维基解密阿桑奇动了谁的奶酪?