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

news2025/3/16 18:47:15

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2295631.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

URL调用本地Ollama模型

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

【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 库中用于创建动画的一个…

ubuntu24.04安装布置ros

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

接入 deepseek 实现AI智能问诊

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

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

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

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

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

【Spring】什么是Spring?

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

[笔记] 汇编杂记(持续更新)

文章目录 前言举例解释函数的序言函数的调用栈数据的传递 总结 前言 举例解释 // 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;…

开放式TCP/IP通信

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

(原创,可用)SSH实现内外网安全穿透(安全不怕防火墙)

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

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

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

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

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

AI安全最佳实践:AI应用开发安全评估矩阵(上)

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

deepseek+kimi自动生成ppt

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

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

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

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

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

优惠券平台(一):基于责任链模式创建优惠券模板

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

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

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

09vue3实战-----引入element-plus组件库中的图标

09vue3实战-----引入element-plus组件库中的图标 1.安装2.引入3.优化 element-plus中的icon图标组件的使用和其他平台组件(如el-button按钮)是不一样的。 1.安装 npm install element-plus/icons-vue2.引入 在这我们只讲述最方便的一种引入方法------完整引入。这需要从elem…

消费电子产品中的噪声对TPS54202的影响

本文章是笔者整理的备忘笔记。希望在帮助自己温习避免遗忘的同时&#xff0c;也能帮助其他需要参考的朋友。如有谬误&#xff0c;欢迎大家进行指正。 一、概述 在白色家电领域&#xff0c;降压转换器的应用非常广泛&#xff0c;为了实现不同的功能就需要不同的电源轨。TPS542…