viewport移动端图片不清楚的处理方式，二倍图

最新推荐文章于 2023-04-04 19:47:44 发布
最新推荐文章于 2023-04-04 19:47:44 发布
阅读量314 收藏
点赞数 1
文章标签： web app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mengniumeiwoniu/article/details/115216531
版权

原理就是利用，图片放到手机端像素会放大两倍,手动设置图片给他设置缩小一半，然后放到移动端就很清楚了，效果在pc端看的不明显，在手机上特别明显

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width&
最低0.47元/天 解锁文章
冲冲冲冲fyx
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端CSS的学习笔记。
01-19
设计时采用二倍尺寸的图片，然后在CSS中通过设置`width`或`background-size`为原始尺寸的一半，使得在移动端显示时图片仍保持清晰。这种方法被称为Retina优化。 4. **流式布局（百分比布局）**： 这种布局方式...
关于2倍图的理解
lxllxl211的博客
01-24 991
但是准备一个200×200px的照片，然后缩放2倍，再在手机上显示，同样的视觉大小。苹果8的实际像素宽度是750px，然后通过视网膜屏技术给压缩成375px。所以一个长宽都是100px的照片，需要100✖100px的物理像素。直接放在手机上显示的也是100×100px的空间大小。而在移动端存在多倍图的关系，假如是2倍图的关系。都是100×100px的空间大小。假如现在有一个长宽都是100px像素的照片。放在手机上也是长宽也是100✖100px。所以一个长宽都是100px像素的照片。
视口、二倍图
ssigin的博客
04-04 340
于是二倍图就诞生了，用来解决这个问题，我们首先拿到一个100 * 100px得图片，把这张图片压缩成50 * 50px，然后把这张图片放到移动端中，在移动端中会把这张50 * 50px的图片放在一个100 * 100物理像素的区域（这个区域对应的css像素是50px * 50px)，会把这个图片放大两倍，刚好就是这张压缩图片的原图，就会显示的非常清晰。在全屏模式下，视口是设备屏幕的范围，窗口是浏览器窗口，浏览器窗口大小小于或等于视口的大小，并且文档是这个网站，文档的大小可比视口长或宽。注意：是网站的区域。
关于二倍图的一些知识点
m14260的博客
08-19 492
。
移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
专研前端，探索后端
04-27 1072
移动端web现状： 移动端常见浏览器：UC浏览器，QQ浏览器，Opera浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器及杂牌浏览器。移动端常见的浏览器都是基于webkit内核开发的，国内机操作系统也是基于Android开发的，因此在移动开发中只兼容主流浏览器，即处理webkit内核浏览器即可。 手机屏幕现状：移动设备的屏幕尺寸繁多，常见Android设备分辨率有：480x800、 480x854、 540x960、720x1280、1080x1920、2k、4k等；iPho
2倍图-多倍图
qq_40231344的博客
07-12 672
物理像素是屏幕显示的最小单位，是物理真实存在的，在出厂的时候就已经设置好了。 PC端1px=一个物理像素点，但是在移动端就不尽相同。 物理像素比/屏幕像素比=1个px能显示的物理像素的个数 在PC端，1px=1个物理像素，但是在移动端就不尽相同。 1个px能够显示的物理像素点的个数称为物理像素比。 有的1px需要2个物理像素填充，这样图片看起来更加清晰。就是说在PC端的图片放在移动端时被放大了1倍。这时候就要做2倍图，先准备一个100*100的，在手动缩小成50*50，然后在移动端显示的时候会变成
倾力总结40条常见的移动端Web页面问题解决方案
11-22
为解决这个问题，可以使用更高分辨率（通常是2倍）的背景图片，并通过`background-size: contain;`或`background-size: cover;`来调整，确保图片在不同像素比的设备上都能清晰展示。 示例代码： ```css ...
flexible.js实现移动端rem适配方案
10-15
3. **图片适配**：使用srcset和sizes属性，或picture元素，对图片进行响应式处理。 4. **触控优化**：确保触摸交互的响应性和可点击区域的大小适中。 综上所述，`flexible.js`是移动端适配的一种高效解决方案，它...
图片展示2_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-02
在这个模板中，可能包含用于图片预加载、滑动效果、点击事件处理等的JavaScript代码，例如使用jQuery或Vanilla JS库。 7. **图片优化**：为了提高网页加载速度，通常会进行图片压缩和优化。这个模板可能使用了合适...
flex布局两天总结
Wangmou777_的博客
10-30 267
1.首先明白二倍图的原理和记住我们写移动端网页参考的是逻辑分辨率！ 2.flex布局的特点：{ 是浏览器提倡的布局方式，但兼容性比较高！使用之前需要先问清除需不需要考虑低版本浏览器能否兼容的问题！ flex布局不脱标，具有伸缩比这个特点。 布局简单方便 } 3.主轴和侧轴： { 主轴 justify-content center：居中 space-between：间距出现在弹性盒子之间（两端对齐，中间等距 使用较多） space-...
HTML5 Canvas图像模糊完美解决办法
01-19
1、最近在用h5的canvas画动画，发现图像特别模糊。后来终于找到罪魁祸首是<meta name=viewport content=width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no />这个代码，因为这行代码进行了伸缩 2、模糊图像的效果：   3、将压缩去掉后的效果   可以将代码改成   <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <meta name=viewport con
前端一倍图、二倍图、多倍图
wgod
07-25 2万+
获得设备像素比后，便可得知设备像素与CSS像素之间的比例。也就是window.devicePixelRatio。 一倍图：当这个比率为1:1时，使用1个设备像素显示1个CSS像素。 二倍图：当这个比率为2:1时，使用4个设备像素显示1个CSS像素， 三倍图：当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。 这里是引用 设备像素:也叫物理像素，显示设备上最微小的物理部件。 比...
当你使用meta-viewport，canvas在手机上不清晰(模糊)的解决办法。
weixin_30340617的博客
11-29 225
问题的产生其实适合分辨率有关系。 IPhone4s是retina屏幕，所以以下值应该是2 var getDevicePixelRatio = function (){ return window.devicePixelRatio || 1; } 如果是2，我们应当怎么做？ 比如有个canvas var pixelTatio = getDevicePix...
viewport解决分辨率适配问题
weixin_30809333的博客
06-05 199
Viewport：字面意思为视图窗口，在移动web开发中使用。表示将设备浏览器宽度虚拟成一个特定的值（或计算得出），这样利于移动web站点跨设备显示效果基本一致。 在开发时最好基于320宽进行开发，图片基于640做，在放置图片时可以用background-size或zoom缩放一倍，图片在高清晰屏上就不会模糊。在加载页面时通过读取设备的width去计算dpi然后动态生成meta标记，可...
HTML图片关系,HTML+CSS：viewport的写法，跟图片也有关系
weixin_42324002的博客
06-04 73
viewport：设备显示网页的那部分区域，在移动端的开发起着至关重要的作用。一、metacontent的属性值：width：控制 viewport 的大小，width=device-width代表宽度是设备屏幕的宽度initial-scale=1.0：表示初始的缩放比例minimum-scale=1.0：表示最小的缩放比例maximum-scale=2.0：表示最大的缩放比例user-scala...
什么是二倍图?什么是三倍图?
热门推荐
打死你个标题党
06-20 3万+
啥是二倍图和三杯图什么时候会需要比如你需要一个30pt*30pt的图标，那么这时你就需要跟美工（美术工程师）要三个文件： 一个是30px*30px的PNG图片，用原名来命名即可，例如sample.png。 一个是60px*60px的PNG图片，这个要用原名@2x来命名，例如sample@2x.png。 一个是90px*90px的PNG图片，这个要用原强调内容名@3x来命名，例如sample@3
为什么常用二倍图，流式布局中一倍图是否靠得住
夸克IT
10-14 1664
常用布局第一篇——流式布局 回顾 上一篇中我们结束了 css3 中的内容，回顾css3 我们深入的学习了css中的东西，在css的基础上c3又有了非常好的创新，这些都在日常的工作中特别的常用，所以需要好好温故而知新。h5c3的基础学完之后，就开始布局了，今天是布局的第一篇。先来看看流式布局。 视口 视口（viewport） 就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口 布局视口 一般移动设备的浏览器默认设置了一个布局视口，用于解决早期pc端页面在手机上显示的问题 IOS、
二倍图整合雪碧图
aydongzhiping的博客
05-07 1303
在优化项目ui过程中遇到的问题，ui切图为2倍图，做背景图整合时候使用定位和CSS3的scale来实现，具体按实际情况调整。结果肉眼看出来是没什么差别的
二倍图技术
weixin_43370067的博客
05-07 182
插入精灵图为背景图 当拿到美工精灵图稿时，需要注意图片大小的改变。 .psd 750px --> 适配屏幕宽度为375px主流设备 psd: 640px—> 320px 可能psd的 图片比要用的大两倍 假如你有一张精灵图原大小80px 乘以400px 那么你用的时候就需要通过backgorund-size属性设置大小为40px 200px 以下的百分比适不适合这里使用的 /* 5...
postcss-px-to-viewport移动端与pc端
最新发布
09-04
在移动端开发中，由于不同设备的屏幕尺寸差异较大，使用固定像素单位（px）会导致页面在不同设备上显示效果不一致。而视口单位（vw、vh、vmin或vmax）是相对于视口大小而言的，可以根据不同设备的屏幕尺寸进行动态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值