less&rem适配方案

最新推荐文章于 2024-03-14 14:52:51 发布

Amethyst紫宣

最新推荐文章于 2024-03-14 14:52:51 发布

阅读量375

点赞数

分类专栏： web移动端

本文链接：https://blog.youkuaiyun.com/Amethystlry/article/details/113352225

版权

web移动端专栏收录该内容

5 篇文章

订阅专栏

文章目录

less

基本语法

变量、mixin、嵌套(注意&:hover、.@{var})、导入

less浏览器端的使用

1.	浏览器不识别less代码，必须先解析为css代码
2.	引入less文件需要加上type="text/less"
3.	less.watch();无刷新预览新样式  有延迟
4.	以http形式打开网页（不支持file）

<link rel="stylesheet" type="text/less" href="less/test.less">
<script src="lib/less/less.min.js"></script>
<script>less.watch();</script>

rem

rem的认识

1. rem是相对单位
2. em的大小是基于父元素的字体大小
3. rem的大小是基于html元素的字体大小  r-root
4. 浏览器的默认字体大小是16px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html{
            font-size: 20px;
        }
        body{
            line-height: 1;
            font-size: 50px;
            font-family: SimSun;
        }
        .em{
            font-size: 2em;
        }
        .rem{
            font-size: 2rem;
        }
    </style>
</head>
<body>
<div class="em">AAA</div>
<div class="rem">AAA</div>
</body>
</html>

在这里插入图片描述

移动端适配方案——rem适配

移动端适配方案：
1. 伸缩布局 flex
2. 流式布局  百分比
3. 响应式布局  媒体查询（xs：流式布局）
 
共同点：元素只能做到width的适配(img除外)
rem适配：width和height都能做到适配（等比缩放）

4.rem布局
通过控制html上的字体大小去控制页面上所有以rem为单位的尺寸

4.1 设基准值
4.2 适配各种设备（媒体查询）
	rem换算公式：当前基准值=预设基准值/设计稿宽度*当前设备宽度
4.3 把页面上的px——>rem

用less适配各类设备（改变html的字体大小，@media）

//设备屏幕种类
@DeviceList:750px,720px,640px,540px,480px,424px,414px,400px,384px,375px,360px,320px;

//屏幕种类数量
@len:length(@DeviceList);

//预设基准值
@baseFontSize:100px;

//设计稿尺寸
@psdWidth:750px;

//主题颜色
@suningColor:#fabc09;

1.	less没有循环语法
2.	使用函数的迭代 死循环
3.	根据数组长度终止循环
4.	需要序号来判断  通过序号遍历 @index:1 开始

.adapterMixin(@index) when (@index>0){
  @media (min-width: extract(@DeviceList,@index)){
    html{
      font-size: (@baseFontSize/@psdWidth) * extract(@DeviceList,@index) * 1px;
    }
  }
  .adapterMixin(@index - 1);
}