前端开发之retina屏幕

news/2024/5/22 17:50:49

像素 && ppi

首先先说一下pixel(picture element),显示图像的最小单位,有多个带色彩的像素点组成的整体就是一张图像。然后再说一下ppi(pixel per inch)这个概念,其实就是在每英寸显示的像素数。

设备像素 && 逻辑像素 && dpr

设备像素(device independent pixels): 设备屏幕的物理像素
逻辑像素(CSS pixels): CSS像素

CSS样式和几乎所有的javascript设置html DOM 元素都使用CSS像素,因此实际上从来用不上设备像素,唯一的例外是screen.width/height。

dpr = 设备像素 / 逻辑像素

随着技术的发展,移动设备的屏幕像素密度越来越高。从iphone4开始,苹果公司推出了retina屏幕。。iphone4的分辨率提高了一倍,但屏幕尺寸却没有变化,这意味着同样大小的屏幕上,像素多了一倍,于是dpr = 2。dpr也有对应的javascript属性window.devicePixelRatio。以iphone5为例,iphone5的CSS像素为320px568px,dpr是2,所以其设备像素为640px1136px

前端开发

现在的iphone 6plus的dpr是3,所以UE出的设计稿宽都是414 * 3的,而我们在开发的时候都是把UE的字体、块宽和高等标注同时 / 3,这样就能和设计稿保持一致。当我们截屏iphone 6plus浏览器中访问开发好的网页,放到ps中进行测量,和设计稿中一致。

在这里一定要注意,在retina屏幕中显示图片的时候,为了保证不失真模糊,图片的尺寸必须是图片的显示尺寸 * dpr,这样在retina屏幕中被放大dpr倍后才会不失真。

例子

注意以下两种实现方式都有问题,显示单边1px,在retina屏幕上会有一条细缝,4边1px,在retina屏幕上会存在position定位从块元素的padding开始定位,会覆盖2条边,另外2条边则多出来了

图片描述

单边1px

codepen实例

以下代码实现的是底部1px变换,其原理: 使用伪元素after绝对定位到块元素底部,宽度100%,高度1px,在Y轴上缩放1倍,记住要设置背景色。

html

<div class="box-1px-bottom-border">I'm box 1px bottom border</div>

css

.box-1px-bottom-border {position: relative;width: 100px;height: 100px;background: #0f0;&:after {content: ' ';display: block;left: 0;right: 0;position: absolute;bottom: 0;height: 1px;background: #f00;-webkit-transform-origin: 0 0;transform-origin: 0 0;@media screen and (-webkit-min-device-pixel-ratio: 2) {-webkit-transform: scaleY(.5);transform: scaleY(.5);}}
}

四边1px边框

codepen实例

<div class="box-four-side-border">I'm box four side border</div>

css

.box-four-side-border {width: 100px;height: 100px;background: #00f;position: relative;&:after {content: " ";display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;border: 1px solid #f00;@media screen and (-webkit-min-device-pixel-ratio: 2) {width: 200%;height: 200%;-webkit-transform-origin: 0 0;transform-origin: 0 0;-webkit-transform: scale(.5);transform: scale(.5);}}
}

http://lihuaxi.xjx100.cn/news/242408.html

相关文章

linux哪些文件被更新,Linux:如何確定文件是否已被其他進程更新?

6John mentioned the two main routes you can take for watching files under Unix/Linux systems: notification and polling.John提到了在Unix / Linux系統下觀看文件可以采取的兩條主要途徑:通知和輪詢。Notification is when the system itself (usually the kernel) trig…

Python os库的使用

1. 基本介绍 os提供通用的、基本的操作系统交互功能 os库是Python的标准库&#xff0c;提供几百个处理函数 常用有路径操作、进程管理、环境参数等几类 路径操作&#xff1a;os.path子库&#xff0c;处理文件路径及信息 进程管理&#xff1a;启动系统中其他程序 环境参数&…

测试我的第一个随笔

# encodingutf-8## Python Version 3.5# 利用数学中的复数 求解 一元一次方程(从网上看来的)def solve(qx, var): qx qx.replace(, -() ) c eval(qx , {var: 1j}) return -c.real/c.imagres solve(2*x 4 8,x)print(res)转载于:https://www.cnblogs.com/imyjy/p/…

UI设计培训分享:UI设计的职业发展路径

UI设计师这个岗位也是分等级的&#xff0c;有初、中、高级区别&#xff0c;想要在UI设计这个行业站稳脚跟&#xff0c;那么一定要为一名合格的高级UI设计师&#xff0c;下面小编就为大家详细的介绍一下UI设计的职业发展路径。 UI设计培训分享&#xff1a;UI设计的职业发展路径&…

ITFriend站点内測公測感悟

4月份做出站点Demo。就開始让用户使用了。最初的黄色版界面。被吐槽得比較厉害。关于界面。每一个人都有自己的看法&#xff0c;仅仅是喜欢和不喜欢的人比例不一样。后来。花3400元请了个设计师&#xff0c;设计了一套界面。总体效果令人惬意&#xff0c;一些细节也是被非常多用…

Python在linux服务器上解压,python3传文件到linux服务器然后解压

运维开发网 https://www.qedev.com2020-07-09 10:40出处&#xff1a;网络作者&#xff1a;运维开发网整理#!/usr/bin/env python# -*- coding:utf-8 -*-import osimport paramikoimport timefrom scp import SCPClient相关专题&#xff1a;#!/usr/bin/env python# -*- coding:u…

Python 第三方库自动安装脚本

需求&#xff1a;批量安装第三方库需要人工干预&#xff0c;能否自动安装&#xff1f; 现假设我们要安装以下库 #BatchInstall.py import os libs {"numpy","matplotlib","pillow","sklearn","requests",\ "jie…

UI设计培训分享:设计当中的颜色运用

参加UI设计培训的同学应该都知道&#xff0c;颜色的搭配是学习UI设计非常重要的一步&#xff0c;颜色跟其他的东西一样&#xff0c;适量才会运用得当&#xff0c;如果在你的配色计划中坚持使用马克思三原色的话&#xff0c;你会得到更好的配色结果&#xff0c;为一个项目配色时…