适配方案:

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

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

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

rem和vw,vh的介绍
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 rem的介绍前言一.rem是什么二.手写rem布局三.rem适配方案四.vw,vh适配方案前言提示:以下是本篇文章正文内 ...
Vite + Vue3 项目中，使用 vw/vh 适配移动端，并通过 Android Studio 打包
目录 1. 使用 vw/vh 适配移动端 1.1 使用 vite 初始化项目 1.2 安装插件,将 px 转化成 vw 1.2.1 在 vite.config.ts 中,声明插件 1.2.2 手写 p ...
PC端、移动端响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
PC端.移动端响应式布局的常用解决方案对比简要介绍: 一.px 和视口 1. 像素 2. 视口 (1) 布局视口(layout viewport) (2) 视觉视口(visual viewport ...
移动Web(rem less Vw/Vh/bootstra)
移动端适配方案 flex + rem单位,做适配效果(比如淘宝和小米移动端) 当前市场最多 flex +viewport width/vh单位做适配效果(比如 B站移动端新兴让flex做布局(盒 ...
响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
响应式布局的常用解决方案对比(媒体查询.百分比.rem和vw/vh) px和视口媒体查询百分比自适应场景下的rem解决方案通过vw/vh来实现自适应 px和视口在静态网页中,我们经常用像素( ...
H5移动端适配方案rem/vw
前言在讲解适配方案之前,我们聊聊为什么要做适配? 因为视口.逻辑像素.分辨率这些变量的不同,在每个设备展示都不一样,需要一种方案来统一. 物理像素:也就是分辨率,一个物理像素是显示器上的最小的物理显 ...
移动端vw vh适配
vw vh介绍属于一种新兴的移动端布局配置,功能与rem类似 vw 视口的最大宽度,1vw等于视口宽度的百分之一 vh 视口的最大高度,1vh等于视口高度的百分之一自动适配安装依赖 npm in ...
响应式布局的常用解决方案(媒体查询、百分比、rem和vw/vh）
在前端开发过程中,静态网页通常需要适应不同分辨率的设备,常用的自适应解决方案包括媒体查询.百分比.rem.和vw /vh,本文主要分析px在移动端布局中的不足,以及几种不同的自适应解决方案一 ...
vw vh vm CSS长度单位
vw 相对于视口的宽度.视口被均分为100单位的vw(即浏览器可视区) 100vw = 可视区宽度 vh 相对于视口的高度.视口被均分为100单位的vh(即浏览器可视区) 100vh = 可视区 ...

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