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 -- 禁止导出


五、案例---极速问诊

相关推荐
Catfood_Eason37 分钟前
初识CSS3
前端·css·css3
互联网杂货铺1 小时前
unittest自动化测试实战
自动化测试·软件测试·python·测试工具·程序人生·职场和发展·测试用例
开开心心就好8 小时前
免费批量文件重命名软件
vue.js·人工智能·深度学习·typescript·pdf·excel·less
站在风口的猪11088 小时前
《前端面试题:BFC(块级格式化上下文)》
前端·css·css3
Wendy_robot14 小时前
池中锦鲤的自我修养,聊聊蓄水池算法
程序人生·算法·面试
xhload3d1 天前
图扑软件 | 带你体验 Low Poly 卡通三维世界
物联网·3d·智慧城市·html5·webgl·数字孪生·可视化·工业互联网·三维建模·工控·轻量化·中国风·卡通动画·写实风格·科技风·low poly
柯北(jvxiao)2 天前
搭建个人博客系列--(2) 动手搭建自己的第一个博客站点
程序人生·搭建个人博客
航Hang*2 天前
WEBSTORM前端 —— 第3章:移动 Web —— 第4节:移动适配-VM
前端·笔记·edge·less·css3·html5·webstorm
航Hang*2 天前
WEBSTORM前端 —— 第3章:移动 Web —— 第2节:空间转换、转化
前端·笔记·程序人生·edge·css3·html5·webstorm
老K(郭云开)2 天前
allWebPlugin中间件VLC专用版之录像功能介绍
前端·javascript·chrome·中间件·edge