Mobile 1px thin-line Solution summary

Why mobile 1px is getting thicker

Why the mobile side of the CSS inside wrote 1px, actually looks more than 1px thick. In fact, the reason is very good understanding: the meaning of these 2 ' px ' is not the same. The header of the mobile HTML will always have a sentence

<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, User-scalable=no" >

This sentence defines the width of the viewport of this page as the device width, both the initial scale value and the maximum zoom value are 1, and the user scaling is prohibited. Viewport popular is that the browser can be used to display the area of the page, this area may be larger than the screen.

According to this article http://www.cnblogs.com/2050/p/3877280.html analysis, the mobile phone has a perfect fit of the ideal viewport, the resolution of a large number of mobile phone's ideal viewport width may be the same, The purpose of this is to ensure that the same CSS appears in the same way on different screens, and the meta is actually set the width of the ideal viewport.

The actual example: Iphone3 and iphone4 screen width is 320px,640px, but their ideal viewport width is 320px, set the device width, 320px width of the elements can be filled with 100% full screen width. Different phone ideal viewport width is not the same, the common has 320px, 360px, 384px. This value of the iphone series is 320px before 6, and the benefit of controlling viewport is that a set of CSS can fit multiple models.

People who understand should understand why 1px is thicker, viewport settings and screen physical resolution are proportional rather than identical. The Mobile Window object has a Devicepixelratio property that represents the ratio of the physical pixel of the device to the CSS pixel, which is 2 or 3 on the retina's iphone, and the 1px length in the CSS maps to the physical pixel as long as 2px or 3px.

1px Solution Background Map Gradient

@media only Screens and (-webkit-min-device-pixel-ratio:2), only screen and (min-device-pixel-ratio:2) {  . Good-content {     border:none;     Background-image:-webkit-linear-gradient (90deg, #e000, #00 50%,transparent 50%);     Background-image:-moz-linear-gradient (90deg, #000, #e000 50%,transparent 50%);     Background-image:-o-linear-gradient (90deg, #000, #000 50%,transparent 50%);     Background-image:linear-gradient (0, #000, #000 50%,transparent 50%);     Background-size:100% 1px;     Background-repeat:no-repeat;     Background-position:bottom   }}

Picture of background image

. border-dp-b {  -webkit-box-sizing:border-box;  Box-sizing:border-box;  Background-image:url (.. /img/repeat-x.png);  Background-repeat:repeat-x;  Background-position:0 Bottom;  Background-size:auto 1px;} Or. border-img {    border-bottom:1px solid;    -webkit-border-image:url (.. /img/border-v.png) 2 0 stretch;    Border-image:url (.. /img/border-v.png) 2 0 stretch;}

REM Solutions

////Adjust scale and size according to screen size and dpi(function () {        varScale = 1.0; varRatio = 1; if(Window.devicepixelratio >= 2) { scale*= 0.5; Ratio*= 2; }        varText = ' <meta name= ' viewport "content=" initial-scale= ' + scale + ', maximum-scale= ' + scale + ', ' + ' minimum-scale= ' + Scale + ', width=device-width, ' + 'user-scalable=no "/>‘;        document.write (text); Document.documentElement.style.fontSize= * ratio + "px"; })();

How scale is scaled

All -rounder @media (-webkit-min-device-pixel-ratio:2) {. Border-Bottom::after {Border-bottom-width:1px; }. Border:after {content:‘ ‘;    Display:block;    Position:absolute; Top:0; Right:-100%; Bottom:-100%; Left:0; border:0solid #e1e1e1; -webkit-transform-origin:0 0; Transform-origin:0 0; Pointer-Events:none; -webkit-transform:scale (. 5); Transform:scale (.5); Width:200%; -webkit-box-sizing:border-box; Box-sizing:border-box; }} to meet general requirements you can use this @media (-webkit-min-device-pixel-ratio:2). border:after {height:1px; Content:‘‘; Width:100%; Border-top:1px solid #e1e1e1;    Position:absolute; Bottom:-1px; Right:0; Transform:scaley (0.5); -webkit-transform:scaley (0.5);}

JS Decision Support 0.5PX

Use decimals to write PX values

IOS8 has been supported with a fractional PX value, media query corresponding to Devicepixelratio has a query value-webkit-min-device-pixel-ratio, CSS can be written like this

. border {border:1px solid #999 } @mediascreen and (-webkit-min-device-pixel-ratio:2) {    0.5px soli D #999 }} @mediascreen and (-webkit-min-device-pixel-ratio:3) {    0.333333px solid #999 }}

Mobile 1px thin-line Solution summary