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

CSS--移动web基础

news 2026/1/1 10:30:47

01-移动 Web 基础

谷歌模拟器

模拟移动设备，方便查看页面效果

在这里插入图片描述

屏幕分辨率

分类：

  • 物理分辨率：硬件分辨率（出厂设置）
  • 逻辑分辨率：软件 / 驱动设置

结论：制作网页参考 逻辑分辨率

在这里插入图片描述

视口

作用：显示 HTML 网页的区域，用来约束 HTML 的尺寸

<!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>
</head>
<body></body>
</html>
  • width=device-width：视口宽度 = 设备宽度
  • initial-scale=1.0：缩放1倍（不缩放）

二倍图

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

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

使用方法：

在这里插入图片描述

适配方案

  • 宽度适配：宽度自适应

    • 百分比布局
    • Flex 布局

  • 等比适配：宽高等比缩放

    • rem
    • vw

02-rem

简介

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

媒体查询

媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式

当某个条件成立, 执行对应的CSS样式

在这里插入图片描述

@media (width:320px) {html {background-color: green;}
}

rem 布局

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

在这里插入图片描述

flexible.js

flexible.js 是手淘开发出的一个用来适配移动端的 js 库。

核心原理就是根据不同的视口宽度给网页中 html 根节点设置不同的 font-size。

(function flexible (window, document) {var docEl = document.documentElementvar dpr = window.devicePixelRatio || 1// adjust body font sizefunction setBodyFontSize () {if (document.body) {document.body.style.fontSize = (12 * dpr) + 'px'}else {document.addEventListener('DOMContentLoaded', setBodyFontSize)}}setBodyFontSize();// set 1rem = viewWidth / 10function setRemUnit () {var rem = docEl.clientWidth / 10docEl.style.fontSize = rem + 'px'}setRemUnit()// reset rem unit on page resizewindow.addEventListener('resize', setRemUnit)window.addEventListener('pageshow', function (e) {if (e.persisted) {setRemUnit()}})// detect 0.5px supportsif (dpr >= 2) {var fakeBody = document.createElement('body')var testElement = document.createElement('div')testElement.style.border = '.5px solid transparent'fakeBody.appendChild(testElement)docEl.appendChild(fakeBody)if (testElement.offsetHeight === 1) {docEl.classList.add('hairlines')}docEl.removeChild(fakeBody)}
}(window, document))

<body>......<script src="./js/flexible.js"></script>
</body>

rem 移动适配

rem单位尺寸

  1. 确定基准根字号
  • 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
  1. rem单位的尺寸
  • rem单位的尺寸 = px单位数值 / 基准根字号

03-vw适配方案

vw和vh基本使用

vw和vh是相对单位，相对视口尺寸计算结果

  • vw：viewport width（1vw = 1/100视口宽度 ）
  • vh：lviewport height ( 1vh = 1/100视口高度 )

vw布局

vw单位的尺寸 = px 单位数值 / ( 1/100 视口宽度 )

vh问题

vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形

04-less

Less是一个CSS预处理器, Less文件后缀是.less。扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力

注意：浏览器不识别 Less 代码，目前阶段，网页要引入对应的 CSS 文件

VS Code 插件：Easy LESS，保存 less文件后自动生成对应的 CSS 文件

在这里插入图片描述

注释

  • 单行注释
    • 语法：// 注释内容
    • 快捷键：ctrl + /
  • 块注释
    • 语法：/* 注释内容 */
    • 快捷键： Shift + Alt + A

运算

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

在这里插入图片描述

嵌套

作用：快速生成后代选择器

在这里插入图片描述

提示：用 & 表示当前选择器，不会生成后代选择器，通常配合伪类或伪元素使用

在这里插入图片描述

变量

概念：容器，存储数据

作用：存储数据，方便使用和修改

语法：

  • 定义变量：@变量名: 数据;
  • 使用变量：CSS属性：@变量名;
// 定义变量
@myColor: pink;
// 使用变量
.box {color: @myColor;
}
a {color: @myColor;
}

导入

作用：导入 less 公共样式文件

语法：导入: @import “文件路径”;

提示：如果是 less 文件可以省略后缀

@import './base.less';
@import './common';

导出

写法：在 less 文件的第一行添加 // out: 存储URL

提示：文件夹名称后面添加 /

// out: ./index.css
// out: ./css/

禁止导出

写法：在 less 文件第一行添加: // out: false

在这里插入图片描述

相关文章：

CSS--移动web基础

01-移动 Web 基础 谷歌模拟器 模拟移动设备&#xff0c;方便查看页面效果 屏幕分辨率 分类&#xff1a; 物理分辨率&#xff1a;硬件分辨率&#xff08;出厂设置&#xff09;逻辑分辨率&#xff1a;软件 / 驱动设置 结论&#xff1a;制作网页参考 逻辑分辨率 视口 作用&a…...

编程日记 2023/5/20 0:02:30

Appuploader 常见错误及解决方法

