当前位置： 首页 > article >正文

22.[前端开发]Day22-CSS单位-CSS预处理器-移动端视口

article 2026/4/29 8:26:50

1 CSS常见单位详解

CSS中的单位

CSS中的绝对单位（ Absolute length units ）

CSS中的相对单位（ Relative length units ）

1.em: 相对自己的font-size；如果自己没有设置, 那么会继承父元素的font-size

2.如果font-size中有写em单位, 可以理解成相对于父元素，但是更准确的理解依然是相对于自己的。

3.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html {font-size: 1.5px;}.box {width: 100rem;height: 100rem;font-size: 20rem;background-color: orange;}</style>
</head>
<body><div class="box">我是box</div></body>
</html>

2 深入理解pixel、DPR、PPI

当我们聊pixel时，到底在聊些什么？

像素的不同分类（一）

物理像素和逻辑像素

DPR、PPI、DPI

3 CSS预处理器Less、Scss

CSS编写的痛点

常见的CSS预处理器

认识Less

编写Less代码

less代码的编译

方式二（不推荐）：插件里找easy less安装后

当写完less代码，保存后会自动生成css文件，然后用link引用即可

推荐方式一

Less语法一：Less兼容CSS

Less语法二 – 变量（Variables）

Less语法三 – 嵌套（Nesting）

Less语法四 – 运算（Operations）

Less语法五 – 混合（Mixins）

less其他语法补充

认识Sass和Scss

4 浏览器视口Viewport

什么是移动端适配？

认识视口viewport

布局视口和视觉视口

理想视口（ideal viewport）

理想视口是布局视口=可视视口

移动端适配方案

练习

一. 完成所有的代码练习

二. 说出不同像素之间的差异

分为三种像素:设备像素(物理像素),设备独立像素(逻辑像素),css像素

  • 设备像素(物理像素)

    • 是指显示器上真实的像素,在购买显示器或者手机的时候，提到的设备分辨率就是设备像素的大小

    • iPhone X的分辨率 1125 x 2436，指的就是设备像素

  • 设备独立像素(逻辑像素)

    • 如果面向开发者我们使用设备像素显示一个100px的宽度，那么在不同屏幕上显示效果会是不同的

    • 开发者针对不同的屏幕很难进行较好的适配，编写程序必须了解用户的分辨率来进行开发

    • 所以在设备像素之上，操作系统为开发者进行抽象，提供了逻辑像素的概念

    • 比如你购买了一台显示器，在操作系统上是以1920x1080设置的显示分辨率，那么无论你购买的是2k、4k的显示器，对于开发者来说，都是1920x1080的大小

    • 如果物理像素很大的时候,比如2k,4k等,可以理解为一个逻辑像素里面由多个物理像素来渲染的

  • css像素

    • 默认情况下就是设备独立像素(也就是逻辑像素)

三. 说出你对视口的理解(面试题)

总结：内容回顾

一. 单位相关

1.1. CSS其他单位

绝对单位

  • cm/mm/in

  • px

相对单位

  • em/rem/vw/vh

1.2. pixel的深入理解

  • pixel代表的含义

  • 当前像素的分类:

    • 设备像素（物理像素）

    • 设备独立像素（逻辑像素）

    • CSS像素 -》 逻辑像素

1.3. DPR、PPI

DPR：device pixel ratio

  • 设备像素比

PPI：pixel per in

二. CSS预处理器

2.1. CSS弊端以及常见的预处理器介绍

2.2. Less的介绍

  • 介绍

  • 编写less

  • 问题:less如何转成CSS

    • node -> npm -> lessc -> webpack

    • vscode插件和在线查看

    • js文件

      • cdn

      • 下载本地

2.3. less语法

  • 兼容CSS

  • 定义变量

  • 嵌套

    • &掌握

  • 计算

  • 混入mixins

    • 基本使用

    • 传递参数

    • 结合Maps

  • 额外补充

    • 继承

    • 内置函数

    • 作用域

    • 注释

    • 导入

2.4. 介绍Scss

三. 移动端适配

3.1. 移动端开发相关的概念理解

3.2. viewport

  • 布局视口(980px)

  • 视觉视口

  • 理想视口

  • 设置视口

    • width

    • initial-scale

    • user-scalable

    • minimum-scale

    • maximum-scale

相关文章：

22.[前端开发]Day22-CSS单位-CSS预处理器-移动端视口

