黑马程序员——移动Web——day03

目录：

  1. 移动Web基础
    1. 谷歌模拟器
    2. 屏幕分辨率
    3. 视口
    4. 二倍图
    5. 适配方案
  2. rem
    1. 简介
    2. 媒体查询
    3. rem布局
    4. flexible.js
    5. rem移动适配
  3. less
    1. 注释
    2. 运算
    3. 嵌套
    4. 变量
    5. 导入
    6. 导出
    7. 禁止导出
  4. 综合案例-极速问诊
    1. 准备工作
    2. 头部布局
    3. 头部内容
    4. banner区域
    5. 问诊类型布局
    6. 问诊类型内容

1.移动 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

2.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。

<body>
  ......
  <script src="./js/flexible.js"></script>
</body>
rem 移动适配

rem单位尺寸

  • 确定基准根字号
    • 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
  • rem单位的尺寸
    • rem单位的尺寸 = px单位数值 / 基准根字号

3.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

4.综合案例-极速问诊

准备工作

  • 项目目录

  • 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 样式

// 头部
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/391774.html

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

相关文章

软件实例分享，家具生产出库管理系统软件教程

软件实例分享，家具生产出库管理系统软件教程

软件实例分享&#xff0c;家具生产出库管理系统软件教程 一、前言 以下软件程序教程以 佳易王家具行业生产出库管理系统软件V16.1为例说明 软件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 销售管理——产品状态查询变更&#xff0c;可以根据生产进度变更…
阅读更多...
每日OJ题_二叉树dfs①_力扣2331. 计算布尔二叉树的值

每日OJ题_二叉树dfs①_力扣2331. 计算布尔二叉树的值

目录 力扣2331. 计算布尔二叉树的值 解析代码 力扣2331. 计算布尔二叉树的值 2331. 计算布尔二叉树的值 难度 简单 给你一棵 完整二叉树 的根&#xff0c;这棵树有以下特征&#xff1a; 叶子节点 要么值为 0 要么值为 1 &#xff0c;其中 0 表示 False &#xff0c;1 表示…
阅读更多...
七天入门大模型 ：来，亲手做一个AI应用！

七天入门大模型 ：来，亲手做一个AI应用！

内容提纲 七天入门大模型已完成了6篇&#xff0c;喜欢记得收藏、关注、点赞。 七天入门大模型 &#xff1a;LLM大模型基础知识最全汇总七天入门大模型 &#xff1a;提示词工程 Prompt Engineering&#xff0c;最全的总结来了&#xff01;七天入门大模型 &#xff1a;LLM和多模…
阅读更多...
74HC373使用方法

74HC373使用方法

74HC373属于D锁存器 OC&#xff1a;输出控制&#xff0c;低电平输出使能 LE&#xff1a;锁存使能输入&#xff0c;低电平直通&#xff0c;高电平锁存 Q&#xff1a;数据输出引脚 D&#xff1a;数据输入引脚
阅读更多...
推荐系统｜召回04_离散特征处理

推荐系统｜召回04_离散特征处理

离散特征处理 离散特征是什么 怎么处理离散特征 One-hot编码 Embedding嵌入 从one-hot到Embedding&#xff0c;已经节省了很多的存储空间&#xff0c;但当数据量大的时候&#xff0c;还是占空间&#xff0c;所以工业界仍会对Embedding进行优化 而一个物品所对应的Embedding参数…
阅读更多...
使用Python编写脚本-根据端口号杀掉进程

使用Python编写脚本-根据端口号杀掉进程

我的GitHub&#xff1a;Powerveil - GitHub 我的Gitee&#xff1a;Powercs12 - Gitee 皮卡丘每天学Java 从前段开始遇到一个问题&#xff0c;服务在启动的时候总是端口被占用&#xff0c;发现还是Java程序&#xff0c;但是当时并没有启动Java程序&#xff0c;电脑出问题了。 一…
阅读更多...
Vue项目-创建

Vue项目-创建

Vue项目-创建 创建一个工程化的Vue项目&#xff0c;执行命令&#xff1a;npm init vuelatest 第一次执行npm init vuelatest命令&#xff0c;会出现以下提示&#xff0c;输入y即可安装create-vue最新版本。 随后create-vue脚手架会给出项目的众多选项 根据提示输入命令 cd…
阅读更多...
WebServer 之 http连接处理（下）

WebServer 之 http连接处理（下）

目录 ✊请求报文--解析 流程图 && 状态机 状态机 -- 状态转移图 主状态机 从状态机 http 报文解析 HTTP_CODE 含义 从状态机 逻辑 主状态机 逻辑 &#x1f41e;请求报文--响应 基础API stat mmap iovec writev 流程图 HTTP_CODE 含义(2) 代码分析 …
阅读更多...
CV | Segment Anything论文详解及代码实现

CV | Segment Anything论文详解及代码实现

本文主要是详解解释了SAM的论文部分以及代码实现~ 论文&#xff1a;2023.04.05_Segment Anything 论文地址&#xff1a;2304.02643.pdf (arxiv.org) 代码地址&#xff1a;facebookresearch/segment-anything: The repository provides code for running inference with the Seg…
阅读更多...
鲜为人知的python位运算

