移动端Web笔记day03

移动 Web 第三题

01-移动 Web 基础

谷歌模拟器

模拟移动设备，方便查看页面效果，移动端的效果是当手机屏幕发生了变化，页面和页面中的元素也要跟着等比例变化。

在这里插入图片描述

屏幕分辨率

分类：

  • 硬件分辨路 -> 物理分辨率：硬件分辨率（出厂设置）
  • 缩放调节的分辨路 -> 逻辑分辨率：软件 / 驱动设置

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

在这里插入图片描述

视口

作用：显示 HTML 网页的区域，用来约束 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倍（不缩放）

二倍图

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

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

使用方法：

在这里插入图片描述

什么是二倍图：比如说现在的设计稿是参考iPhone6/7/8，设备的宽度375px产出设计稿。而二倍图的设计稿尺寸：就是750px。

在以后的工作将二倍图变成适合开发的图片非常简单，只需要按照上面的步骤进行就可以了。直接选择二倍设计图。

上面的图片左边的是psd图片是二倍图时的处理方法，右边是html图片的处理方法。

这是在像素大厨的操作方法，在PS中的操作方法还不知道。

适配方案

  • 宽度适配：宽度自适应，但是高度并不会随着屏幕的变化而变化。在PC端的设计就可以使用这种方式来设计，但是移动端不建议使用这种方式来设计。PC端比较适合这种适配方案。

    • 百分比布局
    • Flex 布局

  • 等比适配：网页元素的宽高等比缩放，这种适配方案更加适合移动端的设计。

    • rem
    • vw

02-rem

简介

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

使用rem相对单位的步骤：

  1. 给HTML标签添加字号

    html {
  font-size: 30px;
}

  2. 使用rem单位书写尺寸

    .box {
  width: 5rem;
  height: 3rem;
  background-color: pink;
}

但是这还是不能实现rem的宽高自适应不同的屏幕，因为没有引入相对应的JS文件。有了如果全部都使用了rem相对单位，到时候直接修改html的字号就可以直接修改全部的盒子的宽高。

媒体查询

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

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

在这里插入图片描述

@media (width:320px) { // 如果检测到括号中的条件满足，就会执行{}中的css选择器
  html {
    background-color: green;
  }
}

注意这是没有调节屏幕缩放比的情况下将视口的宽的调节到320px，如果屏幕设置了缩放比，有可能会无法实现，因为调节缩放比后视口有可能是小数。

rem 布局

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

使用rem布局的步骤：

  1. 使用媒体查询，给不同视口的屏幕设置不同的HTML字号，代码如下图：

在这里插入图片描述

​ 2. 使用rem单位书写尺寸

.box {
  width: 5rem;
  height: 3rem;
  background-color: pink;
}

flexible.js

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

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

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

rem 移动适配

工作中，书写代码的尺寸要参照设计稿尺寸，设计稿中是px，但是移动端要实现宽高自适应，不能使用px，于是就有下面的处理方式。

  • 目标:计算68px是多少个rem?(设计稿适配375px视口)
  • N * 37.5 = 68
  • N = 68/ 37.5

rem单位尺寸

  1. 确定基准根字号
  • 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
  1. rem单位的尺寸
  • rem单位的尺寸 = px单位数值 / 基准根字号
  • 一般是除以37.5，但是要看设计师是参考了哪一个大小的视口。

03-less

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

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

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

现在只是学习less是如何使用的，到了后面学习框架之后，就会框架里面的less的用法。

只要一保存就会直接生成对应的css文件。

在这里插入图片描述

注释

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

注意：less中的单行注释是无法直接生成在对应的css文件中的，但是多行注释可以直接在对应的css文件中生成注释。

运算

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

在这里插入图片描述

到时候除法使用 . 的时候，在下面会有小的波浪线，表示报错，但是，这在less中是合法的，直接保存，也是可以出正确的结果的。

在表达式中最好是只用一个单位。

嵌套

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

在这里插入图片描述

提示：用 & 表示当前选择器，,代码写到谁的大括号里面就表示谁，不会生成后代选择器，通常配合伪类或伪元素使用

在这里插入图片描述

// 比如说a标签默认的字的颜色是红色，当鼠标经过时变成蓝色
.father {
  a {
    color: red;
  }
  
  a:hover {
    color: blue;
  }
}
// 正常的写法是上面这样的，如果需要将这一段代码迁移到其他地方，就需要将a和a:hover对应的内容全都剪切走。
// 这样做不是特别的方便，于是就用到了 & 上面的代码就变成了这样
.father {
  a {
    color: red;
    
    &:hover { // 这表示:hover伪元素不会生成a标签的子代选择器，而是就是a标签，是和a标签是一起的
      color: blue;
    }
  }
}

// 这两种的写法都会生成一样的css代码
.father a {
  color: red;
}
.father a:hover {
  color: bule;
}

变量

概念：容器，存储数据

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

语法：

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

导入

比如说：现在有三个less文件，base.less，common.less，index.less，需要将他们全部引入html文件，由于浏览器不识别less文件，所以将他们全都变成对应的css文件，在通过link引入对应的css文件。这是一种方法。

第二种方法：base.less 和 common.less 不生成 css 文件，直接导入 index.less 文件，到时候直接让index.less 生成 css 文件，其他两个less不生成css文件，最后就引入 index.css 这一个css文件就行了。

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

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

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

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

导出

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

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

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

禁止导出

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

在这里插入图片描述

04-综合案例-极速问诊

源码地址

在这里插入图片描述

准备工作

  • 项目目录

在这里插入图片描述

  • HTML 结构
<link rel="stylesheet" href="./iconfont/iconfont.css">
<link rel="stylesheet" href="./css/index.css">

<body>
  ......
  <script src="./js/flexible.js"></script>
</body>
  • less 样式
// out: ../css/

@import "./base";

头部布局

  • HTML 结构
<!-- 头部 -->
<header>1</header>
  • less 样式
@rootsize: 37.5rem;
// 头部
header {
  display: flex;
  justify-content: space-between;
  padding: 0 (15 / @rootSize);
  height: (44 / @rootSize);
  background-color: pink;
  line-height: (44 / @rootSize);
}

头部内容

  • HTML 结构
<a href="#" class="back"><span class="iconfont icon-left"></span></a>
<h3>极速问诊</h3>
<a href="#" class="note">问诊记录</a>
  • less 样式
.icon-left {
  font-size: (22 / @rootSize);
}

h3 {
  font-size: (17 / @rootSize);
}

.note {
  font-size: (15 / @rootSize);
  color: #2CB5A5;
}

banner 区域

  • HTML 结构
<!-- banner -->
<div class="banner">
  <img src="./assets/entry.png" alt="">
  <p><span>20s</span> 快速匹配专业医生</p>
</div>
  • less 样式
// banner
.banner {
  margin-top: (30 / @rootSize);
  margin-bottom: (34 / @rootSize);
  text-align: center;
  img {
    margin-bottom: (18 / @rootSize);
    width: (240 / @rootSize);
    height: (206 / @rootSize);
  }

  p {
    font-size: (16 / @rootSize);
    span {
      color: #16C2A3;
    }
  }
}

问诊类型布局

  • HTML 结构
<!-- 问诊类型 -->
<div class="type">
  <ul>
    <li>
      <a href="#">
        <div class="pic">1</div>
        <div class="txt">2</div>
        <span class="iconfont icon-right"></span>
      </a>
    </li>
    <li>2</li>
  </ul>
</div>
  • less 样式
// 问诊类型
.type {
  padding: 0 (15 / @rootSize);
  li {
    margin-bottom: (15 / @rootSize);
    padding: 0 (15 / @rootSize);
    height: (78 / @rootSize);
    border: 1px solid #EDEDED;
    border-radius: (4 / @rootSize);
    a {
      display: flex;
      align-items: center;
      // 内容在78里面垂直居中
      height: (78 / @rootSize);
    }
  }
}

问诊类型内容

  • HTML 结构
<div class="pic">
  <img src="./assets/type01.png" alt="">
</div>
<div class="txt">
  <h4>三甲图文问诊</h4>
  <p>三甲主治及以上级别医生</p>
</div>
<span class="iconfont icon-right"></span>
  • less 样式
img {
  margin-right: (14 / @rootSize);
  width: (40 / @rootSize);
  height: (40 / @rootSize);
}
.txt {
  flex:1;
  h4 {
    font-size: (16 / @rootSize);
    color: #3C3E42;
    line-height: (24 / @rootSize);
  }
  p {
    font-size: (13 / @rootSize);
    color: #848484;
  }
}
.iconfont {
  font-size: (16 / @rootSize);
}

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【软考】设计模式之状态模式

【软考】设计模式之状态模式

目录 1. 说明2. 应用场景3. 结构图4. 构成5. 优缺点5.1 优点5.2 缺点 6. java示例6.1 非状态模式6.1.1 问题分析6.1.2 接口类6.1.2 实现类6.1.3 客户端6.1.4 结果截图 6.2 状态模式6.2.1 抽象状态类6.2.2 状态类6.2.3 上下文类6.2.4 上下文类 1. 说明 1.允许一个对象在其内部状…
阅读更多...
算法之美：二叉树演进之AVL平衡二叉树底层原理

算法之美：二叉树演进之AVL平衡二叉树底层原理

在之前的文章中&#xff0c;我们初步了解了二叉查找树&#xff08;又称二叉排序树&#xff09;&#xff0c;这使我们意识到使用特定策略的查询可以显著提高查找效率。本文将进一步探讨二叉树的演进。由于树相关算法较多且相对复杂&#xff0c;因为我后续将拆解讲述&#xff0c;…
阅读更多...
SUSE 15 SP5 一键安装 Oracle 19C（19.22）单机版

SUSE 15 SP5 一键安装 Oracle 19C（19.22）单机版

前言 Oracle 一键安装脚本&#xff0c;演示 SUSE 15 SP5 一键安装 Oracle 19C&#xff08;19.22&#xff09;单机版过程&#xff08;全程无需人工干预&#xff09;&#xff1a;&#xff08;脚本包括 ORALCE PSU/OJVM 等补丁自动安装&#xff09; ⭐️ 脚本下载地址&#xff1…
阅读更多...
集成ES分组查询统计求平均值

集成ES分组查询统计求平均值

前言 之前其实写过ES查询数据&#xff0c;进行分组聚合统计&#xff1a; 复杂聚合分组统计实现 一、目标场景 机房机柜的物联网设备上传环境数据&#xff0c;会存储到ES存到ES的温湿度数据需要查询&#xff0c;进行分组后&#xff0c;再聚合统计求平均值 二、使用步骤 1.引入…
阅读更多...
【Linux系统】进程概念创建进程进程标示符

【Linux系统】进程概念创建进程进程标示符

什么是进程&#xff1f; 操作系统中&#xff0c; 进程可以同时存在非常多的。根据我们之前谈的操作系统具有“管理”的特性&#xff0c; 那么就有&#xff0c;既然要管理&#xff0c;就要 --- 先描述&#xff0c;在组织&#xff01;&#xff01;&#xff01; 由冯诺依曼体系结…
阅读更多...
AIGC，ChatGPT，Prompt 万能提示词

AIGC，ChatGPT，Prompt 万能提示词

AIGC ChatGPT 职场案例 AI 绘画 与 短视频制作 PowerBI 商业智能 68集 Mysql 8.0 54集 Oracle 21C 142集 Office 2021实战应用 Python 数据分析实战&#xff0c; ETL Informatica 数据仓库案例实战 51集 Excel 2021实操 100集&#xff0c; Excel 2021函数大全 80集 Excel 2021…
阅读更多...
进入消息传递的魔法之门：ActiveMQ原理与使用详解

进入消息传递的魔法之门：ActiveMQ原理与使用详解

嗨&#xff0c;亲爱的童鞋们&#xff01;欢迎来到这个充满魔法的世界&#xff0c;今天我们将一同揭开消息中间件ActiveMQ的神秘面纱。如果你是一个对编程稍有兴趣&#xff0c;但又对消息中间件一知半解的小白&#xff0c;不要害怕&#xff0c;我将用最简单、最友好的语言为你呈…
阅读更多...
Linux——命名管道

Linux——命名管道

Linux——命名管道 命名管道命名管道和匿名管道的区别 创建命名管道利用命名管道实现简单通信 我们之前学习了匿名管道&#xff0c;这种管道有一个缺点就是只有两个有血缘关系的进程才能够使用匿名管道&#xff0c;这个非常不方便。所以我们又在匿名管道的基础之上引入了命名管…
阅读更多...
Flask python ：logging日志功能使用

Flask python ：logging日志功能使用

logging日志的使用 一、了解flask日志1.1、Loggers记录器1.2、Handlers 处理器1.3、Formatters 格式化器 二、使用日志2.1、官网上的一个简单的示例2.2、基本配置2.3、具体使用示例2.4、运行 三、写在最后 一、了解flask日志 日志是一种非常重要的工具&#xff0c;可以帮助开发…
阅读更多...
系列学习前端之第 7 章：一文掌握 AJAX

系列学习前端之第 7 章：一文掌握 AJAX

1、AJAX 简介 AJAX 全称为 Asynchronous JavaScript And XML&#xff08;中文名&#xff1a;阿贾克斯&#xff09;&#xff0c;就是异步的 JS 和 XML。AJAX 不是新的编程语言&#xff0c;而是一种将现有的标准组合在一起使用的新方式。AJAX 可以在浏览器中向服务器发送异步请求…
阅读更多...
flutter 弹窗之系列一

flutter 弹窗之系列一

