Hello, guys. i'm a professional cutaway i. 🦞

The article was first published in nuggets The customer white whoring company has two iPads. Do I have to adapt them? (summary of adaptation scheme)

🌲🌲🌲 preface:

Two days ago, the product manager suddenly put forward a demand to make ipad adaptation for the ten previously written projects (many subprojects under the integrated portal) and demonstrate them to the leaders. I:??? Can't you demonstrate with a computer? The product manager added: the leader is too busy and the ipad is convenient. Me: notebook is inconvenient??? The product manager said: the customer asked to buy two iPads. Well, I see 🙃 The wool was collected and wiped 💦

Ha ha, just kidding. To get back to business, there is no adaptation scheme for the above problem because many projects are mainly aimed at pc browsers. Except for one of the large screens, we'll talk about it later. Because the previous project was developed by different students, and the time was tight and the task was heavy, a one-time scheme was adopted. Media query is used to write a set of targeted styles for those with few, simple and percentage pages. For those with many pages, a comparison and scaling scheme is used: 👇

window.addEventListener('resize', () => {
  fun();
});
const heightAll = ref(document.documentElement.clientHeight);
const fun = () => {
  let devicewidth = document.documentElement.clientWidth; //Gets the area width at the current resolution
  let scale = devicewidth / 1440; // Denominator - size of design draft
  heightAll.value = document.documentElement.clientHeight / scale;
  document.body.style.zoom = scale; //Zoom in and out by corresponding multiple
};
fun();

This is very rough, but the good thing is that react and vue can be used quickly, which can solve this need. But this is only temporary, so I sorted out the appropriate scheme and shared it with you. I hope it will be helpful to you.

Why screen adaptation?

Adaptation, then why do we do screen adaptation? Of course, this is also a common sense problem: on the one hand, there are a variety of devices, and the screen size and resolution are different. In summary, for the user experience, the pages that users see are normal, so adaptation should be done. In addition, now is the era of mobile Internet, and the adaptation of mobile terminal is also the top priority. For the same dp, there are still differences in the display of different mobile phones (this is also the reason for the classic mobile terminal 1px problem), so adaptation must be done.

Responsive and adaptive

To adapt, we can't avoid choosing a responsive or adaptive scheme. Sort out the concepts of responsiveness and adaptation before we move on.

First, the two solutions are different:

Responsive: let the same web page automatically adapt to different sizes of screens, and automatically adjust the size and layout of web page content according to the screen width.

Adaptive: let users see web pages with the same layout on devices of different sizes.

After looking at the concepts of the two schemes, I believe you guys also know their advantages and disadvantages. The adaptive scheme is the same when users see pages on different devices, but it will be crowded on a small screen. The layout and display contents of responsive solutions will be different on different devices. Of course, we should make a reasonable choice according to the specific business scenario.

Adaptation scheme summary

First summarize some solutions for PC adaptation, so that our pages can be perfectly displayed on computers of different sizes. (Tips: what is an ipad? 😂)

PC visualization screen

The large visual screen usually does not allow the appearance of scroll bars. The common scheme is to ensure that the proportion does not change through zooming, and the overall zooming is left blank on both sides. Of course, we can also encapsulate a common component at the beginning of the project and scale each component separately, so as to avoid leaving blank and causing bad looks (the leaders are not satisfied).

🍬🍬rem🍬🍬

🍬🍬scale🍬🍬

General adaptation of PC

In fact, ordinary pages can be directly px combined with flexible layout. However, when the page content is relatively large or the layout is complex, we still need to make appropriate adaptation to improve the user experience.

🍬🍬 Dynamically load css 🍬🍬

🍬🍬 Media query 🍬🍬

🍬🍬 percentage 🍬🍬

🍬🍬rem🍬🍬

🍬🍬vw🍬🍬

Mobile terminal adaptation

Needless to say, adaptation is the top priority at the mobile end.

🍬🍬rem🍬🍬

🍬🍬vw🍬🍬

Adaptation scheme analysis

Some common adaptation schemes are summarized above, and the use of each scheme is briefly described below.

Dynamically load css and media query

Dynamic loading css is similar to media query, but dynamic loading css is to obtain the screen width through js, and then load different css files in different sizes to achieve adaptation. Media query is to write the style below the corresponding size by using @ media.
Dynamically load css:

