Heim > Web-Frontend > H5-Tutorial > Hauptteil

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

WBOY
Freigeben: 2016-06-07 08:42:48
Original
1417 Leute haben es durchsucht

苹果发布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>
Nach dem Login kopieren
一,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), 优缺点等, 还有一些原理的介绍, 可以参考一下哦~
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!