jsasg/orico-official-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

移动端尺寸字体调整

Browse Source
This commit is contained in:
liqian
2025-12-03 15:30:19 +08:00
parent e16b8b6b41
commit 42d9efdc02
31 changed files with 839 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
app/index/view/mobile/topic_power_prodline/index.html
View File

@@ -1,14 +1,38 @@
{extend name="public/base" /}
{block name="style"}
<!-- 将rem适配JS移到这里，确保优先执行 -->
<script type="text/javascript">
(function (doc, win) {
var docEl = doc.documentElement;
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
function setRootFontSize() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
var fontSize = clientWidth / 7.5; // 750px/7.5=100px，375px/7.5=50px
// 直接修改内联样式，优先级最高
docEl.setAttribute('style', 'font-size: ' + fontSize + 'px !important;');
}
setRootFontSize();
win.addEventListener(resizeEvt, setRootFontSize);
doc.addEventListener('DOMContentLoaded', setRootFontSize);
})(document, window);
console.log("根元素实际 font-size:", getComputedStyle(document.documentElement).fontSize);
// 查看内联设置的 font-size（JS 代码设置的值）
console.log("内联设置的 font-size:", document.documentElement.style.fontSize);
</script>
<link rel="stylesheet" href="__CSS__/topic_power_prodline/index.css">
<link rel="stylesheet" href="__CSS__/topic_power_prodline/swiper.css">
<link rel="stylesheet" href="__CSS__/topic_power_prodline/nav.css">
<link rel="stylesheet" href="__CSS__/topic_power_prodline/advantage.css">
<link rel="stylesheet" href="__CSS__/topic_power_prodline/swiper1.css">
<link rel="stylesheet" href="__CSS__/topic_power_prodline/nav1.css">
<link rel="stylesheet" href="__CSS__/topic_power_prodline/advantage1.css">
<link rel="stylesheet" href="__CSS__/topic_power_prodline/moren.css">
<link rel="stylesheet" href="__CSS__/topic_power_prodline/mask.css">
<link rel="stylesheet" href="__CSS__/topic_power_prodline/product.css">
<link rel="stylesheet" href="__CSS__/topic_power_prodline/product_list.css">
<link rel="stylesheet" href="__CSS__/topic_power_prodline/product1.css">
<link rel="stylesheet" href="__CSS__/topic_power_prodline/product_list1.css">
<link rel="stylesheet" href="__CSS__/topic_power_prodline/product_card.css">
<link rel="stylesheet" href="__CSS__/topic_power_prodline/footer.css">
{/block}
{block name="header"}
<!-- 重置header头为空 -->
@@ -237,7 +261,7 @@
<a class="product-left" href="{$dc_first_section_lf.link}">
<img src="{$dc_first_section_lf.image}" alt="{$dc_first_section_lf.short_title}" class="product-img">
<!-- 公共类+定位类：尺寸和第一个完全一致，仅定位不同 -->
<div class="product-img-hover" >
<div class="product-img-hover right" >
<img src="{$dc_first_section_lf.extra_image}" alt="{$dc_first_section_lf.short_title}" class="img3">
</div>
</a>
@@ -465,6 +489,27 @@
{/block}
{block name="script"}
<script type="text/javascript">
// (function (doc, win) {
// var docEl = doc.documentElement,
// resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
// recalc = function () {
// var clientWidth = docEl.clientWidth;
// if (!clientWidth) return;
// // 设计稿750px → 基准font-size=100px，375px设备自动变为50px
// clientWidth = Math.min(clientWidth, 750); // 大屏不超过设计稿宽度
// clientWidth = Math.max(clientWidth, 320); // 小屏保底
// docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
// // 将console.log放在recalc内部，每次计算后打印
// console.log(docEl.style.fontSize, '=docEl.style.fontSize=');
// };
// if (!doc.addEventListener) return;
// win.addEventListener(resizeEvt, recalc, false);
// doc.addEventListener('DOMContentLoaded', recalc, false);
// })(document, window);
let swiper=null;
const advantageItems = document.querySelectorAll('.advantage-card');
let scrollTop = 0; // 保存页面滚动位置