一 主流的两种方案


rem : 目前多数企业在用的解决方案, 比如小米移动端


vw / vh:未来的解决方案,比如B站移动端




二 rem单位



相对 单位



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



1rem = 1HTML字号大小



所以,我们只需要修改html 的文字大小,就可以完成元素大小的等比例缩放



三 媒体查询设置差异化CSS样式



媒体查询 能够 检测视口的宽度 ,然后编写 差异化的 CSS 样式



当某个条件成立, 执行对应的CSS样式



@media (width:414px) {
    body {
            background-color: pink;
         }
}

四 rem适配原理



1.确定设计稿 对应 的设备的 HTML标签字号



查看 设计稿宽度 → 确定参考 设备宽度 (视口宽度) → 确定 基准根字号 (1/10视口宽度)



2. rem单位的尺寸



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




五 flexible.js 



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



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




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

六 Less



除法运算。 CSS不支持计算写法



解决方案:可以通过Less实现




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



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



常见的预处理器还有 Sass、Stylus



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




Easy Less :



vscode插件



作用:less文件保存 自动生成 css文件



注意: html页面引入的还是css文件,而不是 less 文件




运算:



加、减、乘直接书写计算表达式



  除法 需要添加 小括号 或 .



// 第一种除法
// margin: 100./50px;
// 第二种除法 ()
margin: (100/50px);



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



.banner {
            width: 100%;
            height: (160/@baseSize);
            overflow: hidden;
            background-color: #fff;

            ul {
                width: 200%;
                display: flex;
            }
}



使用 Less 变量设置 属性值:



把颜色提前存储到一个容器,设置属性值为这个容器名




语法:



定义变量: @变量名: 值;



使用变量: CSS属性:@变量名;



@baseSize: 37.5rem;
padding-left: (15/@baseSize);



使用 Less导入 写法引用其他Less文件:



导入: @import “文件路径”;



@import './base.less';
@import './normalize.less';



使用Less语法 导出CSS文件 :



配置插件: 设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码(注意,必须是 双引号 )



"less.compile": {
        "out": "../css/"
    },