For front-end developers, to deal with this problem, they must first add a knowledge point, that is, physical pixels [device pixels] & logical pixels [CSS pixels]; In another piece of my article, I introduced the 100% reduction of the design draft. Interested friends can check it.
Why 1px is it getting thicker?
why is 1px written in the CSS of the mobile terminal, which actually looks thicker than 1px; Students who understand the physical pixels and logical pixels of the device should be easy to understand. In fact, the meanings of these two Pxs are different. The 1px required by the UI Designer refers to the physical pixel 1px of the device, while the pixels recorded in CSS are logical pixels. There is a proportional relationship between them. You can use the window in javascript Devicepixelratio can also be obtained by - WebKit min device pixel ratio of media query. Of course, the proportion is related to the equipment.
Border can't achieve the effect we want on the mobile phone. This is because of the devicePixelRatio feature. The devicePixelRatio of iPhone = = 2, and the border width: 1px describes the device independent pixels. Therefore, the border is enlarged to the physical pixel 2px, which appears thicker on the iPhone.
mobile terminal development often needs to add the following sentence to the html header:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
this sentence defines that the width of the viewport on this page is the device width, the initial scaling value and the maximum scaling value are both 1, and user scaling is prohibited.
your question may come. You always see viewport. In addition to knowing the Chinese name viewport, what does it mean? In fact, it is the area on the device screen that can be used to display our web page content. Specifically, it is the part of the web page used by the webview in the browser or app. However, the viewport is not limited to the size of the browser's visual area, which may be large or small. Reflected in whether the user zoomed the screen.
careful students should feel that user scaling = no is often set in the meta tag, that is, user scaling is prohibited. What impact will user scaling have? In fact, it is a change in display. When you double the scale, the physical pixels represented by CSS pixels (logical pixels) will be doubled, that is, the ratio of device physical pixels to device independent pixels will be doubled (reduced).
maybe you already know the reason why 1px becomes thicker. The settings of viewport and screen physical resolution are proportional rather than the same The window object on the mobile terminal has a devicePixelRatio attribute, which indicates the ratio of physical pixels of the device to css pixels. On the iphone with retina screen, this value is 2 or 3. The 1px length written in css is as long as 2px or 3px when mapped to physical pixels.
How to solve 1px problems
1. Media query uses the device pixel ratio to scale and set decimal pixels
px values with decimals are supported under IOS8. The corresponding devicepixel ratio of media query has a query value - WebKit min device pixel ratio, which can be written in CSS
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border { border: 0.333333px solid #999 }
}[disadvantages] there are requirements for equipment, and the compatibility of decimal pixels is poor at present.
2. viewport + rem scheme
this scheme is the optimization of the above scheme. The overall idea is to dynamically modify the scaling of the page by using viewport + rem + js to realize the display of less than 1 pixel. During page initialization, the original default state is introduced in the header as follows:
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
The next task is to dynamically modify the zoom ratio of js and set the font size of rem root element
var viewport = document.querySelector("meta[name=viewport]")
if (window.devicePixelRatio == 1) {
viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no')
}
if (window.devicePixelRatio == 2) {
viewport.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no')
}
if (window.devicePixelRatio == 3) {
viewport.setAttribute('content', 'width=device-width, initial-scale=0.333333333, maximum-scale=0.333333333, minimum-scale=0.333333333, user-scalable=no')
}
var docEl = document.documentElement;
var fontsize = 10 * (docEl.clientWidth / 320) + 'px';
docEl.style.fontSize = fontsize;[disadvantages] it is considered that scaling involves the global rem unit, which is more suitable for new projects. For old projects, more changes may be involved.
3. Set the border image scheme
.border-image-1px {
border-width: 1px 0px;
-webkit-border-image: url("border.png") 2 0 stretch;
border-image: url("border.png") 2 0 stretch;
}[explanation] border width specifies the width of the border. Four values can be set: top right bottom left.
Border image this example means that the border image is cropped 2px above the image (there is no unit on the attribute value) as the upper border and 2px below as the lower border. Cut the picture 0 pixels away from the left and right, that is, there is no border, and it is displayed in a stretched manner
The combination is: in the border picture, the width of 2 pixels at the top and bottom of the picture is cut as the upper and lower border, and displayed in the border space with the width of 1 pixel. There is no border on the left and right. Note that one pixel here is special, specifically referring to physical pixels, while the normally set length and width 1px represents logical pixels (this view is personal understanding).
you may not understand, what is the ghost of cutting borders? Why cut it? Border image is really a difficult attribute to understand. It's even more encircled after going w3c to see it. The content of w3c is too refined, but the explanation is not enough. Therefore, I present a detailed explanation of border image by Mr. Zhang Xinxu, especially to understand the nine palace lattice cutting method.
Of course, pictures are introduced in this way. We can also install pictures in base64 form
.border-image-1px {
border-width: 1px 0px;
-webkit-border-image: url("data:image/png;base64,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") 2 0 stretch;
border-image: url('Above');
}[disadvantages] pictures need to be made, and the rounded corners may be blurred
4. Background image gradient implementation
in addition to using pictures, you can also use pure css. Baidu glutinous rice group adopts this scheme.
.border {
background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
linear-gradient(270deg, red, red 50%, transparent 50%),
linear-gradient(0deg, red, red 50%, transparent 50%),
linear-gradient(90deg, red, red 50%, transparent 50%);
background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
background-repeat: no-repeat;
background-position: top, right top, bottom, left top;
padding: 10px;
}[idea] divide the border size of one physical pixel into several parts (percentage control) by linear gradient to achieve the effect of less than 1 pixel
[explanation] linear gradient specifies a linear gradient and accepts three parameters or more. The first is the gradient rotation angle, the second is the gradient color and the position (percentage) to which the gradient changes to the color. In this example, the first sentence is to rotate the gradient direction 180 degrees, that is, from top to bottom (0 degrees by default, from bottom to top), and from red, To 50% of the position is still red, and then the gradient inherits the color of the parent element.
[disadvantage] because each border is realized by linear gradient color, rounded corners cannot be realized
5. Box shadow scheme
Shadow can also be used. The advantage is that there is no fillet problem, and the disadvantage is that the color is not easy to control
div {
-webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);
}[understanding] let's review the usage of box shadow attribute.
box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset];
The parameters respectively represent: horizontal shadow position, vertical shadow position, blur distance, shadow size, shadow color, changing external shadow to internal shadow, and the last four are optional. Why is the shadow size set to a negative number in this example? It is set to - 1px to make the shadow size slightly smaller than the div element size, so that the shadows on the left and right sides will not be exposed, so as to achieve the effect that only the bottom side has shadows. To achieve the split line effect (single side border)
6. transform: scale(0.5) scheme - Recommended: very flexible
in the above usages, there is no escape from the idea that 1px is reduced to 0.5px for display, however. 0.5px is not supported by all devices or browsers. Consider scaling it with media query or viewport. In fact, the 1-pixel problem basically occurs when setting the border or split line. The scene does not cover the global style. Therefore, we really need to directly scale the elements that need to be set. tranform can achieve this requirement.
Set height: 1px, and scale to the corresponding size according to the media query combined with transform.
div {
height:1px;
background:#000;
-webkit-transform: scaleY(0.5);
-webkit-transform-origin:0 0;
overflow: hidden;
}2. Use:: after and:: befor to set border bottom: 1px solid #000, and then zoom WebKit transform: Scaley (0.5); It can meet the requirements of two sidelines
div::after{
content:'';width:100%;
border-bottom:1px solid #000;
transform: scaleY(0.5);
}3. Use:: after to set border: 1px solid #000; width:200%; height:200%, and then scale scaleY(0.5); The advantage is that rounded corners can be realized, which is how JD implements them. The disadvantage is that it is troublesome to add active buttons.
.div::after {
content: '';
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border: 1px solid #bfbfbf;
border-radius: 4px;
-webkit-transform: scale(0.5,0.5);
transform: scale(0.5,0.5);
-webkit-transform-origin: top left;
}6.5 optimization of scheme 1 by media query + transfrom
/* 2 Double screen */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
/* 3 Double screen */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}