1 CSS常见单位详解 CSS中的单位 CSS中的绝对单位&#xff08; Absolute length units &#xff09; CSS中的相对单位&#xff08; Relative length units &#xff09; 1.em: 相对自己的font-size&#xff1b;如果自己没有设置, 那么会继承父元素的font-size 2.如果font-size中…...

编程日记 2026/3/31 3:30:15

深入讲解MyBatis

1. MyBatis 的背景和优势 背景&#xff1a;在 Java 开发中&#xff0c;传统的 JDBC 操作数据库代码繁琐&#xff0c;需要手动管理数据库连接、编写 SQL 语句、处理结果集等&#xff0c;开发效率低且容易出错。MyBatis 应运而生&#xff0c;它通过将 SQL 语句与 Java 代码分离&a…...

编程日记 2025/11/10 8:29:00

URL调用本地Ollama模型

curl http://192.168.2.247:11434/api/generate -d "{ \"model\": \"deepseek-r1:8b\", \"prompt\": \"Who r u?\" ,\"stream\":false}" 连续对话...

编程日记 2026/4/9 7:40:17

DeepSeek和ChatGPT的优劣或者区别（答案来DeepSeek和ChatGPT）

DeepSeek的答案 DeepSeek与ChatGPT作为当前两大主流AI模型&#xff0c;在架构设计、性能表现、应用场景等方面存在显著差异&#xff0c;以下从多个维度进行对比分析&#xff1a; 一、架构与训练效率 架构设计 DeepSeek&#xff1a;采用混合专家&#xff08;MoE&#xff09;框架…...

编程日记 2025/7/23 1:42:37

【python】matplotlib（animation）

文章目录 1、matplotlib.animation1.1、FuncAnimation1.2、修改 matplotlib 背景 2、matplotlib imageio2.1、折线图2.2、条形图2.3、散点图 3、参考 1、matplotlib.animation 1.1、FuncAnimation matplotlib.animation.FuncAnimation 是 Matplotlib 库中用于创建动画的一个…...

编程日记 2026/3/30 21:26:11

ubuntu24.04安装布置ros

最近换电脑布置机器人环境&#xff0c;下了24.04&#xff0c;但是网上的都不太合适&#xff0c;于是自己试着布置好了&#xff0c;留作有需要的人一起看看。 文章目录 目录 前言 一、确认 ROS 发行版名称 二、检查你的 Ubuntu 版本 三、安装正确的 ROS 发行版 四、对于Ubuntu24…...

编程日记 2026/4/22 13:35:47

Vue Router 导航方式详解：声明式导航与编程式导航

Vue Router 是 Vue.js 官方推荐的路由管理器&#xff0c;提供了两种主要的导航方式&#xff1a;声明式导航和编程式导航。这两种方式各有特点&#xff0c;适用于不同的场景。本文将详细介绍它们的用法、区别以及底层实现原理。 1. 声明式导航 1.1 什么是声明式导航&#xff1f…...

编程日记 2025/12/17 20:14:35

【RabbitMQ重试】重试三次转入死信队列

以下是基于RabbitMQ死信队列实现消息重试三次后转存的技术方案&#xff1a; 方案设计要点 队列定义改造&#xff08;核心参数配置&#xff09; Bean public Queue auditQueue() {Map<String, Object> args new HashMap<>();args.put("x-dead-letter-exchan…...

编程日记 2026/4/20 4:00:19

接入 deepseek 实现AI智能问诊

1. 准备工作 注册 DeepSeek 账号 前往 DeepSeek 官网 注册账号并获取 API Key。 创建 UniApp 项目 使用 HBuilderX 创建一个新的 UniApp 项目&#xff08;选择 Vue3 或 Vue2 模板&#xff09;。 安装依赖 如果需要在 UniApp 中使用 HTTP 请求&#xff0c;推荐使用 uni.requ…...

编程日记 2026/4/11 5:28:51

网络爬虫js逆向之异步栈跟栈案例

【注意&#xff01;&#xff01;&#xff01;】 前言&#xff1a; 1. 本章主要讲解js逆向之异步栈跟栈的知识&#xff08;通过单步执行调试&#xff09; 2. 使用关键字搜定位加密入口 3. 本专栏通过多篇文章【文字案例】的形式系统化进行描述 4. 本文章全文进行了脱敏处理 5. 详…...

编程日记 2026/4/29 4:13:57

机器学习 - 需要了解的条件概率、高斯分布、似然函数

