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

CSS--移动web基础

news 2025/11/17 8:09:41

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

springboot 百货中心供应链管理系统小程序

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

编程新知 2025/11/16 15:49:34

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

编程新知 2025/11/5 13:03:58

安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

编程新知 2025/11/12 6:59:46

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

编程新知 2025/10/19 0:02:23

WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

编程新知 2025/8/13 16:04:59

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2025/11/16 21:56:06

Redis：现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...

编程新知 2025/11/15 1:41:43

淘宝扭蛋机小程序系统开发：打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发&#xff0c;旨在打造一个互动性强的购物平台&#xff0c;让用户在购物的同时&#xff0c;能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机&#xff0c;实现旋转、抽拉等动作&#xff0c;增…...

编程新知 2025/11/16 23:09:18

Java 与 MySQL 性能优化：MySQL 慢 SQL 诊断与分析方法详解

文章目录 一、开启慢查询日志&#xff0c;定位耗时SQL1.1 查看慢查询日志是否开启1.2 临时开启慢查询日志1.3 永久开启慢查询日志1.4 分析慢查询日志 二、使用EXPLAIN分析SQL执行计划2.1 EXPLAIN的基本使用2.2 EXPLAIN分析案例2.3 根据EXPLAIN结果优化SQL 三、使用SHOW PROFILE…...

编程新知 2025/7/24 5:10:25

工厂方法模式和抽象工厂方法模式的battle

1.案例直接上手 在这个案例里面&#xff0c;我们会实现这个普通的工厂方法&#xff0c;并且对比这个普通工厂方法和我们直接创建对象的差别在哪里&#xff0c;为什么需要一个工厂&#xff1a; 下面的这个是我们的这个案例里面涉及到的接口和对应的实现类&#xff1a; 两个发…...

编程新知 2025/11/17 3:06:32