转载&#xff1a;Appuploader 常见错误及解决方法 问题解决秘籍 遇到问题&#xff0c;第一个请登录苹果开发者官网 检查一遍账号是否有权限&#xff0c;是否被停用&#xff0c;是否过期&#xff0c;是否有协议需要同意&#xff0c;并且在右上角切换账号后检查所有关联的账号是否…...

编程日记 2023/5/19 23:57:29

消息通知之系统层事件发布相关流程

前言 Openharmony 3.1Release中存在消息通知的处理&#xff0c;消息通知包括系统层事件发布、消息订阅、消息投递与处理&#xff0c;为了开发者能够熟悉消息的处理流程&#xff0c;本篇文章主要介绍系统层事件发布的相关流程。 整体流程 代码流程 发布消息 { eventAction)w…...

编程日记 2023/5/19 23:52:28

Elsevier Ocean Engineering Guide for Authors 解读

文章目录 ★Types of contributions★Submission checklistEthics in publishing★Declaration of competing interestDeclaration of generative AI in scientific writingSubmission declaration and verificationPreprint posting on SSRNUse of inclusive languageReportin…...

编程日记 2023/5/19 23:47:27

基于Fragstats的土地利用景观格局分析

土地利用以及景观格局是当前全球环境变化研究的重要组成部分及核心内容&#xff0c;其对区域的可持续发展以及区域土地管理有非常重要的意义。通过对土地利用时空变化规律进行分析可以更好的了解土地利用变化的过程和机制&#xff0c;并且通过调整人类社会经济活动&#xff0c;…...

编程日记 2023/5/19 23:42:26

ffmpeg-转码脚本02

ffmpeg-转码脚本详解 高级脚本 以下为主要部分 更高级优化要见git上 mkv转码电影脚本 ECHO OFF REM 以下参数不可乱填 SET FFMPEG%~DP0\ffmpeg.exe ::------------------------------------------------------------------------------ CALL:PRO_LOOPDIR ::CALL:PRO_LOOPDIR_SU…...

编程日记 2023/5/19 23:37:25

SharedPreferences