if(window.screen.width >= 1680){\
    document.write('<link rel="stylesheet" href="css/index_1920.css">');\
}

Media query:

@media screen and (max-width: 960px){ 
    app{ 
        background-color:#FF6699 
    } 
}

Tips: the biggest disadvantage of these two adaptation schemes is that they need to write a lot of code

percentage

Percentage means literally. When browsing on models of different sizes, the width and height of components in the browser can change with the width and height of the window when browsing through the percentage unit, so as to realize adaptation.

Percentage:

.app {
    width: 100%;
    height: 100%;
}

Tiles: for the percentage adaptation scheme, we have to calculate the width and height according to the design draft. It's too troublesome. Moreover, the attribute of the parent element corresponding to the attribute of the element is not fixed. For example, the reference objects of the margin and padding of the child element are the width of the parent element, while the border radius, background size, transform: translate(), transform origin attributes refer to their own width and height.

scale

Use the transform: scale() principle of css, that is, dynamically calculate the proportion of the screen and the design draft to zoom and compare the page as a whole.

import { computed, ref } from 'vue'

const height = 1080
const width = 1920
let scaleMode = 'widthFill'
let scale = null;
let scaleX = null;
let scaleY = null;
let transform = null;

const getScale = function () {
   let h = window.innerHeight / height;
   let w = window.innerWidth / width;
   if (h < w) {
      return { scale: h, h, w }
   } else {
      return { scale: w, h, w }
   }
}

export default function () {
   scale = ref(getScale().scale);
   scaleX = ref(getScale().w);
   scaleY = ref(getScale().h);

   transform = computed(() => {
      if (scaleMode == 'auto') {
         if (scaleX.value > scaleY.value) {
            let mvx = width * (scaleX.value - scaleY.value) / 2 / scale.value;
            return "scale(" + scale.value + ")  translateX(" + mvx + "px)"
         } else {
            let mvy = height * (scaleY.value - scaleX.value) / 2 / scale.value;
            return "scale(" + scale.value + ")  translateY(" + mvy + "px)"
         }
      } else if (scaleMode == 'widthFill') {
         return "scale(" + scaleX.value + ") "
      } else if (scaleMode == 'fill') {
         return "scale(" + scaleX.value + "," + scaleY.value + ")"
      }
   })

   window.addEventListener('resize', () => {
      scale.value = getScale().scale;
      scaleX.value = getScale().w;
      scaleY.value = getScale().h;
   })
   return transform
}

rem

REM layout is an old acquaintance. The principle is to change the size of 1rem by dynamically setting the root node font size. Dynamically obtain the width of the screen / design draft to set the font size of the root node, or divide our design drawing into 10 copies. First calculate the benchmark value of REM, and then convert all the original px units of length, width, position and font size of all elements on the design drawing into rem. after the web page is loaded, use js to calculate the width of the current browser, Set the font size of html to (current browser window width / 10), so that 10rem is just equal to the width of the browser window. It can also ensure 100% width and scale the page of the design draft equally.

But now there are mature plug-ins to help us realize this transformation. For example: postcss pxtorem and amfe flexible, how to use them? The big guys Baidu by themselves.

Tips: but the disadvantage of rem layout is that the larger the screen, the larger the phone will see not more content, but larger words, which is not very appropriate. Moreover, some js code should be introduced, which leads to a certain coupling between css style and js code.

vw

vw/vh is a newly introduced unit in css3, which is related to the view window. VW represents the width relative to the view window, and the width of the view window is 100vw. Like rem, the specific conversion also has a mature plug-in postcss PX to viewport. How to use it is up to the bosses to Baidu.

Tiles: its disadvantage is that it is unable to modify the value of vw/vh. In a large screen device (Pad), the element will be enlarged and cannot be intervened through js.

🎉🎉🎉 Conclusion:

It can also be seen from the above that each scheme has advantages and disadvantages. We can't achieve perfect adaptation by using only one of them. The optimal solution is to combine specific business scenarios and different methods in our work. For example, I like to use vw+flex+px when doing mobile terminal adaptation. You can also choose the most suitable scheme in combination with your personal habits

Finally, I wish you all progress in your study and success in your career! 🎆🎆🎆