【H 5】2種類のスクリーン幅適応方式
7189 ワード
【H 5】画面幅の適応方式:
第1種
remはhtmlルート属性を取得するフォントサイズです
htmlのフォントサイズを変更し、remでスタイルの幅を設定します.
第2種
幅を750 pxに固定します.
画面幅と750のスケール関係を取得することによって、すべてのスタイル幅を写真に対応するスケールでスケールします.
第1種
remはhtmlルート属性を取得するフォントサイズです
htmlのフォントサイズを変更し、remでスタイルの幅を設定します.
//rem html html
remChange();
// resize remChange
window.addEventListener("resize", remChange)
function remChange() {
const html = document.querySelector("html");
const width = html.getBoundingClientRect().width; //
// 375px 1rem = 100px
html.style.fontSize = width / 3.75 + 'px';
}
第2種
幅を750 pxに固定します.
画面幅と750のスケール関係を取得することによって、すべてのスタイル幅を写真に対応するスケールでスケールします.
remChange();
window.addEventListener('resize', remChange);
function remChange() {
remove();
let width = window.screen.width;
let fixedw = 750;
let scale = width / fixedw; // 750
let meta = document.createElement("meta");
meta.setAttribute('name', 'viewport');
// meta
meta.setAttribute('content', `width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no`);
//meta
document.head.appendChild(meta);
}
function remove() {
let meta = document.querySelector("meta[name='viewport']");
if (meta != null) {
document.head.removeChild(meta);
}
}