移动端Web笔记day03

news2024/12/23 11:28:27

移动 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);
}

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

《机器学习：引领数字化时代的技术革命》

《机器学习：引领数字化时代的技术革命》

随着科技的不断发展&#xff0c;机器学习作为人工智能的重要支柱之一&#xff0c;正迅速崛起并引领着数字化时代的技术革命。本文将从机器学习的技术进展、技术原理、行业应用案例、面临的挑战与机遇以及未来趋势预测和学习路线等方面展开探讨&#xff0c;为您揭示机器学习的神…
阅读更多...
c++的学习之路：3、入门（2）

c++的学习之路：3、入门（2）

一、引用 1、引用的概念 引用不是新定义一个变量&#xff0c;而是给已存在变量取了一个别名&#xff0c;编译器不会为引用变量开辟内存空 间&#xff0c;它和它引用的变量共用同一块内存空间。 怎么说呢&#xff0c;简单点理解就是你的小名&#xff0c;家里人叫你小名&#…
阅读更多...
配置DNS后，SSH登录变慢

配置DNS后，SSH登录变慢

问题描述 最近使用ssh时出现登录非常缓慢的状态&#xff0c;登录一般需要花费20秒以上才能正常登陆&#xff0c; Connecting to *****:22... Connection established. To escape to local shell, press CtrlAlt].等待十秒钟后&#xff0c;提示登录成功 Last login: Mon Jun …
阅读更多...
k8s系列之十七 Istio中的服务治理

k8s系列之十七 Istio中的服务治理

删除前面配置的目的地规则 [rootk8s-master ~]# kubectl delete destinationrule details destinationrule.networking.istio.io "details" deleted [rootk8s-master ~]# kubectl delete destinationrule productpage destinationrule.networking.istio.io "pr…
阅读更多...
00000基础搭建vue+flask前后端分离项目

00000基础搭建vue+flask前后端分离项目

我完全是参考的这个vue3flask前后端分离环境速建_flask vue3-CSDN博客 安装了node_js&#xff08;添加了环境变量&#xff09; 环境变量 把原来的镜像源换成了淘宝镜像源 npm config set registry https://registry.npmmirror.com/ 查看版本证明安装成功 npm - v 安装npm i…
阅读更多...
caffe | 使用caffe SSD制作VOC07112 lmdb数据集

caffe | 使用caffe SSD制作VOC07112 lmdb数据集

git clone -b ssd https://github.com/weiliu89/caffe.git caffe_ssdcd caffe_ssdcp caffe/Makefile.config caffe_ssd/# 把 cuda 和 cudnn 关了&#xff0c;用 cpu 版本的就好了 make -j32 make pycaffemake test -j8 make runtest -j8 vim ~/.bashrc# 加入 export LD_LIBRAR…
阅读更多...
Day49:WEB攻防-文件上传存储安全OSS对象分站解析安全解码还原目录执行

Day49:WEB攻防-文件上传存储安全OSS对象分站解析安全解码还原目录执行

目录 文件-解析方案-目录执行权限&解码还原 目录执行权限 解码还原 文件-存储方案-分站存储&OSS对象 分站存储 OSS对象存储 知识点&#xff1a; 1、文件上传-安全解析方案-目录权限&解码还原 2、文件上传-安全存储方案-分站存储&OSS对象 文件-解析方案-目…
阅读更多...
数据分析之Power Pivot多表数据建模

数据分析之Power Pivot多表数据建模

Power Pivot 介绍&#xff1a; 可以融合多个数据表可夺标关联搭建复杂数据模型一次建模&#xff0c;一键刷新DAX函数编写公式计算可将数据模型轻松移植到PBI和SQL中 1.将数据导入power pivot(power pivot------添加到数据模型) 2.导入其他表格&#xff0c;并有一定的关联 导入…
阅读更多...
Cesium for UE-03-添加数据集（倾斜摄影）

Cesium for UE-03-添加数据集（倾斜摄影）

继续上一章节&#xff0c;在创建了项目和关卡的基础上添加倾斜摄影 重新打开上次的项目和关卡 如果你已经关掉了上次的项目和关卡&#xff0c;可以重新打开ue&#xff0c;然后选择 选择 文件-打开关卡&#xff0c;在弹出的窗口中&#xff0c;选择 上次的关卡&#xff0c;并点击…
阅读更多...
web学习笔记（四十五）Node.js

web学习笔记（四十五）Node.js

目录 1. Node.js 1.1 什么是Node.js 1.2 为什么要学node.js 1.3 node.js的使用场景 1.4 Node.js 环境的安装 1.5 如何查看自己安装的node.js的版本 1.6 常用终端命令 2. fs 文件系统模块 2.1引入fs核心模块 2.2 读取指定文件的内容 2.3 向文件写入指定内容 2.4 创…
阅读更多...
【双指针】Leetcode 有效三角形的个数

【双指针】Leetcode 有效三角形的个数

