移动端适配方案(rem和vw vh适配)(css预处理器-less)

最新推荐文章于 2024-02-25 22:13:44 发布

秋刀鱼不过期a

最新推荐文章于 2024-02-25 22:13:44 发布

阅读量2.7k

点赞数 1

文章标签： html 前端 css

本文链接：https://blog.csdn.net/ck1216801274/article/details/125964305

版权

适配方案:

目前移动端适配方案有两种:

1.flex+rem单位当前市面上用的比较多相对主流(比如小米和淘宝移动端)

2.flex+viewport width/viewport height(vw/vh)单位这是一个比较新兴的适配方案属于未来使用的一个趋势(如b站移动端)

让flex做布局（盒子摆放），让rem或者vw/vh 实现网页元素的尺寸（宽度和高度）适配屏幕

这篇主要是来说说这两种适配方案的区别和使用方法

rem适配

1.rem是一个相对单位,1rem就是html标签文字的大小

比如:

html {
    font-size: 35px;
}
复制代码

图中1rem就是35像素(px)

这里就不得不提一下媒体查询(mediaquery)可以自动检测屏幕视口的宽度

主要作用就是根据屏幕宽度修改html文字的大小

语法:
 <style>
        /* 检测屏幕大小 使用媒体查询 @media */
        /* 屏幕大小为414px时 body颜色为蓝色 */
        @media (width:414px) {
            body {
                background-color: blue;
            }
        }
    </style>
    
复制代码

综合rem写法:
 <style>
  /* 默认是html的字体大小 默认是16px */
        /* 相对单位 只相对html标签大小 */
        @media (width:375px) {
            html {
                font-size: 37.5px;
            }
        }
        .box {
            width: 8rem;
            height: 5.33333333333rem;
            background-color: pink;
        }
    </style>
    
    
    <body>
    <!-- 需求:测量宽高分别是300px 200px 参照标准稿 -->
    <div class="box">
    这是一个盒子
    </div>
复制代码

使用场景:html字体大小变换页面一起变

通过媒体查询，检测不同的视口宽度，设定不同的html文字大小，元素设置rem单位后，可以达到元素适配效果

但是媒体查询一旦有多个和很多个不同大小的屏幕尺寸需要适配, 不仅写起来比较麻烦而且检测的精度也不太够

那么怎么办呢

这里就需要用到一个javascript文件(由淘宝手机端开发的) 就能达到自动检测屏幕宽度且自动修改html文字大小这样不仅可以让盒子配合rem完成适配还能提高检测精度减少程序员的重复操作性

语法:
<script src="./js/flexible.js"></script>
复制代码

cv(小知识)代码片段 *js语法要写在body结束标签的前面(因为浏览器是从上往下渲染先html后css再js) 具体咱们到后面之后的js篇再细说

flexible 能够修改html文字大小，修改文字大小: 当前屏幕 / 10 就是文字大小

例如：当前屏幕 375px，则加了 flexible之后，html文字大小为 37.5px

在实际开发工作中咱们的设计稿里面的元素大小都是固定的px单位而我们需要使用rem进行适配

那怎么把我们测量的px 转换为适配的rem呢？

直接使用测量的px值 / 37.5 就是 rem的值(这里37.5就是标准稿参照iphone6.7.8的手机屏幕大小的得到的1rem值)

后面我们学习vue开发的时候，所有的单位我们写 px。就足够了。

vw/vh适配

这基本是未来主流趋势不需要咱们来用媒体查询来检测屏幕大小它会自动适应屏幕缩放

vw就是视口的宽度，vw 是个相对单位。

不管在什么屏幕下，我们把屏幕分为平均的 100等份。

但是vw和vh不要一同使用日常中选择其中一种即可(因为会让盒子变形)

1vw = 1 / 100 屏幕的宽度

简单明了方便快捷具体可以参考b站

那么px如何转换成vw

