WEBSTORM前端 —— 第3章:移动 Web —— 第3节:移动适配

目录

一、移动Web基础

1.谷歌模拟器

2.屏幕分辨率

3.视口

4.二倍图

二、适配方案

[三、rem 适配方案](#三、rem 适配方案)

四、less

[1.less -- 简介](#1.less – 简介)

[2.less -- 注释](#2.less – 注释)

[3.less -- 运算](#3.less – 运算)

[4.less -- 嵌套](#4.less – 嵌套)

[5.less -- 变量](#5.less – 变量)

[6.less -- 导入](#6.less – 导入)

[7.less -- 导出](#7.less – 导出)

[8.less -- 禁止导出](#8.less – 禁止导出)

五、案例---极速问诊


移动适配


一、移动Web基础

1.谷歌模拟器


2.屏幕分辨率


3.视口


4.二倍图

①概念:设计稿里面每个元素的尺寸的倍数

②作用:防止图片在高分辨率屏幕下模糊失真


二、适配方案


三、rem 适配方案

  1. rem单位,是相对单位
  2. rem单位是相对于HTML标签的字号计算结果
  3. 1rem = 1HTML字号大小

四、less

①思考:在px单位转换到rem单位过程中,哪项工作是最麻烦的? 答:除法运算。CSS不支持计算写法。

②解决方案:可以通过Less实现。


1.less -- 简介

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

2.less -- 注释


3.less -- 运算


4.less -- 嵌套


5.less -- 变量

①概念:容器,存储数据

②作用:存储数据,方便使用和修改

③语法:

  • 定义变量:@变量名: 数据;
  • 使用变量:CSS属性:@变量名;

6.less -- 导入


7.less -- 导出


8.less -- 禁止导出


五、案例---极速问诊

相关推荐
失落的多巴胺3 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
哎呦你好7 小时前
【CSS】Grid 布局基础知识及实例展示
开发语言·前端·css·css3
veminhe10 天前
HTML5 浏览器支持
前端·html·html5
伍哥的传说10 天前
react gsap动画库使用详解之text文本动画
前端·vue.js·react.js·前端框架·vue·html5·动画
自由鬼11 天前
企业架构与IT架构关系的探讨
程序人生·安全·架构·安全架构·企业架构·it架构
veminhe11 天前
HTML5简介
前端·html·html5
ProcessOn官方账号12 天前
数据分析对比图表-雷达图全面指南
大数据·人工智能·程序人生·职场和发展·数据分析·学习方法·processon
南国_之恋13 天前
程序人生,人生如戏
程序人生·职场和发展
Jeaten14 天前
Cross-Edge Orchestration of Serverless Functions With Probabilistic Caching
edge·serverless·cache
feiepuhuo00114 天前
edge打开高德开放平台卡顿的问题
前端·edge·卡顿·高德开放平台