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

CSS--移动web基础

news 2025/7/8 12:36:36

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

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

编程新知 2025/7/6 2:55:54

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

编程新知 2025/7/7 16:19:26

C++：多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

编程新知 2025/7/6 18:42:38

云原生安全实战：API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

编程新知 2025/7/7 17:17:15

STM32HAL库USART源代码解析及应用

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

编程新知 2025/7/7 3:24:43

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

编程新知 2025/7/7 6:43:19

tomcat指定使用的jdk版本

说明 有时候需要对tomcat配置指定的jdk版本号&#xff0c;此时&#xff0c;我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...

编程新知 2025/6/10 21:11:28

【SpringBoot自动化部署】

SpringBoot自动化部署方法 使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一&#xff0c;能够实现代码拉取、构建、测试和部署的全流程自动化。 配置Jenkins任务时&#xff0c;需要添加Git仓库地址和凭证&#xff0c;设置构建触发器&#xff08;如GitHub…...

编程新知 2025/7/7 11:50:01

如何把工业通信协议转换成http websocket

1.现状 工业通信协议多数工作在边缘设备上&#xff0c;比如&#xff1a;PLC、IOT盒子等。上层业务系统需要根据不同的工业协议做对应开发&#xff0c;当设备上用的是modbus从站时&#xff0c;采集设备数据需要开发modbus主站&#xff1b;当设备上用的是西门子PN协议时&#xf…...

编程新知 2025/7/6 8:43:39

二叉树-144.二叉树的前序遍历-力扣(LeetCode)

一、题目解析 对于递归方法的前序遍历十分简单&#xff0c;但对于一位合格的程序猿而言&#xff0c;需要掌握将递归转化为非递归的能力&#xff0c;毕竟递归调用的时候会调用大量的栈帧&#xff0c;存在栈溢出风险。 二、算法原理 递归调用本质是系统建立栈帧&#xff0c;而非…...

编程新知 2025/7/7 19:12:23