首頁 >web前端 >H5教程 >移动端视网膜(Retina)屏幕下如何解决网页中1px显示问题?

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

WBOY
WBOY原創
2016-06-07 08:42:481440瀏覽

苹果发布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效果:

<code class="language-css"><span class="nc">.item</span> <span class="p">{</span>
    <span class="k">position</span><span class="o">:</span> <span class="k">relative</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.item</span><span class="nd">:after</span> <span class="p">{</span>
    <span class="k">content</span><span class="o">:</span> <span class="s1">''</span><span class="p">;</span>
    <span class="k">display</span><span class="o">:</span> <span class="k">block</span><span class="p">;</span>
    <span class="k">position</span><span class="o">:</span> <span class="k">absolute</span><span class="p">;</span>
    <span class="k">width</span><span class="o">:</span> <span class="m">100%</span><span class="p">;</span>
    <span class="k">left</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
    <span class="k">bottom</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
    <span class="k">height</span><span class="o">:</span> <span class="m">1px</span><span class="p">;</span>
    <span class="k">background-color</span><span class="o">:</span> <span class="m">#c8c7cc</span><span class="p">;</span>
    <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">transform</span><span class="o">:</span> <span class="n">scaleY</span><span class="p">(</span><span class="m">0</span><span class="o">.</span><span class="m">5</span><span class="p">);</span>
    <span class="n">transform</span><span class="o">:</span> <span class="n">scaleY</span><span class="p">(</span><span class="m">0</span><span class="o">.</span><span class="m">5</span><span class="p">);</span>
<span class="p">}</span>
</code>
一,border-width:.5px
移动端视网膜(Retina)屏幕下如何解决网页中1px显示问题?

二, linear-gradient
移动端视网膜(Retina)屏幕下如何解决网页中1px显示问题? 手机答题,待会再补详细的。
有几种方案,一种是用图片:2像素,一个透明的,一个目标颜色,可结合border-image与base64玩。
另外一种不同于@张云龙的scale原理,采用目标元素的整体缩小一半,再加上原大小的写法。
还有是通过控制viewport缩小为0.5来实现全局的原大小
还有一些忘了。。 实现的方式有很多种:
  • background-image (border-image)
  • scale(0.5)
  • box-shadow
写了一篇文章 Retina 屏幕下的 1px 边框 | XINRAN LIU 介绍了每一种实现方式的代码(CSS 和 Stylus), 优缺点等, 还有一些原理的介绍, 可以参考一下哦~
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn