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

CSS--移动web基础

news 2026/4/13 6:11:27

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

终极KCC多设备兼容指南：Kindle、Kobo、ReMarkable全支持的漫画转换神器

终极KCC多设备兼容指南&#xff1a;Kindle、Kobo、ReMarkable全支持的漫画转换神器 【免费下载链接】kcc KCC (a.k.a. Kindle Comic Converter) is a comic and manga converter for ebook readers. 项目地址: https://gitcode.com/gh_mirrors/kc/kcc KCC&#xff08;Ki…...

编程新知 2026/4/13 5:48:53

网安护网面试-3-鸿鹄科技护网面试

以下为已总结“网络安全”及“护网”面试&#xff0c;均在&#xff1a;(https://www.haotaoyun.com/category/soc “网安 护网”终极 300 多问题面试笔记 - 全“网安 护网”终极 300 多问题面试笔记 - 1 共 3 - 内网 & 域相关“网安 护网”终极 300 多问题面试笔记 - 2…...

编程新知 2026/4/13 4:09:04

SitemapGenerator适配器详解：6种存储方案对比与选择

SitemapGenerator适配器详解&#xff1a;6种存储方案对比与选择 【免费下载链接】sitemap_generator SitemapGenerator is a framework-agnostic XML Sitemap generator written in Ruby with automatic Rails integration. It supports Video, News, Image, Mobile, PageMap a…...

编程新知 2026/4/13 3:09:37

彻底告别OpenClaw使用焦虑：我给他装上了“透视眼”和“批量克隆模组凡

指令替换 项目需求&#xff1a;将加法指令替换为减法 项目目录如下 /MyProject ├── CMakeLists.txt # CMake 配置文件 ├── build/ #构建目录 │ └── test.c #测试编译代码 └── mypass2.cpp # pass 项目代码 一&#xff0c;测试代码示例 test.c // test.c #includ…...

编程新知 2026/4/13 2:59:21

保姆级教程：在Jetson Orin上从零搭建PyTorch+TensorFlow环境（含torchvision源码编译避坑）

保姆级教程&#xff1a;在Jetson Orin上从零搭建PyTorchTensorFlow环境&#xff08;含torchvision源码编译避坑&#xff09; NVIDIA Jetson Orin作为当前边缘计算领域的旗舰平台&#xff0c;其ARM架构下的深度学习环境配置一直是开发者的痛点。本文将手把手带你完成从系统准备到…...

编程新知 2026/4/13 2:06:25

ORA-06521: PL/SQL映射函数错误，权威解析Oracle报错故障修复与远程处理方案

故障修复核心方案&#xff1a;首先检查PL/SQL代码中的映射函数调用&#xff0c;确保参数类型匹配&#xff0c;避免类型转换错误。执行以下SQL诊断&#xff1a;SELECT * FROM user_errors WHERE name 你的包名; 清理后重编译&#xff1a;ALTER PACKAGE your_package COMPILE; 如…...

编程新知 2026/4/13 1:29:11

基于 AI Agent 的童话编剧与绘本生成器（二）——爬虫篇

上一篇文章发表后&#xff0c;组内成员说不用写那么长的代码介绍&#xff0c;建议我只对实现的核心功能进行概括。 一、实现的爬虫脚本 在第4、5周实现了“从公开网页&#xff08;目前选则 Storyberries&#xff09;拉取童话/绘本类文本”的爬虫&#xff0c;为后面的「编剧 /…...

编程新知 2026/4/13 1:19:04

nRF24L01P轻量级SPI驱动库：嵌入式教学与工业遥控实践

1. nRF24L01P驱动库技术解析&#xff1a;面向嵌入式教学与工业遥控场景的轻量级SPI通信实现1.1 库定位与工程背景该nRF24L01P驱动库源自法国尼斯大学IUT&#xff08;University Institute of Technology&#xff09;2019年TelecoBots教学项目&#xff0c;专为嵌入式遥控机器人平…...

编程新知 2026/4/13 0:42:08

KIM库解析：Arduino上实现6502总线时序与复古计算仿真

1. KIM库&#xff1a;面向KIM1 Shield v2的Arduino底层驱动框架解析1.1 历史背景与硬件定位KIM1 Shield v2 是一款已停产的Arduino扩展板&#xff0c;专为复刻与教学用途设计&#xff0c;其核心目标是模拟1975年MOS Technology推出的KIM-1单板计算机&#xff08;Keyboard Input…...

编程新知 2026/4/13 0:17:40

专家 VS镜像视界：镜像视界算不算AI公司？

&#x1f3af; 标准反杀答案如果按传统分类&#xff0c;我们当然使用AI技术&#xff1b;但如果从系统本质来看—— 我们不属于“AI公司”&#xff0c;而属于“空间智能基础设施公司”。AI只是我们系统中的一个模块&#xff0c; 而不是系统的核心。&#x1f9e0; 进阶拆解① 承认…...

编程新知 2026/4/12 23:57:53