less与移动媒体适配

最新推荐文章于 2024-04-10 22:22:43 发布

爱凑热闹828

最新推荐文章于 2024-04-10 22:22:43 发布

阅读量138

点赞数

分类专栏： web前端文章标签： less 媒体前端

本文链接：https://blog.csdn.net/weixin_65692463/article/details/127251927

版权

web前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

移动端的适配方案：

flex + rem单位做适配效果（比如淘宝和小米移动端）当前市场最多
flex + viewport width /vh单位做适配效果（比如 B站移动端）新兴，马上的一个趋势

rem 是一个相对单位，1rem 就是 html 文字的大小

比如此时1rem就时35像素

html {
    font-size: 35px;
}

媒体查询我们一般会配合js 是手淘推出的可以帮我们自动检测屏幕宽度，自动修改html文字大小

<script src="./js/flexible.js"></script>

 <!-- 引入的时css文件 不是less文件 -->
    <!-- <link rel="stylesheet" href="./less/01.less"> -->
    <link rel="stylesheet" href="./css/01.css">
</head>
<!-- bug:请你找到问题,让子盒子实现水平垂直效果 -->

<body>
    <div class="father">
        <div class="son">
        </div>
    </div>

文件引入不能引入less

        .box {
            /* 不要写错了值为rem */
            /* width: 2em; */
            width: 2rem;
            height: 2rem;
            padding: 1.2rem;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script src="./js/flexible.js"></script>
    <!-- 引入js是 script 标签 不是用link引入 -->
    <!-- <link rel="stylesheet" href="./js/flexible.js"> -->

less: less让我们的css具有了计算能力

less 可以让我们很方便的把 px 转换为 rem

.box {
    // width: 100 / 50px;
    // 除法要用括号括起来 或者前面加 .
    width: (100 / 50px);
    height: 50px;
    color: @color;
    background-color: @color;

爱凑热闹828

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录