Skip to content

Instantly share code, notes, and snippets.

@HeGanjie
Last active Dec 13, 2020
Embed
What would you like to do?
rem 全屏自适应逻辑,1080p下 1rem=100px
<!doctype html>
<html style="font-size: 100px">
<head>
<meta charset="utf-8" />
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<% if (context.title != null) { %>
<title><%= context.title %></title>
<% } %>
<% if (context.isProd) { %>
<script type="text/javascript">
if(!(window.console && console.log)) {
console = {
log: function(){},
debug: function(){},
info: function(){},
warn: function(){},
error: function(){}
};
}
if (/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {
document.write('<script src="/sycm/_bc/babel-polyfill/dist/polyfill.min.js"><\/script>\n<script src="/sycm/_bc/whatwg-fetch/dist/fetch.umd.js"><\/script>');
}
try {
window.ENV = 'production';
window.version = <%- JSON.stringify(context.version) || '""' %>;
console.log('sycm version: ', window.version)
} catch (e) {
console.warn(e)
}
</script>
<% } else { %>
<script>
window.ENV = 'development'
</script>
<%}%>
<script type='text/javascript'>
'use strict';
window.CURR_SCALE = 1;
(function () {
var html = document.documentElement;
function onWindowResize() {
html.style.fontSize = html.getBoundingClientRect().width / 19.20 + 'px';
}
// window.addEventListener('resize', onWindowResize);
onWindowResize();
})();
// 强制清除缓存
document.addEventListener('DOMContentLoaded', function () {
if (!window.version) {
return
}
function includes(str, keyword) {
return (str || '').indexOf(keyword) !== -1;
}
function withExtraQueryStr(url, extraQueryStr) {
return !extraQueryStr ? url : '' + url + (includes(url, '?') ? '&' : '?') + extraQueryStr;
}
try {
fetch('/api/get-public-config?cCache=30')
.then(function (res) { return res.json() })
.then(function (res) {
var version = res && res.version || Date.now();
var currUrl = window.location.href;
if (version && version !== window.version) {
var nextUrl = includes(currUrl, 'ver=')
? currUrl.replace(/ver=[\w.-]+/, 'ver=' + version)
: withExtraQueryStr(currUrl, 'ver=' + version);
window.location.href = nextUrl;
}
})
.catch(function (err) { return console.warn(err) });
} catch (e) {
console.warn(e);
}
}, false);
</script>
</head>
<body>
<div id="<%= context.config.mountElementId %>"></div>
</body>
</html>
import React, {useEffect, useState} from "react";
import _ from 'lodash'
export default function Layouts(props) {
const [viewPortBounds, setViewPortBounds] = useState();
useEffect(() => {
let html = document.documentElement;
function onWindowResize() {
let { width: sWidth, height: sHeight } = html.getBoundingClientRect();
// 1rem = 100px for 1920 screen
// 调整 rem 单位方法: https://unix.stackexchange.com/a/430111/240824
const remUnit = sWidth / 19.2;
let idealAspectRatio = 16 / 9;
let screenAspectRatio = sWidth / sHeight;
let widthEnough = idealAspectRatio <= screenAspectRatio;
// ideal: w/h = 16/9
// 需求:内容占满屏幕,不能显示滚动条,通过 rem 缩放而不能用 scale;
// 做法:屏幕宽度低于 1366px 时等比缩小保证内容可以一屏展示,但是宽度需要放大超过 19.2rem 从而保持占满屏幕宽度
// rem = sWidth / 19.2
// boxWidth = sWidth
// boxHeight = sWidth / idealAspectRatio
// 矮屏,根据高度缩放,scale * boxHeight = sHeight
// 窄屏,根据宽度缩放, scale * boxWidth = sWidth
let scale = widthEnough // 矮屏
? sHeight / (sWidth / idealAspectRatio)
: 1
window.CURR_SCALE = Math.min(1, scale)
html.style.fontSize = remUnit * window.CURR_SCALE + 'px';
const nextState = {
width: sWidth,
height: sHeight,
scale: window.CURR_SCALE
};
if (!_.isEqual(viewPortBounds, nextState)) {
setViewPortBounds(nextState);
}
}
onWindowResize()
window.addEventListener("resize", onWindowResize);
return () => {
window.removeEventListener("resize", onWindowResize);
};
});
// 用户要求不需要保持 16:9 比例,需要占满屏幕
let scale = viewPortBounds?.scale ?? 1
let boxWidthRem = 19.2 / scale
return (
<div
className="business-consultant-entry relative"
style={{
width: `${boxWidthRem}rem`,
height: `10.8rem`,
background: "#F0F2F9"
}}
>
{props.children}
</div>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment