一、视网膜屏技术

PC 端和早期的移动端网页中 , CSS 中配置的 1 像素对应的就是物理屏幕中的 1 像素 ;

Retina 视网膜屏幕技术出现后 , 将多个物理像素压缩到一块屏幕中 , 可以达到更高的分辨率 , 画面显示效果更好 ;

下图中都是 2x2 像素的 CSS 大小 , 但是在普通屏幕中是 4 个像素点 , 在视网膜屏幕中是 16 个像素点 ;

在普通屏幕中 , 填充 CSS 中的 2x2 像素的大小 , 需要一张 2x2 大小的图片 ;
在视网膜屏幕中 , 如果要填充 CSS 中的 2x2 像素的大小 , 需要一张 4x4 像素大小的图片 ;

在一个 CSS 设置 4x4 像素大小的区域中 , 如果强行为其设置 2x2 的图像 , 将其拉伸 , 就会导致图片模糊 , 无法发挥视网膜屏技术的最佳显示效果 ;

基于上述问题 , 提出了倍图概念 , 在标准的视口设置中 , 使用倍图提高图片质量 , 解决在高清设备中使用低分辨率图片导致的显示模糊问题 ;

如果要为 100x100 像素的盒子模型设置图片 , 可以准备一张 200x200 的图片 , 然后手动将图片缩小为 100x100 像素 ;

实际准备的图片比 CSS 中设置的图片在宽高上都大 2 倍 , 这张图就是二倍图 ;

目前除了二倍图之外 , 还有三倍图 / 四倍图 , 但是主流还是二倍图 ;

二、二倍图概念

二倍图（@2x）是指在设计时按照原尺寸大小的 2 倍来创建图像，以便在高分辨率设备上展示更清晰的图像。在设计师创建图像时，可以将图像尺寸乘以2，然后在保存图像时将其命名为“@2x”，以便开发者将其用于高分辨率设备上。

高分辨率设备如今已经非常普遍，例如 iPhone 的 Retina 屏幕，以及一些高端 Android 设备。这些设备的像素密度比传统的低分辨率设备更高，因此需要更高分辨率的图像来展示清晰的图像效果。

对于网页设计师和开发者来说，使用二倍图可以提高图像在高分辨率设备上的清晰度，并提高用户的视觉体验。在CSS中使用二倍图的方法是，在CSS中将图像尺寸缩小50%，然后将其用作背景图像，如下所示：

.image {/* 图片的宽高为 100x50 像素将其设置到 CSS 盒子模型中 盒子大小为 50x25 像素 */background-image: url('logo@2x.png');background-size: 100px 100px;width: 50px;height: 50px;
}

这里的 logo@2x.png 是一个尺寸为 100x100 像素的图像，通过将它的尺寸缩小 50% ，可以使它在页面上显示为50 x 50 像素的大小。

在高分辨率设备上，图像会以更高的分辨率展示，从而提高图像的清晰度和质量。

三、代码示例

使用一倍图和二倍图显示在相同大小盒子中 , 在 PC 端显示效果基本一致 , 但是如果在视网膜屏中 , 二倍图更清晰 ;

代码示例 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>视网膜屏二倍图示例</title><style>img {width: 50px;height: 50px;}</style>
</head><body><!-- 50x50 像素的图片放在 50x50 盒子中 --><img src="data:images/icon_50x50.jpg" alt=""><!-- 100x100 像素的图片放在 50x50 盒子中 --><img src="data:images/icon_100x100.jpg" alt="">
</body></html>

显示效果 :

在 PC 端浏览器中的效果 :
在手机端浏览器效果 :

【移动端网页布局】移动端网页布局基础概念 ⑤ ( 视网膜屏技术 | 二倍图概念 | 代码示例 )相关推荐

【移动端网页布局】流式布局案例 ④ ( Banner 栏制作 | 固定定位 | 标准流 | 百分比宽度设置 )
文章目录一.Banner 栏样式及核心要点 1.实现效果 2.核心要点分析二.完整代码示例 1.HTML 标签结构 2.CSS 样式 3.展示效果一.Banner 栏样式及核心要点 1.实现效果 ...
【移动端网页布局】移动端网页布局基础概念 ① ( 移动端浏览器 | 移动端屏幕分辨率 | 移动端网页调试方法 )
文章目录一.移动端浏览器二.移动端屏幕分辨率三.移动端网页调试方法一.移动端浏览器移动端浏览器比 PC 端浏览器发展要晚 , 使用的技术比较新 , 对 HTML5 + CSS3 支持较好 ...
移动端WEB开发之响应式布局(响应式开发原理、bootstrap、阿里百秀案例)
移动端WEB开发之响应式布局 1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: <!DOCTYPE html> & ...
flex 左右布局_移动端开发常用布局：前端弹性布局总结
各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用. 一:什 ...
创业布局移动端App，应该先做Android还是iOS？
在常州创业布局移动端时,初期往往摆在面前最大的难题是,如何分配有限的成本,在最快的速度内占领市场?这个大难题会影响创始人在团队和产品建设方方面面的决定.缩小至移动App开发一方面来说,先做Androi ...
20.【移动端Web开发之响应式布局】
文章目录 [移动端Web开发之响应式布局]前端小抄(20) 一.响应式开发 1.1 响应式开发原理 1.2 响应式布局容器二.Bootstrap前端开发框架 2.1 Bootstrap简介 2.2 ...
移动端网页开发)------响应式网页
移动端网页开发移动端网页开发的两种方案: 响应式网页开发一个新的网站.使用移动端的布局方式. 响应式网页概念同一个网页会根据视口的不同,显示不同的样式. 优缺点优点面对不同分辨率的设备比较 ...
HTML5期末大作业：生活服务网站设计——生活服务同城商城(33页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:生活服务网站设计--生活服务同城商城(33页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载常见网页设计作业题材有个人 ...
HTML5期末大作业：仿英雄联盟网站设计——仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:仿英雄联盟网站设计--仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载常见网页设计作业题材有 ...

【移动端网页布局】移动端网页布局基础概念 ⑤ ( 视网膜屏技术 | 二倍图概念 | 代码示例 )

文章目录

一、视网膜屏技术

二、二倍图概念

三、代码示例

【移动端网页布局】移动端网页布局基础概念 ⑤ ( 视网膜屏技术 | 二倍图概念 | 代码示例 )相关推荐

最新文章

热门文章