美文网首页
前端自适应

前端自适应

作者: STUDY_67eb | 来源:发表于2020-03-19 14:10 被阅读0次

    前端想实现随着网页的大小,网页中的元素也会动态的改变大小。可以通过rem或者em来实现。

    由于px是像素值,可以理解为是绝对大小,自适应要是实现的是相对大小;

    em是随着同级别下的font-size的大小改变进行改变;

    rem是随着<html>根的font-size的大小改变进行改变。

    我们暂时选择rem来实现自适应。

    思路为,在js中获取网页的宽度,来动态的改变font-size的大小。比如现在对宽度进行24等分,那么实现代码如下:

    ```
    <script>

        function placeholderPic(){

            var w = document.documentElement.offsetWidth;

            // 获取宽度后进行24等分,每一个rem为24分之一

            document.documentElement.style.fontSize=w/24+'px';

        }

        placeholderPic();

        // 监听网页改变,一旦改变,就会动态改变其大小

        window.onresize=function(){

            placeholderPic();

        }

    </script>

    ```

    相关文章

      网友评论

          本文标题:前端自适应

          本文链接:https://www.haomeiwen.com/subject/kfqlyhtx.html