鲜为人知的python位运算

位运算&#xff0c;计算机内所有的数都以二进制存储&#xff0c;位运算就是对二进制位的操作 位运算符说明<<按位左移&#xff0c;左移n位相当于乘以2的n次方>>按位右移 &#xff0c;左移n位相当于除以2的n次方&按位与&#xff0c;二进制位数同且为1结果位为1…
阅读更多...
RK3399平台开发系列讲解（USB篇）USB控制传输方式介绍

RK3399平台开发系列讲解（USB篇）USB控制传输方式介绍

🚀返回专栏总目录 文章目录 一、控制传输详解二、Setup阶段和Data阶段三、Setup 事务格式沉淀、分享、成长，让自己和他人都能有所收获！😄 📢USB控制传输是USB通信中的一种基本传输类型，用于控制USB设备的配置和操作。它由 Setup 阶段和 Data 阶段组成，可用于发送命令…
阅读更多...
Vulnhub靶机：DC5

Vulnhub靶机：DC5

一、介绍 运行环境&#xff1a;Virtualbox 攻击机&#xff1a;kali&#xff08;10.0.2.15&#xff09; 靶机&#xff1a;DC5&#xff08;10.0.2.58&#xff09; 目标&#xff1a;获取靶机root权限和flag 靶机下载地址&#xff1a;https://download.vulnhub.com/dc/DC-5.zi…
阅读更多...
Mysql第二关之存储引擎

Mysql第二关之存储引擎

简介 所有关于Mysql数据库优化的介绍仿佛都有存储引擎的身影。本文介绍Mysql常用的有MyISAM存储引擎和Innodb存储引擎&#xff0c;还有常见的索引。 Mysql有两种常见的存储引擎&#xff0c;MyISAM和Innodb&#xff0c;它们各有优劣&#xff0c;经过多次优化和迭代&#xff0c;…
阅读更多...
数据库数据加密的 4 种常见思路的对比

数据库数据加密的 4 种常见思路的对比

应用层加解密方案数据库前置处理方案磁盘存取环节&#xff1a;透明数据加密DB 后置处理 最近由于工作需要&#xff0c;我对欧洲的通用数据保护条例做了调研和学习&#xff0c;其中有非常重要的一点&#xff0c;也是常识性的一条&#xff0c;就是需要对用户的个人隐私数据做好加…
阅读更多...
Jetson下的i2c、spi、gpio、can、uart、485代码示例使用说明

Jetson下的i2c、spi、gpio、can、uart、485代码示例使用说明

适用于刚接触新设备的同学参考。 UART 演示代码 目前&#xff0c;这是一个简单的 Python 3 脚本&#xff0c;用于与 NVIDIA Jetson Nano 开发套件的 J41 头上的 UART 进行交互。当然只要是jetson都可以用&#xff0c;改一下程序里面的设备节点就行 JetsonHacks 上的原始文章&…
阅读更多...
智能摄像头prv文件恢复案例

智能摄像头prv文件恢复案例

家用智能摄像头一般采用的是mp4或者mov视频方案&#xff0c;常见的是mp4&#xff0c;对于部分有开发能力的厂商可能会采用自定义方案&#xff08;如360的bin文件&#xff09;,今天我们来看一个小厂的PRV自定义文件的恢复案例。 故障存储: 32G TF卡/fat32/ 簇&#xff08;块)大…
阅读更多...
stl~string

stl~string

迭代器 typedef char* iterator;typedef const char* const_iterator;iterator begin(){return _str;}iterator end(){return _str _size;}const_iterator begin() const//左值const{return _str;}const_iterator end() const{return _str _size;} for&#xff08;auto e : …
阅读更多...
Nginx （window）2024版 笔记 下载 安装 配置

Nginx （window）2024版 笔记 下载 安装 配置

前言 Nginx (engine x) 是一款轻量级的 Web 服务器 、反向代理&#xff08;Reverse Proxy&#xff09;服务器及电子邮件&#xff08;IMAP/POP3&#xff09;代理服务器。 反向代理方式是指以代理服务器来接受 internet 上的连接请求&#xff0c;然后将请求转发给内部网络上的服…
阅读更多...
【IO流】32.IO流

【IO流】32.IO流

IO流 1. IO流1.1 概述1.2 作用1.3 分类1.4 注意事项 1. IO流 IO流&#xff1a;存储和读取数据的解决方案。 I&#xff1a;input O&#xff1a;output 流&#xff1a;像水流一样传输数据 1.1 概述 IO&#xff08;Input/Output&#xff09;流是计算机程序用于与外部设备进行数据…
阅读更多...
ABC341 A-G

ABC341 A-G

Toyota Programming Contest 2024#2&#xff08;AtCoder Beginner Contest 341&#xff09; - AtCoder B读不懂题卡了&#xff0c;F读假题卡了&#xff0c;开题开慢了rank了 A - Print 341 题意&#xff1a; 打印一串交替出现的包含N个0&#xff0c;N1个1的01串 代码&…
阅读更多...
最新文章

Copyright @ 2022~2023