Are you wondering the following.
Developing data for large screens that aren’t fully adaptive?
Using rem adaptive and still needing to pay attention to units is a pain in the ass?
Is there one that is completely adaptive to whatever I write?
Is there that easiest way to achieve full adaptive with the least amount of code? Preferably the kind of method that doesn’t require me to think with my head.
yes
Use scale to adapt the big screen. Realize that the big data screen can work comfortably on computers of any resolution. You don’t need to write specific rem units, and you don’t need to think about units being used incorrectly and not fully adapted. Even if you use all position to position on other screens, it won’t be messed up. (% and px can be used freely)
If you are a React player
Then everything is easy, you just need to copy it.
Code👇
/*
JS
*/
const handleScreenAuto = () => {
const designDraftWidth = 1920;
const designDraftHeight = 960;
const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftHeight ?
(document.documentElement.clientWidth / designDraftWidth) :
(document.documentElement.clientHeight / designDraftHeight);
(document.querySelector('#screen') as any).style.transform = `scale(${scale}) translate(-50%)`;
}
useEffect(() => {
handleScreenAuto();
window.onresize = () => handleScreenAuto();
return () => window.onresize = null;
}, [])
/*
HTML
*/
<div className="screen-wrapper">
<div className="screen" id="screen">
</div>
</div>
/*
CSS
*/
.screen-root {
height: 100%;
width: 100%;
.screen {
display: inline-block;
width: 1920px;
height: 960px;
transform-origin: 0 0;
position: absolute;
left: 50%;
}
}
Copy the code from the JS section above to the page with the big screen, and then draw the big screen in id as screen to complete the effect.
If you are a Vue player
And don’t worry, because I’m preparing the Vue version as well.
/**
js
*/
mounted(){
handleScreenAuto();
window.onresize = () => handleScreenAuto();
},
deleted(){
window.onresize = null;
},
methods: {
const handleScreenAuto = (): void => {
const designDraftWidth = 1920;
const designDraftHeight = 960;
const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftHeight ?
(document.documentElement.clientWidth / designDraftWidth) :
(document.documentElement.clientHeight / designDraftHeight);
(document.querySelector('#screen') as any).style.transform = `scale(${scale}) translate(-50%)`;
}
}
<template>
<div className="screen-wrapper">
<div className="screen" id="screen">
</div>
</div>
</template>
<style>
.screen-root {
height: 100%;
width: 100%;
.screen {
display: inline-block;
width: 1920px;
height: 960px;
transform-origin: 0 0;
position: absolute;
left: 50%;
}
}
<style>
Same. Just copy the code in lifecycle and methods above and write the data big screen in the div with id screen.
If you want to understand the principle of realization
Use is going to work. Someone asked how the implementation of this method works.
I can’t find anyone to explain why this method is adaptive what to do?
It’s okay. I’ll provide the answer.
The question is:Why, using the above method can be adaptive.
code, starting with handleScreenAuto.
const handleScreenAuto = () => {
const designDraftWidth = 1920;
const designDraftHeight = 960;
const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftHeight ?
(document.documentElement.clientWidth / designDraftWidth) :
(document.documentElement.clientHeight / designDraftHeight);
(document.querySelector('#screen') as any).style.transform = `scale(${scale}) translate(-50%)`;
}
designDraftWidth / designDraftHeight; these two attributes, called: design draft width and height. As the name suggests, it is the width and height ratio that the designer gives us to produce the design draft. In other words, when we create a view, we have to have a fixed width and height value.
For example, I use Blue Lake. It’s labeled as to what aspect ratio the designer gave for the graphic.
Now assuming a width of 1920 and a height of 960, I’ll start drawing the large screen.
Here’s an explanation of what the scale attribute does.
English translation: scale.
Yes, this property is what determines, when my current screen size doesn’t match the size of the design. What is the percentage of scaling I need to do.
Let’s take an example. If our own screen size is 1920 * 960, all px (pixel unit) to draw. Then when our big screen appears on a 1440 * 900 screen, our big screen, can’t be fully displayed.
It’s really simple, 1440 * 900 pixels can’t display all the pixels of 1920 * 960.
Since a 1920 * 960 pixel can’t be displayed with 1440 * 900, wouldn’t scaling it, show it?
How the scaling is calculated, that’s where SCALE comes in.
const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftHeight ?
(document.documentElement.clientWidth / designDraftWidth) :
(document.documentElement.clientHeight / designDraftHeight);
Not hard to read.
Scale takes the current computer screen width in pixels (1440) divided by the current screen height in pixels (900) and compares it to the design width in pixels (1920) divided by the design height in pixels (960).
If the current screen scale < design scale. Then the ratio we need to scale is the width of the screen divided by the width of the artwork
If the current screen scale > design scale. Then the scale we need to scale is the screen height divided by the design height
So 1440/900 = 1.6. 1920/960 = 2
Because 1.6 < 2. (The current screen ratio is smaller than the design ratio)
So the ratio we need to scale is:Screen width divided by design width = 1440/1920 = 0.75.
Going back to the earlier question, the reason that 1920 * 960 pixels can’t be fully displayed in 1440 * 900 pixels is that 1440 * 900 can’t fully display more than its own pixel points. So, all we need to do is to scale the current view overall ✖ the scaling we just figured out (0.75). That’s all it takes to get the 1440 * 900 to accommodate our large screen.
1920 * 0.75 === 1440; 960 * 0.75 = 720.
After scaling, the original 1920 * 960 large screen can be displayed in 1440 * 900.
It’s worth noting that it’s a good idea to do window.onresize = null when exiting the big screen, as this adaptation is mainly for the big data screen. It does not apply to all scenarios. If it’s the rest of the project that needs to adapt (e.g. a form page). I would recommend you to use the rasterization system.
Do you need a full demo?
Demo effect
html —- react/vue generic
/*
html
*/
<div className="screen-wrapper">
<div className="screen" id="screen">
<div className="demo-root">
<header>top</header>
<main>
<div className="demo-left"></div>
<div className="demo-center"></div>
<div className="demo-right"></div>
</main>
<footer>bottom</footer>
</div>
</div>
<footer className="large-footer"></footer>
</div>
css section — react/vue generic
/*
css
*/
.screen-wrapper {
height: 100%;
width: 100%;
.screen {
display: inline-block;
width: 1920px;
height: 960px;
transform-origin: 0 0;
position: absolute;
left: 50%;
.demo-root{
header{
width: 1920px;
height: 200px;
background: rgba(53, 150, 206, 0.3);
font-size: 40px;
text-align: center;
line-height: 200px;
}
main{
display: flex;
height: 660px;
div{
width: 640px;
height: 100%;
}
.demo-left{
background: rgba(206, 52, 154, 0.3);
}
.demo-center{
background: rgba(13, 30, 179, 0.3);
}
.demo-right{
background: rgba(64, 163, 6, 0.849);
}
}
footer{
width: 100%;
height: 100px;
font-size: 40px;
text-align: center;
line-height: 100px;
background: rgba(19, 211, 115, 0.3);
}
}
}
}
js part —react
/*
js ---react
*/
const handleScreenAuto = (): void => {
const designDraftWidth = 1920;
const designDraftHeight = 960;
const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftHeight ?
(document.documentElement.clientWidth / designDraftWidth) :
(document.documentElement.clientHeight / designDraftHeight);
(document.querySelector('#screen') as any).style.transform = `scale(${scale}) translate(-50%)`;
}
useEffect(() => {
handleScreenAuto();
window.onresize = () => handleScreenAuto();
return () => window.onresize = null;
}, [])
js part — vue
/*
js ---vue
*/
mounted(){
handleScreenAuto();
window.onresize = () => handleScreenAuto();
},
deleted(){
window.onresize = null;
},
methods: {
const handleScreenAuto = (): void => {
const designDraftWidth = 1920;
const designDraftHeight = 960;
const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftHeight ?
(document.documentElement.clientWidth / designDraftWidth) :
(document.documentElement.clientHeight / designDraftHeight);
(document.querySelector('#screen') as any).style.transform = `scale(${scale}) translate(-50%)`;
}
}
