屏幕宽度发生变化，页面元素的尺寸（宽度和高度）也随之变化，这样可以更好的达到适配效果，用户体验更好
解决方案:
- 百分比布局或者 flex 完成整体元素排列布局
- 配合 rem 或者 vw/vh 单位 设置元素的尺寸（宽度/高度） 最终适配
em，rem
相同点： 都是相对单位
不同点：参照对象不同
- em是相对当前盒子文字大小
- rem是相对于html（根标签）文字大小
适配方案
移动端的适配方案：
- flex + rem单位 做适配效果 （比如淘宝和小米移动端） 当前市场最多
- flex + viewport width /vh单位 做适配效果 （比如 B站移动端 ） 新兴，马上的一个趋势
rem适配
原理
rem适配原理：通过媒体查询 检测视口宽度，不同视口宽度设置不同的根标签文字大小
根标签通常设置为当前屏幕的1/10
单位
单位：rem
- rem是相对单位，是相对于HTML标签的字号计算结果
- 1rem = 1HTML字号大小
- 修改html 的文字大小，就可以完成元素大小的等比例缩放
媒体查询
媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式，当某个条件成立, 执行对应的CSS样式
写法：
通过媒体查询，检测不同的视口宽度，设定不同的html文字大小，元素设置rem单位后，可以达到元素适配效果
px转rem
步骤：
-
确定设计稿对应的设备的HTML标签字号
查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
-
计算rem单位的尺寸
rem单位的尺寸 = px单位数值 / 基准根字号
flexible.js
媒体查询写起来超级麻烦，而且检测不够精确，因此我们使用 flexible.js 这个 js文件，通过js 实时检测屏幕窗口的变化实现检测视口宽度。
原理
根据不同的视口宽度给网页中html根节点设置不同的font-size。
将当前根标签大小设置为当前屏幕大小的1/10
使用方法
- 链入js，通常写在前面
- 将测量的px值转为rem
less
Less是一个CSS预处理器(常见的预处理器还有 Sass、Stylus), Less文件后缀是.less
扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
Easy Less
Easy Less ：vscode插件，
作用：less文件保存自动生成css文件
语法
-
单行注释
语法：// 注释内容
快捷键：ctrl + /
-
块注释
语法：/* 注释内容 */
快捷键： shift + alt + A
运算
-
加、减、乘直接书写计算表达式
-
除法需要添加 小括号 或 .
.box { width: 30px + 2; height: 30 + 3px; font-size: 10px*2; background-color: @baseColor; p { color: @baseColor; font-size: (16 / 37.5rem); span { // 表达式存在多个单位以第一个单位为准 width: (20px / 37.5rem); } } }产生的.css
.box { width: 32px; height: 33px; font-size: 20px; background-color: #ff0000; } .box p { color: #ff0000; font-size: 0.42666667rem; } .box p span { width: 0.53333333px; }表达式存在多个单位以第一个单位为准
嵌套
作用：快速生成后代选择器。
语法：
注意：&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用
我们在写伪类和伪元素的时候，经常使用 & 来代替父元素
变量
语法：
-
定义变量：@变量名: 值;
-
使用变量：CSS属性：@变量名;
作用：变量：存储数据，方便使用和修改。
//定义变量 @变量名: 值;
@pinkColor: pink;
// 使用变量：CSS属性：@变量名;
.box {
background-color: @pinkColor;
}
导出的.css
.box {
background-color: pink;
}
less导入
语法：
导入: @import “文件路径”;
以英文分号结尾
// less导入
//导入: @import “文件路径”;
@import './less01.less';
@import './less02';
less导出
-
方法一： 配置EasyLess插件， 实现所有Less有相同的导出路径
配置EasyLess插件： 设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码"out": "../css/"（注意，必须是双引号）
-
方法二：控制当前Less文件导出路径
Less文件第一行添加如下代码, 注意文件夹名称后面添加 /
下面的只写一个就可以，且必须写在第一行，注释写在下面
同一文件夹下，创建一个css文件夹（有css文件夹时直接导出），导出与less同名的.css
// out: ./css/
同一文件夹下，创建一个css文件夹（有css文件夹时直接导出），导出less05.css
// out: ./css/less05.css
// out: ./css/// out: ./css/less05.cssless禁止导出
在less文件第一行添加: // out: false
// out: false
vw/vh适配
单位
单位：vw/vh
- vw /vh是个相对单位。
- 1vw =1/100屏幕宽度 1vh = 1/100屏幕高度
不管在什么屏幕下， 我们把屏幕分为平均的 100等份。
1vw 和 1% 区别：
- vw 永远是以视口的宽度为准。· 在 375设计稿下， 1vw 永远是 3.75px
- 百分比以父盒子为准。 假如父盒子是 200px，则 1% 是 2px
px 如何转为vw
我们设计稿是 iphone 678 是 375px， vw 把屏幕划分了100等份， 则 1vw = 3.75 px
有个盒子啊，我测量了下，他的宽度是 3.75px * 3.75px ，则 写成 vw 是多少？ 1vw * 1vw
又一个盒子，宽度和高度分别是 37.5px 和 37.5px ，则 转换为vw 是多少？ 10vw * 10vw
有一个盒子 68px * 29px ，则我们写代码 less vw ？
width: (68 / 3.75vw);
height: (29 / 3.75vw);
布局流程
- 根据设计稿确定1vw尺寸
- px单位转换成vw单位尺寸: px值 / (1/100视口宽度) vw
标签：适配,px,rem,宽度,vw,移动,css 来源： https://www.cnblogs.com/yyshow/p/16196626.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。