Android轻量级数据存储 import android.content.Context; import android.content.SharedPreferences;public class SharedPreferencesUtil {private SharedPreferences sharedPreferences;private SharedPreferences.Editor editor;public SharedPreferencesUtil(Context con…...

编程日记 2023/5/30 8:38:28

服务（第二十五篇）redis的优化和持久化

持久化的功能&#xff1a;Redis是内存数据库&#xff0c;数据都是存储在内存中&#xff0c;为了避免服务器断电等原因导致Redis进程异常退出后数据的永久丢失&#xff0c;需要定期将Redis中的数据以某种形式&#xff08;数据或命令&#xff09;从内存保存到硬盘&#xff1b;当下…...

编程日记 2023/5/19 23:27:23

David Silver Lecture 7: Policy Gradient

1 Introduction 1.1 Policy-Based Reinforcement Learning 1.2 Value-based and policy based RL 基于值的强化学习 在基于值的 RL 中&#xff0c;目标是找到一个最优的值函数&#xff0c;通常是 Q 函数或 V 函数。这些函数为给定的状态或状态-动作对分配一个值&#xff0c;表…...

编程日记 2023/5/19 23:22:22

知识图谱学习笔记——（五）知识图谱推理

一、知识学习 声明&#xff1a;知识学习中本文主体按照浙江大学陈华钧教授的《知识图谱》公开课讲义进行介绍&#xff0c;并个别地方加入了自己的注释和思考&#xff0c;希望大家尊重陈华钧教授的知识产权&#xff0c;在使用时加上出处。感谢陈华钧教授。 &#xff08;一&…...

编程日记 2023/5/19 23:17:20

用vs2010编译和调试多个arx版本的arx项目

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言一、一级标题二级标题三级标题四级标题五级标题六级标题升级原先vs2008版本的项目文件到2010，或直接用vs2010新建一个arx项目； vs中查看项目属性：Project menu -> Properties，项目名上右…...

编程日记 2023/5/19 23:12:19

安全相关词汇

• DEW: Data Encryption Workshop • HSM: Hardware Security Module • KMS: Key Management System • KAM: Key Account Management • DHSM: Dedicated Hardware Security Module • KPS: Key Pair Service • CSMS: Cloud Secret Management Service • PCI-DSS: …...

编程日记 2023/5/30 20:43:58

最新入河排污口设置论证、水质影响预测与模拟、污水处理工艺分析及典型建设项目入河排污口方案报告书

随着水资源开发利用量不断增大&#xff0c;全国废污水排放量与日俱增&#xff0c;部分河段已远远超出水域纳污能力。近年来,部分沿岸入河排污口设置不合理&#xff0c;超标排污、未经同意私设排污口等问题逐步显现&#xff0c;已威胁到供水安全、水环境安全和水生态安全&#x…...

编程日记 2023/5/19 23:02:16

2023年认证杯二阶段C题数据合并python以及matlab多途径实现代码

对于每种心率下给出的数据&#xff0c;我们需要进行合并才能方便后续处理&#xff0c;这里为大家展示利用python以及matlab分别实现合并的代码 import pandas as pd import os# 创建一个空的DataFrame对象 merged_data pd.DataFrame()# 设置数据文件所在的文件夹路径 folder_…...

编程日记 2023/5/19 22:57:15

Win11校园网不弹出登录页面怎么回事？

Win11校园网不弹出登录页面怎么回事&#xff1f;最近有用户在使用校园网的时候遇到了一些问题&#xff0c;访问登录网站的时候&#xff0c;一直无法显示登录的界面。那么遇到这个情况如何去进行解决呢&#xff1f;一起来看看以下的解决方法分享吧。 解决方法如下&#xff1a; 方…...

编程日记 2023/6/1 7:46:17

S32K144低功耗休眠与唤醒实践总结

在做车载项目时&#xff0c;模块在常供电时需要维系随时可以被唤醒工作的状态&#xff0c;并且静态电流需要在3mA以内&#xff0c;当然在JTT1163标准中要求的是5mA以内。 目标明确了&#xff0c;在模块休眠时需要关闭一切不必要的资源消耗&#xff0c;只保留模块被唤醒的部分功…...

编程日记 2023/5/19 22:47:12

一文吃透 Vue 框架教程（上）

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

编程日记 2023/5/19 22:42:11

堆排序与取topK java实现

1.堆排序思路 最近趁着有点时间&#xff0c;稍微复习了一下数据结构相关内容&#xff0c;温习了一下堆排序&#xff0c;做一下记录。 首先我们复习一下什么是堆&#xff1a; 堆是具有以下性质的完全二叉树&#xff1a;每个结点的值都大于或等于其左右孩子结点的值&#xff0c…...

编程日记 2023/5/19 22:37:10

https通信流程通俗理解

场景&#xff0c;假设A和B进行通信 CA: ( Certificate Authority &#xff09;就是颁发 HTTPS 证书的组织。 通信流程步骤&#xff1a; 1、A告诉B使用 RSA算法进行加密&#xff0c;B说好的。 2、A和B同时用 RSA算法各自生成一对公钥密钥&#xff0c;各自的公钥密钥都不同。 3…...

编程日记 2023/5/19 22:32:08

银行零售业务转型方法论：打造数字化的“有机体”

传统的业务增长进度叫做连续性创新&#xff0c;它是在一条曲线上渐进性的改良和发展&#xff0c;但这种发展终有极限&#xff0c;如果不能及时开辟第二增长曲线&#xff0c;就很容易被时代所抛弃。过去十年&#xff0c;以互联网为代表的数字化转型的先行者&#xff0c;不断冲击…...

编程日记 2023/5/19 22:27:02

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2025/12/31 14:00:10

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

编程新知 2025/12/24 23:13:19

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

编程新知 2025/10/24 12:31:26

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

编程新知 2025/12/31 11:29:23

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

编程新知 2025/12/31 11:47:46

SQL Server 触发器调用存储过程实现发送 HTTP 请求

文章目录 需求分析解决第 1 步：前置条件，启用 OLE 自动化方式 1：使用 SQL 实现启用 OLE 自动化方式 2：Sql Server 2005启动OLE自动化方式 3：Sql Server 2008启动OLE自动化第 2 步：创建存储过程第 3 步：创建触发器扩展 - 如何调试？第 1 步：登录 SQL Server 2008第 2 步…...

编程新知 2025/9/11 6:56:11

js 设置3秒后执行

如何在JavaScript中延迟3秒执行操作 在JavaScript中&#xff0c;要设置一个操作在指定延迟后&#xff08;例如3秒&#xff09;执行&#xff0c;可以使用 setTimeout 函数。setTimeout 是JavaScript的核心计时器方法&#xff0c;它接受两个参数&#xff1a; 要执行的函数&…...

编程新知 2025/11/27 19:05:42

Axure Rp 11 安装、汉化、授权

Axure Rp 11 安装、汉化、授权 1、前言2、汉化2.1、汉化文件下载2.2、windows汉化流程2.3、 macOs汉化流程 3、授权 1、前言 Axure Rp 11官方下载链接&#xff1a;https://www.axure.com/downloadthanks 2、汉化 2.1、汉化文件下载 链接: https://pan.baidu.com/s/18Clf…...

编程新知 2025/12/28 2:26:07

Flask和Django，你怎么选？

Flask 和 Django 是 Python 两大最流行的 Web 框架&#xff0c;但它们的设计哲学、目标和适用场景有显著区别。以下是详细的对比&#xff1a; 核心区别&#xff1a;哲学与定位 Django: 定位: "全栈式" Web 框架。奉行"开箱即用"的理念。 哲学: "包含…...

编程新知 2025/10/24 4:20:52

Digital IC Design Flow

Flow介绍 1.设计规格 架构师根据市场需求制作算法模型（Algorithm emulation）及芯片架构（Chip architecture），确定芯片设计规格书（Chip design specification） 原型验证 原型验证（Prototype Validation）通常位于产品开发流程的前期阶段，主要是在设计和开发的初步阶…...

编程新知 2025/12/28 21:48:08