Wie kann ich das Layout wiederherstellen, nachdem ich den Designentwurf erhalten habe? Wenn Sie nur ein nicht exaktes Responsive Design benötigen, ist die Verwendung von Medienabfragen zur Erreichung dieses Ziels in Ordnung. Wenn es notwendig ist, den Entwurfsentwurf genau wiederherzustellen, wird dies normalerweise durch Zoomen erreicht. Zu den gängigen Lösungen gehören Ansichtsfenster-basierte und Rem-basierte Skalierungslösungen. In diesem Artikel werden hauptsächlich relevante Informationen vorgestellt, die die mobile REM-Layout-Anpassungsmethode von H5-Aktivitätsseiten ausführlich erläutern. Ich hoffe, dass sie allen helfen kann.
1 Ansichtsfenster-Skalierungslösung
Auf der mobilen Seite kann das Ansichtsfenster-Skalierungsverhältnis verwendet werden, um den Zweck zu erreichen.
Einfach ausgedrückt stimmen alle Breiten- und Höhenpixel mit der Ausgabe des Modells überein, und dann wird das Ansichtsfenster dynamisch durch das Verhältnis der Seitenbreite zur Breite des Modells festgelegt. Kerncode-Referenz der Skalierungslösung:
(function () {
var docEl = document.documentElement;
var isMobile = window.isMobile /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i.test(navigator.userAgent);
function setScale() {
var pageScale = 1;
if (window.top !== window) {
return pageScale;
}
var width = docEl.clientWidth || 360;
var height = docEl.clientHeight || 640;
if (width / height >= 360 / 640) {
// 高度优先
pageScale = height / 640;
} else {
pageScale = width / 360;
}
var content = 'width=' + 360 + ', initial-scale=' + pageScale
+ ', maximum-scale=' + pageScale + ', user-scalable=no';
document.getElementById('viewport').setAttribute('content', content);
window.pageScale = pageScale;
}
if (isMobile) {
setScale();
} else {
docEl.className += ' pc';
}
})()Diese Lösung wurde letztes Jahr in unserem H5-Aktivitätsseitendesign praktiziert.
Aber wenn Sie möchten, dass es auf dem PC angezeigt wird, kann es nur mit einem festen Wert eingestellt werden, da es kein Zoomkonzept für das Ansichtsfenster gibt, was nicht ideal ist.
2 rem Layout Adaptation Solution
rem Layout Adaptation Solution wurde oft erwähnt und wird häufig in den Produkten großer Internetunternehmen verwendet.
Einfach ausgedrückt ist die Methode:
Dynamische Berechnung und Einstellung der Schriftgröße des HTML-Root-Tags entsprechend dem Verhältnis des Designentwurfs zur Breite des Geräts;
In CSS werden die Breite, Höhe, relative Position usw. der Entwurfselemente entsprechend dem gleichen Verhältnis in Werte umgewandelt 🎜>
2.1 Die Schriftgröße des HTML-Tags dynamisch festlegen
Das erste Problem ist die dynamische Berechnung der Schriftgröße des HTML-Tags. Dies hängt davon ab, wie das Konvertierungsverhältnis vereinbart wird. Am Beispiel von zehn gleichen Teilen der Seitenbreite lautet die Kerncode-Referenz:(function(WIN) {
var setFontSize = WIN.setFontSize = function (_width) {
var docEl = document.documentElement;
// 获取当前窗口的宽度
var width = _width || docEl.clientWidth; // docEl.getBoundingClientRect().width;
// 大于 1080px 按 1080
if (width > 1080) {
width = 1080;
}
var rem = width / 10;
console.log(rem);
docEl.style.fontSize = rem + 'px';
// 部分机型上的误差、兼容性处理
var actualSize = win.getComputedStyle && parseFloat(win.getComputedStyle(docEl)["font-size"]);
if (actualSize !== rem && actualSize > 0 && Math.abs(actualSize - rem) > 1) {
var remScaled = rem * rem / actualSize;
docEl.style.fontSize = remScaled + 'px';
}
}
var timer;
//函数节流
function dbcRefresh() {
clearTimeout(timer);
timer = setTimeout(setFontSize, 100);
}
//窗口更新动态改变 font-size
WIN.addEventListener('resize', dbcRefresh, false);
//页面显示时计算一次
WIN.addEventListener('pageshow', function(e) {
if (e.persisted) {
dbcRefresh()
}
}, false);
setFontSize();
})(window)function adjustWarp(warpId = '#warp') {
// if (window.isMobile) return;
const $win = $(window);
const height = $win.height();
let width = $win.width();
// 考虑导航栏情况
if (width / height < 360 / 600) {
return;
}
width = Math.ceil(height * 360 / 640);
$(warpId).css({
height,
width,
postion: 'relative',
top: 0,
left: 'auto',
margin: '0 auto'
});
// 重新计算 rem
window.setFontSize(width);
}2.2 Elementgrößenwertmethode
Das zweite Problem ist der Wert der Elementgröße. Nehmen wir als Beispiel die Breite des Designentwurfs von 1080 Pixel. Wir teilen die Breite zur einfachen Konvertierung in 10 gleiche Teile, dann ist 1rem = 1080 / 10 = 108 Pixel. Die Konvertierungsmethode ist:const px2rem = function(px, rem = 108) {
let remVal = parseFloat(px) / rem;
if (typeof px === "string" && px.match(/px$/)) {
remVal += 'rem';
}
return remVal;
}.img_demo {
position: absolute;
background-size: cover;
background-image: url('demo.png');
top: 2.97222rem;
left: 0.64814rem;
width: 4.25926rem;
height: 1.94444rem;
}2.3 rem Layout Schema-Entwicklungsmethode
Durch die obige Methode wird das REM-Layoutschema realisiert. Eine manuelle Berechnung des rem-Werts ist jedoch offensichtlich unrealistisch. Mit dem Vorverarbeitungstool less/sass müssen wir nur die Mixins-Methode festlegen und dann den Wert entsprechend der tatsächlichen Größe des Designentwurfs übernehmen. Am Beispiel von less lautet die Mixins-Referenz wie folgt:// px 转 rem
.px2rem(@px, @attr: 'width', @rem: 108rem) {
@{attr}: (@px / @rem);
}
.px2remTLWH(@top, @left, @width, @height, @rem: 108rem) {
.px2rem(@top, top, @rem);
.px2rem(@left, left, @rem);
.px2rem(@width, width, @rem);
.px2rem(@height, height, @rem);
}.img_demo {
position: absolute;
background-size: cover;
background-image: url('demo.png');
.px2remTLWH(321, 70, 460, 210);
}2.4 Schriftarten verwenden px als Einheit
Schriftarten, die eine remproportionale Skalierung verwenden, müssen nur Medienabfragen verwenden, um mehrere Größen festzulegen. Beispielreferenz:// 字体响应式
@media screen and (max-width: 321px) {
body {
font-size: 13px;
}
}
@media screen and (min-width: 321px) and (max-width: 400px) {
body {
font-size: 14px;
}
}
@media screen and (min-width: 400px) {
body {
font-size: 16px;
}
}Beispielcode für CSS-Rasterlayout
Welche Techniken gibt es für das CSS-Layout?
Detaillierte Grafik- und Texterklärung von Layout-Tags und Listen-Tags in HTML
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der mobilen REM-Layout-Anpassungsmethode für die H5-Aktivitätsseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
