移动Web-移动适配

移动适配

l rem : 目前多数企业在用的解决方案
l vw / vh:未来的解决方案

长度单位

rem

目标:能够使用rem单位设置网页元素的尺寸

l 网页效果
Ø 屏幕宽度不同,网页元素尺寸不同(等比缩放)
l px单位或百分比布局可以实现吗?
Ø px单位是绝对单位
Ø 百分比布局特点宽度自适应,高度固定
l 适配方案
Ø rem
Ø vw / vh

l rem单位
Ø 相对单位
Ø rem单位是相对于HTML标签的字号计算结果
Ø 1rem = 1HTML字号大小

代码:

css中先写:
//1rem=1html字号的大小
html{
font-size:20px;
  }
.标签{
width:2rem;
hight:3rem;
其含义为标签的宽为2rem*20px,高为3rem*20px
}

 

媒体查询

目标:能够使用媒体查询设置差异化CSS样式

l 思考
Ø 手机屏幕大小不同,分辨率不同, 如何设置不同的HTML标签字号?
Ø 媒体查询
l 媒体查询能够检测视口的宽度,然后编写差异化的 CSS 样式
l 当某个条件成立, 执行对应的CSS样式

l 思考
Ø 手机屏幕大小不同,分辨率不同, 如何设置不同的HTML标签字号?
Ø 设备宽度不同,HTML标签字号设置多少合适?
Ø 设备宽度大, 元素尺寸大
Ø 设备宽度小,元素尺寸小

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

l 思考:
l 工作中,书写代码的尺寸要参照设计稿尺寸,设计稿中是px还是rem?
l 如何确定rem的数值?

l 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配合rem实现在不同宽度的设备中,网页元素尺寸等比缩放效果

l 思考:咱们检测了3个视口,分别设置了根字号,有什么弊端吗?
l 答:手机设备多,屏幕尺寸不一,视口不仅仅有这3个

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

Less

目标:使用Less运算写法完成px单位到rem单位的转换

l 思考:在px单位转换到rem单位过程中,哪项工作是最麻烦的?
l 答:除法运算。CSS不支持计算写法。
l 解决方案:可以通过Less实现。

目标:使用Less语法快速编译生成CSS代码

l Less是一个CSS预处理器, Less文件后缀是.less
l 扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
l 注意:浏览器不识别Less代码,目前阶段,网页要引入对应的CSS文件。

Easy Less :
l vscode插件
l 作用:less文件保存自动生成css文件

注释:
l 单行注释
Ø 语法:// 注释内容
Ø 快捷键:ctrl + /
l 块注释
Ø 语法:/* 注释内容 */
Ø 快捷键: shift + alt + A

目标:使用Less运算写法完成px单位到rem单位的转换

运算:
l 加、减、乘直接书写计算表达式
l 除法需要添加 小括号 或 .
l 注意:
Ø 表达式存在多个单位以第一个单位为准

目标:能够使用Less嵌套写法生成后代选择器

嵌套:
l 思考:书写CSS选择器时, 如何避免样式冲突?

嵌套:
l 作用:快速生成后代选择器。
l 语法:

l 注意:&不生成后代选择器,表示当前选择器,通常配合伪类或伪元素使用

目标:能够使用Less变量设置属性值

变量
l 思考:
Ø 网页中, 文字文字颜色基本都是统一的, 如果网站改版,变换文字颜色, 如何修改代码?
Ø 方法一:逐一修改属性值(太繁琐)
Ø 方法二: 把颜色提前存储到一个容器,设置属性值为这个容器名

l 变量:存储数据,方便使用和修改。
l 语法:
Ø 定义变量:@变量名: 值;
Ø 使用变量:CSS属性:@变量名;

目标:能够使用Less导入写法引用其他Less文件

l 思考:
Ø 开发网站时,网页如何引入公共样式?
Ø CSS:书写link标签
Ø Less:导入
l 导入: @import “文件路径”;

目标:使用Less语法导出CSS文件

l 思考:
Ø 目前,Less文件导出的CSS文件位置是哪里?

l 方法一:
Ø 配置EasyLess插件, 实现所有Less有相同的导出路径
l 配置插件: 设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码(注意,必须是双引号)

目标:使用Less语法导出CSS文件
l 方法二:控制当前Less文件导出路径
Ø Less文件第一行添加如下代码, 注意文件夹名称后面添加 /

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

长度单位

• vw / vh

目标:能够使用vw单位设置网页元素的尺寸

l 相对单位
l 相对视口的尺寸计算结果
l vw:viewport width
Ø 1vw = 1/100视口宽度
l vh:viewport height
Ø 1vh = 1/100视口高度

l vw单位尺寸
1. 确定设计稿对应的vw尺寸 (1/100视口宽度)
Ø 查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 (1/100 视口宽度)
2. vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )

l vh单位尺寸
1. 确定设计稿对应的vh尺寸 (1/100视口高度)
Ø 查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定vh尺寸 (1/100 视口高度)
2. vh单位的尺寸 = px单位数值 / ( 1/100 视口高度 )

l 思考:开发中,会不会vw和vh混用呢?
Ø 不会。
Ø vh是1/100视口高度,全面屏视口高度尺寸大,如果混用可能会导致盒子变形。

版权声明:
作者:zhuim521
链接:https://zhuimwl.com/68.html
来源:追梦网络
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
海报
移动Web-移动适配
移动适配 l rem : 目前多数企业在用的解决方案 l vw / vh:未来的解决方案 长度单位 rem 目标:能够使用rem单位设置网页元素的尺寸 l 网页效果 Ø 屏幕宽度不……
<<上一篇
下一篇>>