似然函数是连接数据与参数的桥梁&#xff0c;通过“数据反推参数”的逆向思维&#xff0c;成为统计推断的核心工具。理解它的关键在于区分“参数固定时数据的概率”与“数据固定时参数的合理性”&#xff0c;这种视角转换是掌握现代统计学和机器学习的基础。 一、在学习似然函…...

编程日记 2026/4/24 6:26:29

string 与 wstring 的字符编码

测试代码： #include<stdio.h> #include<stdlib.h> #include<windows.h> #include <locale.h> #include <string> #include <iostream>// 函数用于计算UTF-8字符串中的字符数 int utf8_strlen(const char* str) {int len = 0;for (; *s…...

编程日记 2026/4/13 10:56:00

【Spring】什么是Spring？

什么是Spring&#xff1f; Spring是一个开源的轻量级框架&#xff0c;是为了简化企业级开发而设计的。我们通常讲的Spring一般指的是Spring Framework。Spring的核心是控制反转(IoC-Inversion of Control)和面向切面编程(AOP-Aspect-Oriented Programming)。这些功能使得开发者…...

编程日记 2026/3/30 12:45:32

[笔记] 汇编杂记（持续更新）

文章目录 前言举例解释函数的序言函数的调用栈数据的传递 总结 前言 举例解释 // Type your code here, or load an example. int square(int num) {return num * num; }int sub(int num1, int num2) {return num1 - num2; }int add(int num1, int num2) {return num1 num2;…...

编程日记 2026/4/9 10:13:01

开放式TCP/IP通信

一、1200和1200之间的开放式TCP/IP通讯 第一步&#xff1a;组态1214CPU&#xff0c;勾选时钟存储器 第二步&#xff1a;防护与安全里面连接机制勾选允许PUT/GET访问 第三步&#xff1a;添加PLC 第四步&#xff1a;点击网络试图&#xff0c;选中网口&#xff0c;把两个PLC连接起…...

编程日记 2026/4/11 17:39:05

（原创，可用）SSH实现内外网安全穿透（安全不怕防火墙）

目前有A、B终端和一台服务器&#xff0c;A、B机器不能直接访问&#xff0c;服务器不能直接访问A、B终端但是A、B终端可以访问服务器&#xff0c;这个场景很像我们有一台电脑在单位内网&#xff0c;外机器想访问内网系统&#xff0c;可能大家目前想到的就是frp之类穿透工具&…...

编程日记 2026/4/27 23:50:55

第二节 docker基础之---镜像构建及挂载

查看当前镜像&#xff1a; [rootdocker ~]# docker images REPOSITORY TAG IMAGE ID CREATED SIZE [rootdocker ~]#很明显docker是咱们新搭建的所以目前还没有镜像 1&#xff0c;搜索镜像&#xff1a; [rootdocker ~]# docker search centos 搜索镜像并过滤是官…...

编程日记 2026/4/8 22:10:11

LLM学习笔记1——本地部署Meta-Llama-3.2-1B大模型

系列文章目录 参考博客 参考博客 文章目录 系列文章目录前言与调用一、部署要求二、实现步骤0.深度学习环境错误1&#xff0c;验证pytorch版本时提示以下问题&#xff1a;错误2&#xff0c;验证pytorch版本时提示以下问题&#xff1a;错误3&#xff0c;有时候还会提示你有一些…...

编程日记 2026/4/20 12:34:37

RNN-day1-NLP基础

NLP基础 一、基本概念 自然语言处理&#xff1a;Natural Language Processing,主要目标是让计算机能够理解、解释和生成人类语言的数据。 1 基本概念 1.1NLP概念 语言&#xff1a;人类沟通的机构化系统&#xff0c;包括声音、书写符号、手势 自然语言&#xff1a;自然进化…...

编程日记 2026/4/27 17:59:26

常见string库中的函数(C语言超详细)

文章目录 strcspnstrcpystrncpystrcatstrncatstrcmpstrncmpstrchrstrrchrstrstrstrtokstrlenstrnlen strcspn 原型: size_t strcspn(const char *str1, const char *str2);功能&#xff1a; strcspn 会扫描 str1&#xff0c;并返回一个整数&#xff0c;表示 str1 中第一个匹配…...

编程日记 2026/2/22 3:01:23

AI安全最佳实践：AI应用开发安全评估矩阵（上）

生成式AI开发安全范围矩阵简介 生成式AI目前可以说是当下最热门的技术&#xff0c;吸引各大全球企业的关注&#xff0c;并在全球各行各业中带来浪潮般的编个。随时AI能力的飞跃&#xff0c;大语言模型LLM参数达到千亿级别&#xff0c;它和Transformer神经网络共同驱动了我们工…...

