前端之移动端布局实例

最新推荐文章于 2022-07-25 11:50:49 发布

前端头条

最新推荐文章于 2022-07-25 11:50:49 发布

阅读量1.7k

点赞数 1

分类专栏： HTML5 SEO HTML 科技 web前端程序员编程资讯 JavaScript css 框架 css3 文章标签：程序员编程 web前端资讯科技

本文链接：https://blog.csdn.net/tianduantoutiao/article/details/90707002

版权

移动端布局实例
基于rem的布局
首先了解em单位，em单位是参照元素自身的文字大小来设置尺寸，rem指的是参照根节点的文字大小，根节点指的是html标签，设置html标签的文字大小，其他的元素相关尺寸设置用rem，这样，所有元素都有了统一的参照标准，改变html文字的大小，就会改变所有元素用rem设置的尺寸大小。

em单位示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        
        .box01{
            font-size:12px;
            width:20em;
            height:10em;
            background-color:gold;
        }

        .box02{
            font-size:20px;
            width:20em;
            height:10em;
            background-color:green;
        }

        p{
            font-size:20px;
            text-indent:2em;
        }

    </style>
</head>
<body>
    <div class="box01"></div>
    <br />
    <br />
    <div class="box02"></div>


    <p>首先了解em单位，em单位是参照元素自身的文字大小来设置尺寸，rem指的是参照根节点的文字大小，根节点指的是html标签，设置html标签的文字大小，其他的元素相关尺寸设置用rem，这样，所有元素都有了统一的参照标准，改变html文字的大小，就会改变所有元素用rem设置的尺寸大小。首先了解em单位，em单位是参照元素自身的文字大小来设置尺寸，rem指的是参照根节点的文字大小，根节点指的是html标签，设置html标签的文字大小，其他的元素相关尺寸设置用rem，这样，所有元素都有了统一的参照标准，改变html文字的大小，就会改变所有元素用rem设置的尺寸大小。</p>
</body>
</html>

em单位示例

最小的文字单位是12px，小于12px的文字大小都会默认改为12px；

rem单位示例

<!DOCTYPE html>
<html lang="en" style="font-size:30px;">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box01{
            font-size:12px;
            width:20rem;
            height:10rem;
            background-color:gold;
            margin:1rem;
        }

        .box02{
            font-size:20px;
            width:20rem;
            height:10rem;
            background-color:green;
            margin:1rem;
            
        }
    </style>
</head>
<body>
    
    <div class="box01"></div>

    <div class="box02"></div>

</body>
</html>

rem单位示例

rem是在移动页面将内容进行等比例缩小；

rem示例-通过js控制rem来动态控制内容宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!--<script type="text/javascript" src="js/set_root.js"></script>-->
    <title>Document</title>
    <style type="text/css">
        body{
            margin:0;
        }
        .header{
            height:2.5rem;
            background-color:gold;
            text-align:center;
            line-height:2.5rem;
            font-size:20px;
        }

    </style>
</head>
<body>
    <div class="header">头部文字</div>
</body>
<script>
    (function(){
    var calc = function(){
        var docElement = document.documentElement;
        var clientWidthValue = docElement.clientWidth > 750 ? 750 : docElement.clientWidth;
        docElement.style.fontSize = 20*(clientWidthValue/375) + 'px';
    };
    calc();
    window.addEventListener('resize',calc);
})();
</script>
</html>

通过js控制rem来动态控制内容宽度

cssrem安装
cssrem插件可以动态地将px尺寸换算成rem尺寸

下载本项目，比如：git clone https://github.com/flashlizi/cssrem
进入packages目录：Sublime Text -> Preferences -> Browse Packages…
复制下载的cssrem目录到刚才的packges目录里。重启Sublime Text。

配置参数参数配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem px_to_rem - px转rem的单位比例，默认为40。 max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。 available_file_types - 启用此插件的文件类型。默认为：[".css", “.

最低0.47元/天解锁文章

前端头条

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
前端之移动端布局实例

移动端布局实例基于rem的布局首先了解em单位，em单位是参照元素自身的文字大小来设置尺寸，rem指的是参照根节点的文字大小，根节点指的是html标签，设置html标签的文字大小，其他的元素相关尺寸设置用rem，这样，所有元素都有了统一的参照标准，改变html文字的大小，就会改变所有元素用rem设置的尺寸大小。em单位示例<!DOCTYPE html><html lan...
复制链接

扫一扫

专栏目录