题目解析 611. 有效三角形的个数 算法讲解 回顾知识&#xff1a;任意两数之和大于第三数就可以构成三角形 算法 1&#xff1a;暴力枚举 int triangleNumber(vector<int>& nums) {// 1. 排序sort(nums.begin(), nums.end());int n nums.size(), ret 0;// 2. 从…
阅读更多...
基于ACO蚁群优化的UAV最优巡检路线规划算法matlab仿真

基于ACO蚁群优化的UAV最优巡检路线规划算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 4.1 蚂蚁移动和信息素更新 4.2 整体优化过程 5.完整程序 1.程序功能描述 基于ACO蚁群优化法的UAV最优巡检路线规划。蚁群优化算法源于对自然界蚂蚁寻找食物路径行为的模拟。在无人机巡检路…
阅读更多...
Redis入门三（主从复制、Redis哨兵、Redis集群、缓存更新策略、缓存穿透、缓存击穿、缓存雪崩）

Redis入门三（主从复制、Redis哨兵、Redis集群、缓存更新策略、缓存穿透、缓存击穿、缓存雪崩）

文章目录 一、主从复制1.单例redis存在的问题2.主从复制是什么&#xff1f;3.主从复制的原理4.主从搭建1&#xff09;准备工作2&#xff09;方式一3&#xff09;方式二 5.python中操作1&#xff09;原生操作2&#xff09;Django的缓存操作 二、Redis哨兵&#xff08;Redis-Sent…
阅读更多...
SQL109 纠错4（组合查询，order by..）

SQL109 纠错4（组合查询，order by..）

SELECT cust_name, cust_contact, cust_email FROM Customers WHERE cust_state MI UNION SELECT cust_name, cust_contact, cust_email FROM Customers WHERE cust_state IL ORDER BY cust_name;order by子句&#xff0c;必须位于最后一条select语句之后
阅读更多...
【C语言】C语言运算符优先级详解

【C语言】C语言运算符优先级详解

文章目录 &#x1f4dd;前言&#x1f309;运算符优先级简述 &#x1f320;逻辑与和逻辑或&#x1f309;赋值和逗号运算符 &#x1f320;位运算&#x1f309;条件表达式&#x1f309;位运算与算术运算结合&#x1f309;混合使用条件表达式和赋值运算符&#x1f309; 逗号运算符的…
阅读更多...
图像处理与视觉感知---期末复习重点（4）

图像处理与视觉感知---期末复习重点（4）

文章目录 一、图像复原与图像增强1.1 概述1.2 异同点 二、图像复原/退化模型2.1 模型图简介2.2 线性复原法 三、彩色基础四、彩色模型五、彩色图像处理 一、图像复原与图像增强 1.1 概述 1. 图像增强技术一般要利用人的视觉系统特性&#xff0c;目的是取得较好的视觉效果&…
阅读更多...
DMA知识

DMA知识

提示&#xff1a;文章 文章目录 前言一、背景二、 2.1 2.2 总结 前言 前期疑问&#xff1a; 本文目标&#xff1a; 一、背景 2024年3月26日23:32:43 今天看了DMA存储器到存储器的DMA传输和存储器到外设的DMA实验&#xff0c;在keil仿真可以看到效果。还没有在protues和开发…
阅读更多...
雷卯推荐多种系列汽车级TVS供您选择

雷卯推荐多种系列汽车级TVS供您选择

1. 车规级TVS的应用 2.车规级TVS系列表格如下 3.方案推荐 12V汽车电源浪涌保护方案 方案优点&#xff1a;用于满足前装汽车的ISO7637-2 5A5BA测试&#xff0c;可采用单独大功率的TVS或PTCTVS的组合方案&#xff0c;满足ISO10605-2&#xff0c; 等级4&#xff0c;接触放电15K…
阅读更多...
使用ai智能写作场景之gpt整理资料，如何ai智能写作整理资料

使用ai智能写作场景之gpt整理资料，如何ai智能写作整理资料

Ai智能写作助手&#xff1a;Ai智能整理资料小助手 Ai智能整理资料小助手可试用3天&#xff01; 通俗的解释一下怎么用ChatGPT来进行资料整理&#xff1a; 搜寻并获取指定数量的特定领域文章&#xff1a; 想像你在和我说话一样&#xff0c;告诉我你想要多少篇关于某个话题的文…
阅读更多...
【QT+QGIS跨平台编译】之九十五：【QGIS_App跨平台编译】—【错误处理：找不到标识符QwtPolarPoint】

【QT+QGIS跨平台编译】之九十五：【QGIS_App跨平台编译】—【错误处理：找不到标识符QwtPolarPoint】

文章目录 一、找不到标识符QwtPolarPoint二、原因分析三、错误处理一、找不到标识符QwtPolarPoint 报错信息如下： 二、原因分析 未找到QWT_POLAR_VERSION 从而执行的函数： mypMarker->setPosition( QwtPolarPoint( currentInfo.azimuth, currentInfo.elevation )
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023