编程日记 2026/4/21 3:56:57

deepseek+kimi自动生成ppt

打开deepseek官网&#xff0c;输入详细的需求&#xff0c;让他生成个ppt 接着deepseek开始思考生成了 接着复制生成了的内容 打开kimi粘贴刚才deepseek生成的内容 可以一键生成啦&#xff0c;下载编辑使用吧...

编程日记 2026/4/1 7:28:41

# C指针地址CUP寄存器访问IO内存映射

C指针地址&CUP寄存器访问&IO内存映射 在裸机编程中&#xff0c;C语言可以像汇编语言一样直接操作芯片寄存器地址进行读取和写入&#xff0c;主要是由于以下几个原因&#xff1a; 1. 裸机环境下没有操作系统的干预 裸机编程是指直接在硬件上运行程序&#xff0c;没有…...

编程日记 2026/4/28 1:20:06

《薄世宁医学通识50讲》以医学通识为主题，涵盖了医学的多个方面，包括医学哲学、疾病认知、治疗过程、医患关系、公共卫生等

《薄世宁医学通识50讲》是一门由薄世宁医生主讲的医学通识课程&#xff0c;该课程旨在通过深入浅出的方式&#xff0c;向广大听众普及医学知识&#xff0c;提升公众对医学的认知和理解。 晓北斗推荐-薄世宁医学通识 以下是对该课程的详细介绍&#xff1a; 一、课程概述 《薄世…...

编程日记 2026/4/9 11:44:15

突破与重塑：逃离Java舒适区，借Go语言复刻Redis的自我突破和成长

文章目录 写在文章开头为什么想尝试用go复刻redis复刻redis的心路历程程序员对于舒适区的一点看法关于mini-redis的一些展望结语 写在文章开头 在程序员的技术生涯长河中&#xff0c;我们常常会在熟悉的领域中建立起自己的“舒适区”。于我而言&#xff0c;Java 就是这片承载…...

编程日记 2026/4/9 13:31:55

解决_ssl.so: cannot open shared object file: No such file or directory

背景&#xff1a; 我在CentOS8.2的操作系统里安装完python2.7后&#xff0c;源码安装了OpenSSL_1_1_1-stable 下载地址&#xff1a; https://github.com/openssl/openssl/tree/OpenSSL_1_1_1-stable 现象&#xff1a; 结果python导入ssl的时候报错了&#xff0c;报找不到_ssl.…...

编程日记 2025/12/3 0:57:39

优惠券平台（一）：基于责任链模式创建优惠券模板

前景概要 系统的主要实现是优惠券的相关业务&#xff0c;所以对于用户管理的实现我们简单用拦截器在触发接口前创建一个单一用户。 // 用户属于非核心功能&#xff0c;这里先通过模拟的形式代替。后续如果需要后管展示&#xff0c;会重构该代码 UserInfoDTO userInfoDTO new…...

编程日记 2026/4/15 13:02:18

【Pytorch实战教程】PyTorch中的Dataset用法详解

PyTorch中的Dataset用法详解 在深度学习中，数据是模型训练的基石。PyTorch作为一个强大的深度学习框架，提供了丰富的工具来处理和加载数据。其中，Dataset类是PyTorch中用于处理数据的重要工具之一。本文将详细介绍Dataset的用法，帮助你更好地理解和使用它。 1. 什么是Dat…...

编程日记 2026/1/23 3:36:28

单例设计模式（Java）

&#xff08;部分内容参考于菜鸟教程当中关于单例模式的说明&#xff09; 什么是单例设计模式&#xff1f; 单例模式&#xff08;Singleton Pattern&#xff09;是一种常见的设计模式&#xff0c;其主要目的是确保一个类在系统中只有一个实例&#xff0c;并提供全局访问点。使…...

编程日记 2026/2/5 13:20:33

TensorFlow域对抗训练DANN神经网络分析MNIST与Blobs数据集梯度反转层提升目标域适应能力可视化...

全文链接&#xff1a;https://tecdat.cn/?p39656 本文围绕基于TensorFlow实现的神经网络对抗训练域适应方法展开研究。详细介绍了梯度反转层的原理与实现&#xff0c;通过MNIST和Blobs等数据集进行实验&#xff0c;对比了不同训练方式&#xff08;仅源域训练、域对抗训练等&am…...

编程日记 2026/4/20 13:23:18