Understand the basics of Web development — Physical pixels, logical pixels, CSS pixels why 750px design drawings
In fact, I have always wanted to write some articles about adaptation, because a lot of things can only be better understood through practice, rather than looking up several articles
I hope to be able to answer these questions:
1. What are physical pixels, logical pixels, and DPR? 2. Why do our designers give the size of 750px
1. What are physical pixels, and logical pixels,DPR
Physical Pixel (also called device pixel): The pixels on the display that are identified when the machine is produced. Density Independent Pixel (also known as CSS pixel/device Independent Pixel) : A style unit pixel used to control the style of an element. A CSS pixel is always a relative value.
Physical Pixel: The actual pixels of a device’s screen, the basic unit of the screen, are physical. For example, the iPhone 6’s screen has 750 pixels in the width direction and 1,334 pixels in the height direction, making the entire iPhone 6 750 by 1,334 pixels.
Density independent Pixel: We normally describe the width and height of an image as 200px by 100px. Here, px is also a logical pixel.
We should know that the width of the iphone6 is 375px, here refers to the logical pixel, that means that 1px CSS pixel contains two physical pixels, if you are not afraid of blind, you can close your eyes to the computer screen, the screen interface is composed of red, green and blue three colors
In the old days, the screen was supposed to be 375px physical pixels, corresponding to 375 physical pixels. In fact, a long time ago, if you wrote 1px in your CSS, the screen would render you to an actual pixel with DPR=1. Then Apple introduced Retina displays on their Macs, iphones, and ipads, which have four times or more physical pixels than non-HD screens. If DPR=1 is also used to display, then the area of the same picture displayed on the HD screen will be 1/4 of that of the non-HD screen. In this case, because the display area of the picture on the screen is greatly reduced, it will also lead to the problem of “hard to see”.
The more physical pixels there are at 1px, the more difficult it is for us to see red, green and blue. So when you use a 750px design, it should be xx2@png
Device Pixel Ratio (DPR)
DPR = Physical pixels/logical pixels
2. Rem adaptation
2.1 CSS3 Length unit rem
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>I am the size of the root element HTML<div class="two">I was two times</div>
<div class="three">I am three times</div>
<style>
html{
font-size:12px;
}
.two {
font-size:2rem;
height: 5rem;
width: 5rem;
background-color: red;
}
.three{
font-size:3rem;
height: 10rem;
width: 10rem;
background-color: yellow;
}
</style>
</head>
</html>
Copy the code
Font :12px; font-size:12px; The width of REM is not set, but the value of THE width of REM is fixed by the value of the font-size of HTML, and then multiplied by the corresponding multiple. In fact, I used to fail to turn the corner, why only set a default value of the font-size of SO many properties, mainly depends on the initial definition of REM, maybe This property is not font size, maybe it’s test, etc., it’s what it says, that’s how I understand it, but what’s the default and minimum value of font size
font-size:2rem; => font-size:2*12px;
So, think about it, what is the value of the HTML font size that I set? Should be set according to the visual width
2.2 Default Browser Font Size
The browser default minimum font is 12px, This means that if I set a font to 2px, this 2px, will not work, it will display the smallest font, 12px, and the default font size is 16px. This means that if I don’t know anything about HTML, and I set 2rem for the other styles, it will display 32px(16px * 2).
How to get the default font size of Google browser
var div=document.getElementsByTagName('html') [0]
const res = window.getComputedStyle(div).fontSize // 16px
console.log(res, 1111)
Copy the code
2.3 rem adaptation
Let’s say our UI diagram is given a logical pixel size of 375px
.two {
font-size:2rem;
height: 5rem;
width: 5rem;
background-color: red;
}
.three{
font-size:3rem;
height: 10rem;
width: 10rem;
background-color: yellow;
}
Copy the codeGets the raw value. The default HTML font size is16Under the 375px UI design of the iphone6, the measurement should read: 2rem = 32px 5rem = 80px 3rem = 48px 10rem = 160px 750px 2rem = 64px 5rem = 160px 3rem = 96px 10rem = 320pxCopy the codeAdaptation code analysis
InnerWidth Width of the visible area of the browser window (not including the browser console, menu bar, and toolbar) innerHeight Height of the visible area of the browser window (not including the browser console, menu bar, and toolbar)
/ / principle:
// Get the width of the screen, and divide the screen into how many pieces (design width)
const boxInnerWidth = window.innerWidth
// Suppose the design is 375px
const UIwidth = 375
// How many px does each divide into
const everyPiece = boxInnerWidth/UIwidth
// Set the HTML's font-size to the scale value
document.documentElement.style.fontSize = `${everyPiece * 100}px`
Copy the codeYou can also change it to:
(function () {function changeRootFont() {var UIwidth = 750, rem2px = 100;document. DocumentElement. Style. Fontsize = ((window.innerWidth / UIwidth) * rem2px) + 'px'; } changeRootFont ();window.addEventListener('resize', changeRootFont,false); }) ();Copy the codeBy definition, the document. The documentElement. Style. FontSize = ${everyPiece} px line ah, Why *100, assuming we’re on an iphone6, when const everyPiece = BoxInnerWidth /UIwidth everyPiece will be equal to 1px, HTML with a font size of 1 will not work, so we need to expand the font size by more than 12 times, but you think I’m expanding here, when I write rem multiple, will I divide by this So for the sake of easy division, let’s just write 100, which is the px number that we measure out of UI and just move two decimal points to the right
.two {
font-size:0.32 rem;
height: 0.8 rem;
width: 0.8 rem;
background-color: red;
}
.three{
font-size:0.48 rem;
height: 1.6 rem;
width: 1.6 rem;
background-color: yellow;
}
Copy the code3. The vw, vh adaptation
100v sub w is equal to the width of one viewport1% Width of viewport 100vh = height of one viewport 1vh=1% Height of viewportCopy the code <div class="test">Ha ha ha ha</div>
Copy the code.test {
width: calc(100vw * (300 / 375));
height: 100px;
background-color: red;
color: white;
font-size: calc(100vw * (24 / 375)); }Copy the codeLet’s say you’re in a project and you can use SASS
@function px2vw($px) {
@return $px * 100vw / 375; // 375Design drawing of.test {
width: px2vw(300);
height: px2vw(100);
background-color: red;
color: white;
font-size: px2vw(24);
}
Copy the codePrinciple: Because vw is dividing the screen into 100 pieces, and 1vw is one piece, and 100vw is a landscape full screen, so let’s say my design is 375px, The current width is 24px, so 24/375 means that I take 24/375 of the total width of the screen, and then you know that the total width of the screen is 100vw, so the dynamic width is 24/375*100vw, and 24 is different sizes, so wrap a method to call
Advantages and disadvantages of VW and REM:
rem:
1. Since the rem processing of other elements is based on the root HTML element, the script code should be written in the header before defining the other CSS elements, and then obtain the window. InnerWidth 2 when firing the resize. If you set ${everyPiece * 100}px and the ratio here is not 100, it will be hard to convert px into REM
vw:
1. Vw units are slightly less compatible than rem, with full support for 2 in ios8, android 4.4 and above. Suppose I use a method like this, which looks a little strange to me, not as direct as REM
So there is the combined version :(the boss says he is using this, no problem)
html{
font-size:calc(100vw/375*100)}.test {
width: 3rem ;
height: 1rem;
background-color: red;
color: white;
font-size: 0.24 rem
}
Copy the code4. Plug-in recommendation (vue.js)
Rem (Fexible. Js, used in the project 2 years ago)
The vUE project uses Lib-flexible to solve the problem of mobile device adaptation
Vw (postcss-px-to-viewport, currently in use)
How to use VW to implement mobile adaptation in Vue project
5. Why did the designer draw 750px
Reference: Why is the design 750px
Read a lot of articles, the general meaning is that the design drawing is in accordance with the physical pixels to the picture, I did not say this thoroughly understand, cry
6. If there is a mobile phone and A PC terminal, how to adapt
const isMobile = function () {
const userAgentInfo = navigator.userAgent
let mobileAgents = [
'Android'.'iPhone'.'SymbianOS'.'Windows Phone'.'iPad'.'iPod',]return mobileAgents.some(i= > userAgentInfo.includes(i))
}
Copy the codeSet global isMobileFunc is the judgment of the mobile side, the route points to the same page, this page introduces the code of the PC side, and the mobile code, according to the isMobile judge which sub-component to display
Var UIwidth = isMobile? 750 : pcUIWidth, rem2px = 100;
(function () {function changeRootFont() {var UIwidth = isMobile? 750: pcUIWidth, rem2px = 100; Document. The documentElement. Style. Fontsize = ((window. InnerWidth/UIwidth) * rem2px) + 'px'; } changeRootFont (); window.addEventListener('resize', changeRootFont,false); }) ();Copy the codeBTY, more pros and cons about REM and VW fit, welcome to comment, we will post the use of fexible.js and postCSs-px-to-viewport plugin later
-_ – oliver to