自定义不受Navigator影响的弹窗 class MyHomePage extends StatefulWidget {const MyHomePage({super.key, required this.title});final String title;overrideState<MyHomePage> createState() > _MyHomePageState(); }class _MyHomePageState extends State<MyH…
阅读更多...
rabbitmq-c 程序实现客户端服务端

rabbitmq-c 程序实现客户端服务端

安装mq https://blog.csdn.net/zl_momomo/article/details/82986368 需要安裝rabbitmq-server 开启rabbitmq服务 systemctl start rabbitmq-server systemctl enable rabbitmq-server. 客户端 amqp_sendstring.c include <stdint.h> #include <stdio.h> #incl…
阅读更多...
访问二维数组本质

访问二维数组本质

先从一维数组讲起 int main() {int arr[5] { 1,2,3,4,5 };for (int i 0; i < 5; i) {printf("%d",arr[i]); //对数组进行访问}return 0; } 其实 arr [ i ] * (arr i) 这两个是完全相等的&#xff0c;在c语言指针&#xff08;1&#xff09;8.数组名与 …
阅读更多...
STM32F103 CubeMX 使用USB生成键盘设备

STM32F103 CubeMX 使用USB生成键盘设备

STM32F103 CubeMX 使用USB生成键盘设备 基础信息HID8个数组各自的功能 生成代码代码编写添加申明信息main 函数编写HID 修改1. 修改报文描述符2 修改 "usbd_hid.h" 中的申明文件 基础信息 软件版本&#xff1a; stm32cubmx&#xff1a;6.2 keil 5 硬件&#xff1a;…
阅读更多...
Redis中的事件(三)

Redis中的事件(三)

时间事件 事件的调度与执行 因为服务器中同时存在文件事件和时间事件两种事件类型&#xff0c;所以服务器必须对这两种事件进行调度&#xff0c;决定何时应该处理文件事件&#xff0c;何时有应该处理时间事件&#xff0c;以及花多少事件来处理它们等等。事件的调度和执行由ae…
阅读更多...
uniApp中使用小程序XR-Frame创建3D场景（2）加载模型

uniApp中使用小程序XR-Frame创建3D场景（2）加载模型

上篇文章讲述了如何将XR-Frame作为子组件集成到uniApp中使用&#xff0c;只完成了简单的环境搭建&#xff0c;这篇文章讲解如何加载3D模型。 1 加入模型加载标签 在XR-Frame框架中&#xff0c;加载资源都是在wxml文件的标签中实现的。下面是wxml中完整的代码 index.wxml &l…
阅读更多...
（二）Eureka服务搭建，服务注册，服务发现

（二）Eureka服务搭建，服务注册，服务发现

1.Eureka注册中心 假如我们的服务提供者user-service部署了多个实例&#xff0c;如图&#xff1a; 存在几个问题&#xff1a; order-service在发起远程调用的时候&#xff0c;该如何得知user-service实例的ip地址和端口&#xff1f;有多个user-service实例地址&#xff0c;…
阅读更多...
手机和键盘的数字键盘排序为什么是不同的？

手机和键盘的数字键盘排序为什么是不同的？

不知道你有没有注意有一个问题。我们的手机输入法中的数字键盘&#xff0c;电脑上通用的数字键盘&#xff0c;计算器上的数字键盘等排序是不同的&#xff0c;从观察者角度看&#xff0c;0-9的数字排列有从上到下的排列&#xff0c;还有从下到上的排列。为什么会出现不同的排列方…
阅读更多...
HWOD：句子逆序

HWOD：句子逆序

一、题目 描述 将一个英文语句以单词为单位逆序排放。例如I am a boy逆序排放后为boy a am I。所有单词之间用一个空格隔开。语句中除了英文字母外&#xff0c;不再包含其他字符。 数据范围 输入的字符串长度满足 1<n<1000 输入 输入一个英文语句&#xff0c;每个…
阅读更多...
【电力监控保护】AM5SE-IS防孤岛保护装置/35kV、10kV、380V分布式光伏并网供电/什么是孤岛效应/孤岛效应的危害

【电力监控保护】AM5SE-IS防孤岛保护装置/35kV、10kV、380V分布式光伏并网供电/什么是孤岛效应/孤岛效应的危害

什么是孤岛效应&#xff01;&#xff01;&#xff01; 安科瑞薛瑶瑶18701709087 在电力系统中&#xff0c;孤岛效应指的是当电网突然断电时&#xff0c;并网光伏发电系统仍然保持对电网中部分线路的供电状态。这种情况下&#xff0c;这些线路与其他电网断开&#xff0c;形成了…
阅读更多...
最新文章

Copyright @ 2022~2023