常用代码块

Grover的账号

已于 2024-05-13 10:18:40 修改

阅读量132

点赞数 3

文章标签： javascript 前端开发语言

于 2024-04-09 10:51:08 首次发布

本文链接：https://blog.youkuaiyun.com/m0_68054161/article/details/137542615

版权

本文介绍了移动端页面开发中的关键技术，包括使用JavaScript动态调整HTML根元素的字体大小以实现自适应布局，以及CSS样式重置的方法，确保在不同设备上的一致性与性能优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、移动端适配

    <script>
        (function () {
            var html = document.documentElement; // HTML 根元素
            var width = html.clientWidth; // CSS 像素(设备宽度)
            html.style.fontSize = width / 16 + 'px'; // 把屏幕分成了 16 列
            // 每一列的宽度为 23.4375
            // 因此设置根元素的字体大小为 23.4375px
        })();
    </script>

二、CSS样式重置

/* reset.css */
/* 字体大小 */
html {
    font-size: 0;
}

/* 字体颜色 */
a {
    color: inherit;
}

/* 下划线 */
a {
    text-decoration: none;
}

/* 列表点 */
li {
    list-style: none;
}

/* 外边距、内边距 */
body,
p,
ul,
h1,
h2,
h3 {
    margin: 0;
    padding: 0;
}