移动适配rem + less+vw / vh

最新推荐文章于 2024-03-11 09:12:23 发布

xumengxia—xu

最新推荐文章于 2024-03-11 09:12:23 发布

阅读量393

点赞数

文章标签： less html html5

本文链接：https://blog.csdn.net/qq_56514785/article/details/120031913

版权

移动web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

rem ：目前多数企业在用的解决方案

vw / vh：未来的解决方案

1. 能够使用rem单位设置网页元素的尺寸

屏幕宽度不同，网页元素尺寸不同（等比缩放） 
px单位或百分比布局可以实现吗？ 
px单位是绝对单位 
百分比布局特点宽度自适应，高度固定 
适配方案 ： rem   vw / vh

rem单位

相对单位

rem单位是相对于 HTML标签的字号计算结果

1rem = 1HTML字号大小

2.手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？

确定设计稿对应的设备的 HTML标签字号 Ø 查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定基准根字号（1/10视口宽度）

rem单位的尺寸 = px单位数值 / 基准根字

使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果

flexible.js是手淘开发出的一个用来适配移动端的 js框架。

核心原理就是根据不同的视口宽度给网页中 html 根节点设置不同的 font-size 。

媒体查询
l 媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
l 当某个条件成立, 执行对应的CSS样式


目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rem适配</title>
    <style>

        * {
            margin: 0;
            padding: 0;
        }
        
        /* 1. 不同的视口, HTML标签字号不同, 字号是视口宽度的1/10 */
        @media (width:320px) {
            html {
                font-size: 32px;
            }
        }

        @media (width:375px) {
            html {
                font-size: 37.5px;
            }
        }
        @media (width:414px) {
            html {
                font-size: 41.4px;
            }
        }


        /* 2. 书写盒子尺寸, 单位rem */
        .box {
            width: 5rem;
            height: 3rem;
            background-color: pink;
        }
        
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

3.Less

使用Less语法快速编译生成CSS代码

Less是一个 CSS预处理器 , Less文件后缀是 .less

扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。

注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件

Easy Less : 
l vscode插件
l 作用：less文件保存自动生成css文件

注释：

 单行注释
 语法：// 注释内容
 快捷键：ctrl + / l 块注释
 语法：/* 注释内容 */ Ø 快捷键： shift + alt + A

运算：
l 加、减、乘直接书写计算表达式 l 除法需要添加 小括号 

.box {
    width: 100 + 10px;
    width: 100 - 20px;
    width: 100 * 2px;

    // 除法
    // 68  > rem
    width: (68 / 37.5rem);
    // height: 29 ./ 37.5rem;

    height: 29 / 37.5rem;

}

能够使用Less嵌套写法生成后代选择器

.father {
    width: 100px;
    .son {
        color: pink;
        // & 表示当前选择器
        &:hover {
            color: green;
        }
    }

    &:hover {
        color: orange;
    }
}

// 够使用Less变量设置属性值 变量：存储数据，方便使用和修改
// 1. 定义. 2.使用

@colora:green;

.box {
    color: @colora;
}

.father {
    background-color: @colora;
}

.aa {
    color: @colora;
}

能够使用Less导入写法引用其他Less文件 可以省略.less后缀名

@import './01-体验less.less';
@import './02-注释';

使用Less语法导出CSS文件
方法一：
配置EasyLess插件， 实现所有Less有相同的导出路径
配置插件： 设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码（注意，必须是双引号）

"less.compile": {
        "out": "../css/"   注意文件夹名称后面添加 / 才是文件夹  否则就是文件
}



方法二：控制当前Less文件导出路径  单独导出
Less文件第一行添加如下代码, 注意文件夹名称后面添加 / 

daqiu.css 最后跟的是文件名字
// out: ./qqq/daqiu.css     
// out: ./abc/

所有的Less文件都需要导出CSS文件吗？

禁止导出 
在less文件第一行添加: // out: false

4.vw / vh

使用vw单位设置网页元素的尺寸

相对单位
 相对视口的尺寸计算结果
 vw：viewport width
 1vw = 1/100视口宽度
 vh：viewport height
 1vh = 1/100视口高度

// out: ./
* {
    margin: 0;
    padding: 0;
}

// 68 * 29  -- vw
.box {
    width: (68 / 3.75vw);
    height: (29 / 3.75vw);
    background-color: pink;
}

.box2 {
    // vh
    width: (68 / 6.67vh);
    height: (29 / 6.67vh);
    background-color: green;
}

xumengxia—xu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
移动适配rem + less+vw / vh

rem ：目前多数企业在用的解决方案vw / vh：未来的解决方案1. 能够使用rem单位设置网页元素的尺寸屏幕宽度不同，网页元素尺寸不同（等比缩放） px单位或百分比布局可以实现吗？ px单位是绝对单位百分比布局特点宽度自适应，高度固定适配方案： rem vw / vhrem单位相对单位 rem单位是相对于HTML标签的字号计算结果 1rem = 1HTML字号大小2.手机屏幕大小不同，分辨率不同，如何设置不同的HTML标...
复制链接

扫一扫