• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 移动端视网膜(Retina)屏幕下如何解决网页中1px显示问题?

移动端视网膜(Retina)屏幕下如何解决网页中1px显示问题?

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含devicePixelRatio,Viewport,iPhone6,Measurements,Configuring等相关知识,匿名希望在学习及工作中可以帮助到您
苹果发布iPhone6(375x667,devicePixelRatio:2)、iPhone6 plus(414x736,devicePixelRatio:3)等Android机型分辨率如何处理兼容最优。

- 手机淘宝的flexible设计与实现
- A tale of two viewports
- REMs And Viewport Measurements
- Configuring the Viewport
- CSS Media Queries for iPads & iPhones

回复内容:

可以用1px尺寸的带背景色元素然后scaleX(0.5)或scaleY(0.5)实现0.5px效果。

比如要实现一个元素的下边框1px效果:

position: relative; } .item:after { content: ''; display: block; position: absolute; width: 100%; left: 0; bottom: 0; height: 1px; background-color: #c8c7cc; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } 一,border-width:.5px


二, linear-gradient
手机答题,待会再补详细的。
有几种方案,一种是用图片:2像素,一个透明的,一个目标颜色,可结合border-image与base64玩。
另外一种不同于@张云龙的scale原理,采用目标元素的整体缩小一半,再加上原大小的写法。
还有是通过控制viewport缩小为0.5来实现全局的原大小
还有一些忘了。。 实现的方式有很多种:
  • background-image (border-image)
  • scale(0.5)
  • box-shadow
写了一篇文章 Retina 屏幕下的 1px 边框 | XINRAN LIU 介绍了每一种实现方式的代码(CSS 和 Stylus), 优缺点等, 还有一些原理的介绍, 可以参考一下哦~

您可能想查找下面的文章:

  • 淘宝的flexible适配方案为什么只对iOS进行dpr判断,对于Android始终认为其dpr为1?
  • 移动端视网膜(Retina)屏幕下如何解决网页中1px显示问题?

相关文章

  • 2018-12-03利用HTML5 Canvas实现打飞机游戏
  • 2018-12-03微信html5页面如何调用第三方位置导航
  • 2017-08-06HTML5移动端开发中的Viewport标签及相关CSS用法解析
  • 2018-12-03Bootstrap的优缺点是什么?
  • 2018-12-03HTML5和CSS3实例教程总结(推荐)
  • 2018-12-03像这种网站效果,整屏整屏换有没有什么名字?
  • 2018-12-03H5的web本地存储如何使用
  • 2018-12-03为什么苹果还要使用 HTML5 开发 iOS 上的新版 App Store?
  • 2018-12-03举例详解HTML5中使用JSON格式提交表单_html5教程技巧
  • 2018-12-03HTML5用于创建表单的输入小部件 数据绑定以及数据验证

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 好看且免费的 Web Font 有哪些推荐?
    • Html5 audio标签样式的修改
    • HTML5实现Notification API桌面通知功能
    • html5使用canvas压缩图片的示例代码
    • HTML5 Canvas中绘制矩形实例教程
    • SVG基础|SVG图形描边
    • web存储--webstorage详细介绍
    • 移动端h5轮播插件swipe实例详解
    • 利用简洁的图片预加载组件提升html5移动页面的用户体验 _html5教程技巧
    • HTML5/CSS3专题 3D展示商品信息的经典案例

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有