rem设计方案

最新推荐文章于 2024-12-13 14:41:15 发布

原创最新推荐文章于 2024-12-13 14:41:15 发布 · 381 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

rem 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种基于REM单位的响应式布局方法，适用于所有移动端设备。通过动态调整HTML字体大小，确保不同屏幕尺寸下内容的清晰显示。讨论了布局、图片、文字大小的最佳实践，强调了flex布局的重要性。

找到最大尺寸 720px

考虑问题屏幕缩小是=时尺寸的问题：让HTML的font-size是一个动态值

(function (window, document) {

    var viewWidth = 750;
    var pick = viewWidth / 100;
    var mode = "resize";

    function change() {
        var view = document.documentElement.clientWidth || window.innerWidth;
        // 如果视图窗口 宽度大于 720px
        if (view >= 750) {
            //那么设置 html 的font size 为100px
            document.getElementsByTagName("html")[0].style.fontSize = 100 + "px";
            return;
        }
        document.getElementsByTagName("html")[0].style.fontSize =
            view / pick + "px";
    }
    window.addEventListener(mode, change, !1);
    window.document.addEventListener("DOMContentLoaded", change, !1);
})(window, document);

一套代码一个布局适用所有移动端

1.设计时，以最大像素为基础 768px,那么所有低于768的屏幕都适配
2.整体布局默认不设置宽度：默认100%
3：父元素一半不设置高度，有子元素撑起来
4.图片设置100%宽度
5.布局用flex  不用 width:100% float
6.文字大小用rem

在使用rem方案的时候，设计师设计尽量最大的页面效果图，例如720像素的基本可以适应所有的移动端的设备

整体布局默认是不设置宽度的，就直接让它100%，铺满整个屏幕就OK了
小布局都是rem为单位的，大于720像素的时候，没有变化，但是一旦小于720像素的时候，等比例的缩放，这点跟移动端不考虑放大，考虑缩小的原则是一致的
图片只设置width:100%,其余不用设置，自适应盒子的大小
文字依然以rem为单位，等比例的放大，缩小
所有的布局均使用flex布局来用,不再使用width百分比，float布局了