移动web第五天--移动端适配、rem、Less

移动适配

1.rem : 目前多数企业在用的解决方案;
2.vw / vh:未来的解决方案。

rem

1.rem单位:相对单位、rem单位是相对于HTML标签的字号计算结果。
2.1rem = 1HTML字号大小。

rem移动适配 - 媒体查询

1.媒体查询能够检测视口的宽度,然后编写差异化的 CSS 样式;
2.当某个条件成立, 执行对应的CSS样式;
语法如下:


媒体查询.png

媒体查询2.png

3.目前rem布局方案中,将网页等分成10份, HTML标签的字号为视口宽度的 1/10;


网页10等份.png

4.rem单位尺寸
1.根据视口宽度,设置不同的HTML标签字号;
2.书写代码,尺寸是rem单位
2.1 确定设计稿对应的设备的HTML标签字号
查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号(1/10视口宽度)
2.2 rem单位的尺寸
N * 37.5 = 68 → N = 68 / 37.5
rem单位的尺寸 = px单位数值 / 基准根字号

flexible js

1.flexible.js是手淘开发出的一个用来适配移动端的js框架。
2.核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。

Less

1.使用Less运算写法完成px单位到rem单位的转换
2.CSS不支持计算写法,可以通过Less实现。
3.Less是一个CSS预处理器, Less文件后缀是.less
4.扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
注意:浏览器不识别Less代码,目前阶段,网页要引入对应的CSS文件。

Easy Less

1.vscode插件
2.作用:less文件保存自动生成css文件
注释:
单行注释
语法:// 注释内容
快捷键:ctrl + /
块注释
语法:/* 注释内容 */
快捷键: shift + alt + A

Less运算

运算:
1.加、减、乘直接书写计算表达式
2.除法需要添加 小括号 或 .


less运算.png
Less语法

1.Less嵌套


嵌套.png

2.Less变量
语法:
定义变量:@变量名: 值;
使用变量:CSS属性:@变量名;


变量.png

3.Less导入
语法:@import “文件路径”;


导入.png

4.Less导出
Less文件第一行添加如下代码, 注意文件夹名称后面添加 /


导出.png

5.禁止导出
在less文件第一行添加: // out: false


禁止导出.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容