比如:我们设计稿是 iphone 678 是 375px， vw 把屏幕划分了100等份，则 1vw = 3.75 px

less预处理器

这个刚出来的时候争议性比较大但是一旦熟练掌握之后是非常好用的

那么什么是less呢

Less是一个CSS预处理器, Less文件后缀是.less
扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。

less 可以帮我们把px单位自动转换到rem单位。

less计算:

.box {
    // less自动计算＋－* /
    width: 200px - 50px;
    height: 200px + 60px;
    // 除法运算时要带小括号
    border: (100px /20px);
    // 当两个值不一致时 取第一个值
    font-size: 20rem * 5px;
    background-size: (150/37.5rem);
    
    background-color: red;
}
复制代码

注意点：

计算以第一个单位为准，尽量写到最后一个数字上。比如
```
height: (100 / 37.5rem);
复制代码
```
除法比较特殊，必须添加小括号。
计算别忘了先乘除后加减

less嵌套

和css的书写区别主要是后代选择器和伪类写法上的区别

.box {
    color: aqua;
    div {
        color: blue;
        p {
             color: tomato;
            span {
                color: springgreen;
            }
        }
    }
}
// less里面的伪类选择器 前面要加&
.box {
    &::before {
        background-color: red;
        &:hover {
            background-color: yellowgreen;
        }
        
    }
}
复制代码

我们在写伪类和伪元素的时候，经常使用** & **来代替父元素

生成css之后的格式:
.box {
  color: aqua;
}
.box div {
  color: blue;
}
.box div p {
  color: tomato;
}
.box div p span {
  color: springgreen;
}
.box::before {
  background-color: red;
}
.box::before:hover {
  background-color: yellowgreen;
}

复制代码

less变量

这里的变量和js的非常像

变量的最大优点:方便后续的修改和使用

// 语法:
这里变量名建议小驼峰命名法     @backGroundColor
// @变量名:值;
@bgcolor:red;
@bordersize :1px solid #763232;
@basesize:37.5rem;

.box {
    background-color: @bgcolor;
    border: @bordersize;
}
.box1 {
    width: (180 / @basesize);
    height: (540 / @basesize);
}
复制代码

less的导入和导出

less的导入实际是 less 文件的导入。

@import './变量.less';
@import url(./变量.less);
复制代码

使用less导入的好处是：减少了html页面的 link标签数量

为何需要导出呢因为less文件保存后会自动在同级路径生成一个css文件不便于后续开发中文件的统一管理和修改所以需要导出到咱们文件夹中用来专门保存css的文件夹

导出有两种方法: 一种使用插件(推荐这种)

  "less.compile": {
    "out": "../css/" // 设置导出css路径
  },
复制代码

第二种相对比较麻烦: 需要手动给每一个less文件导出

导出必须写在less文件的第一行

// out: 路径/文件名
复制代码

例子
// out: ./mycss/pink.css
复制代码

设置导出：当面目录下，创建一个 mycss 文件夹，生成一个 pink.css （做了改名）

// out: ./mycss/
复制代码

设置导出：当面目录下，创建一个 mycss 文件夹，生成一个跟less一样的文件名（原名）

禁止导出

防止css文件夹文件重复显示

// out: false
复制代码

总结:

我们的需求的是要做移动端适配：页面中的元素尺寸跟随屏幕宽度等比例缩放（适当调整大小）

方案如下：

flex + rem + flexiable.js + less

我们移动端采取 flex 布局。

rem单位：做移动端适配的。

rem相对单位，跟html文字大小有关系

vw/vh单位: 做移动端适配的

vw/vh也是相对单位,跟视口宽度和高度有关系

媒体查询： 检测屏幕的视口宽度

flexiable.js ：可以根据屏幕的宽度自动修改html文字大小

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

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

秋刀鱼不过期a

关注

1
点赞
踩
18

收藏

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

分享到 QQ

分享到新浪微博

扫一扫