Ask the cat questions

When we develop a page in our company, the UI design is 750px, which is based on the Iphone 6 design. If we use the right configuration, we’ll write whatever px is on the UI diagram, that’s the programmer’s best interest. But how is this configured?

Do not square, in fact, very simple, follow the train of thought up ~~~

If not, how many px do we need to write in CSS to restore the design?

Let’s take an example

Let’s say I have a 100px button and a 750px UI.

The answer is we should write 100px / 2 = 50px. CSS width = 50px; That’s all.

So why 100px divided by 2?? Because the DPR of the iPhone is 2.

So what is DPR?

The full name of DPR is window.DevicepixelRatio, which is equal to physical pixels/dips. It’s just a ratio. A physical pixel is a small grid that displays different colors. Dips can be understood as virtual pixels, just like CSS we write. Ignore it if you don’t understand…)

Starting with iPhone 4, iPhone is DPR is equal to 2. So basically you divide your UI diagram by 2, which is how many px should you put in your CSS.

Isn’t it easy ~~~

How to restore the px unit of the design draft? Now there is a problem. Not all of us are using iPhone 6, or other phones with various screen sizes, such as iPhone 4 and iPhone 6s Plus. With all kinds of screen sizes, do all phones display the same size text and pictures? That’s so annoying, so, we have to adapt!!

How to fit?

Methods are like weapons. There are all kinds of them. It’s up to you to choose one according to the actual situation.

  1. 100% layout fit
  2. Rem do adaptation
  3. .

First, rem

Lesson begins. Listen, listen, listen. (knocks on the blackboard)

To use the same example above, let’s say we now have a 100px button and a 750px UI. How much REM should we write for buttons for different screen sizes? Rem is the font size of the root element! The root element is the < HTML > tag. The default font size for a web page < HTML > is 16px. The browser’s default font size is 16px.

Conversion method: 1rem = 16px. So 100px = 100 / DPR / 16 = 3.125rem. So the width of the button in CSS should be 3.125rem. The size of the buttons on the screen is proportional to the iPhone 6’s UI graphics.

But how to change the size of the root font?

1. Using @media media query to set the root font size of different screens requires a lot of CSS code, because the screen size is so large that it is difficult to write all of them.

2. I recommend js, just a few lines

Here is the JS that changes the root font size as the screen size changes. Put it on the entry page,

(function() {
 function autoRootFontSize() {
  document.documentElement.style.fontSize = Math.min(screen.width, document.documentElement.getBoundingClientRect().width) / 750 * 32 + 'px'; }window.addEventListener('resize', autoRootFontSize); autoRootFontSize(); }) ();Copy the code

When the page opens and changes, the resize event is executed. This uses the getBoundingClientRect attribute (which can be found on the MDN), which returns the left, top, right, bottom, width, and height of an object in pixels. (Please note compatibility issues, IE8 and below does not have width, height). Take a minimum of the screen width and the width of the HTML (in most cases they are the same). On mobile, it’s usually divided by 32, just to make it bigger and clearer.

Well, the root font varies with the screen size, so it’s impossible to convert rem to rem every time you write CSS. That’s a lot of CSS, so I recommend using CSS preprocessors, PostCSS, LESS, sass, and if you haven’t used them, check their official documentation.

Do not square, in fact very simple…… Here’s what I use at work.

PostCSS is a tool that uses plug-ins to transform CSS. You can handle CSS, usually in conjunction with tools like WebPack. My project uses webpack. Create a postcss.config.js file in the project root directory. The project automatically reads the configuration class files.

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-pxtorem': {
      rootValue: 32.propList: [The '*'].minPixelValue: 2}}};Copy the code

These plugins are plugins that you need to use, such as autoprefixer and PostCSS-Pxtorem.

Autoprefixer simply prefixes CSS properly, which takes a lot less code.

Postcss-pxtorem converts pxto REM, which is why the root font is changed. Px can also be converted to REM, but this plugin can automatically convert REM according to your root font.

RootValue is the root font size, initially set to 32, which is clearer on mobile.

On mobile, we only use these two plug-ins so far.

As mentioned above, to use with Webpack, so how to write in webpack?

module: {
    rules: [{test: /\.scss$/.use: ['style-loader'.'css-loader'.'postcss-loader'.'sass-loader'] {},test: /\.css/.use: ['style-loader'.'css-loader'.'postcss-loader']]}}Copy the code

Add postCSS-loader to csS-loader. Postcss-loader: NPM install –save-dev postCSs-loader

The plugins in the use array are executed from right to left, with style-loader being executed last. This order is worth knowing.)

To sum up, we achieved the following results:

It’s 100px on the UI, you just write 100px in your CSS, it’s that simple. No matter what screen size, the font size will change accordingly and will always be the most appropriate size. And the packaged code is prefixed code. It’s not too cool.

If there are wrong places, welcome to correct, I hope you like ~~