Day12：rem 布局 和 less 使用

目标：使用 rem 和 less 完成移动端的布局。


一、移动 Web 基础

1、谷歌模拟器

在网页右键点“检查”或快捷键 F12，然后右边栏顶部第二个按钮切换设备为移动端，刷新网页，可以看到谷歌模拟器，可以切换模拟器型号、尺寸、百分比等操作。

在这里插入图片描述

2、屏幕分辨率

分类：

  • 物理分辨率：指屏幕上实际拥有的像素点数，通常用水平像素数和垂直像素数来表示，比如常见的 1920×1080。它是屏幕本身的固有属性，不会随其他因素而改变。物理分辨率决定了屏幕显示图像的清晰度和细腻程度，物理分辨率越高，显示的图像就越清晰、精细。

  • 逻辑分辨率：可以理解为软件层面上设定的分辨率。它是系统或应用程序所使用的分辨率设定。通过调整逻辑分辨率，可以在不改变物理分辨率的情况下，改变屏幕上显示内容的大小和布局。例如，在一部手机上，其物理分辨率是固定的，但用户可以根据自己的喜好在系统设置中调整逻辑分辨率，让图标和文字显示得更大或更小。

在这里插入图片描述

结论：制作网页参考逻辑分辨率，因为我们希望我们设计移动端网页根据不同的手机分辨率、或用户设置手机分辨率而展示不同的尺寸，即适配手机分辨率。

3、视口

作用：显示 HTML 网页的区域，用来约束 HTML 的尺寸。

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <!-- 视口标签：规定HTML的尺寸，让HTML的宽度 = 逻辑分辨率的宽度/设备的宽度 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>
</head>
  • 快捷键 !回车，生成 html 骨架的时候会自动生成视口标签，有了这句代码，html 的宽度会等于设备的宽度
  • width=device-width：视口宽度 = 设备宽度
  • initial-scale=1.0：缩放1倍（不缩放）
4、二倍图

目前开发移动端项目，设计师参考的尺寸以 iphone6/7/8 即 375 * 667 为主流尺寸。但是随着手机手机分辨率越来越高，如果还以 375 * 667 的尺寸设计和切图，图标在高分辨率屏幕下会模糊失真。所以设计师会给二倍图，即设计稿的尺寸是 750 * 1334，是 375 * 667 的二倍。

如果我们拿到设计稿，设计稿的宽度是 750，那这就是二倍图，不能按照上面的尺寸直接布局，需要进行下面操作：

（1）设计稿是 psd 文件，使用像素大厨软件，切换设计图倍数为 2x。
（2）设计稿是 html 文件，双击打开，在浏览器中网页右上角设置图标，修改像素密度为 @2x。

在这里插入图片描述

通过上面操作，设计稿宽度尺寸就会变成 375，我们按照设计稿的尺寸正常布局就可以了。

5、适配方案

  • 宽度适配：宽度自适应，一般用于 pc 端开发

    • 百分比布局
    • Flex 布局

  • 等比适配：宽高等比缩放，一般用于移动端开发

    • rem
    • vw

二、rem

1、简介
  • rem 单位，是相对单位
  • rem 单位是相对于 HTML 标签的字号（font-size）计算结果
  • 1rem = 1HTML 字号大小
  • 谷歌浏览器默认 1rem = 16px
<head>
  <title>rem基本使用</title>
  <style>
    /* 1. 给HTML标签加字号，此时 1rem = 30px */
    html {
      font-size: 30px;
    } 

    /* 2. 使用rem单位书写尺寸 */
    .box {
      width: 5rem;
      height: 3rem;
      background-color: pink;
    }
  </style>
</head>
2、媒体查询

媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式，当某个条件成立，执行对应的CSS样式。

在这里插入图片描述

/* 当宽度等于 320px 时，背景颜色设置为绿色  */
@media (width:320px) {
  html {
     background-color: green;
  }
}
3、rem 布局

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

<head>
  <style>
    /* 1. 使用媒体查询，给不同视口的屏幕设置不同的HTML字号 */
    @media (width:320px) {
      html {
        font-size: 32px;
      }
    }

    @media (width:375px) {
      html {
        font-size: 37.5px;
      }
    }

    @media (width:414px) {
      html {
        font-size: 41.4px;
      }
    }

    /* 2. 使用rem单位书写尺寸 */
    .box {
      width: 5rem;
      height: 3rem;
      background-color: pink;
    }
  </style>
</head>

这样就能根据屏幕不同的逻辑像素，动态修改 font-size，即动态修改了 rem 的值，元素又使用 rem 单位进行布局，最终实现显示效果（如：图片的大小、文字的字号等）在不同像素下展示的效果不同，即屏幕适配。

上面的代码只是 rem 布局的核心思路。但如果实际开发中写这么多 @mdeia 来适配屏幕尺寸，不太现实。所以实际开发中，如果使用 rem 布局方案，还需要配合使用 flexible.js 。

4、flexible.js

flexible.js 是手淘开发出的一个用来适配移动端的 js 库。核心思路也是将视口等分成 10 份，1rem 就是 1 份。

核心原理就是根据不同的视口宽度给网页中 html 根节点设置不同的 font-size。通俗的讲，就是这个 js 库自动帮我们设置了 html 的 font-size 值，即 rem 的值。

<body>
  <div class="box"></div>

  <!-- 引入 flexible.js  -->
  <script src="./js/flexible.js"></script>
</body>
5、rem 移动适配

根据设计稿 px 尺寸转换成 rem 尺寸

  1. 确定基准根字号

  • 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）。

  • 目前，设计稿大部分都是 375 尺寸的，所以基准根字号是 37.5（二倍图通过修改，也可以转换成 375 尺寸，当然要以设计给的尺寸为准，比如如果设计师给的设计稿宽度是420，那么基准跟字号就是 42）。

  1. rem 单位的尺寸

  • rem单位的尺寸 = px单位数值 / 基准根字号

  • rem 单位尺寸 = px 单位数值 / 37.5


三、less

1、安装 Easy LESS

上面讲解了怎么根据设计稿的 px 尺寸转换成 rem 尺寸，了解计算原理即可，实际开发中如果每个尺寸都这么计算，太影响开发效率了。下面讲解 VSCode 的 Easy LESS 插件提高开发效率。

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

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

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

安装好 Easy LESS 后，创建一个 .less 文件，在里面写 css 代码，宽高可以写成数学计算表达式，点击保存后会自动生成 .css 文件，在 html 中引入生成的 css 文件。

在这里插入图片描述

2、注释

  • 单行注释

    • 语法：// 注释内容
    • 快捷键：ctrl + /
    • Mac 电脑是 Command + /

  • 块注释

    • 语法：/* 注释内容 */
    • 快捷键： Shift + Alt + A
    • Mac 电脑是 Option + Shift + A
3、运算
  • 加、减、乘直接书写计算表达式
  • 除法需要添加 小括号 或 .
  • 表达式存在多个单位以第一个单位为准
.box {
  width: 100 + 20px;
  width: 100 - 80px;
  width: 100 * 2px;

  // 除法 / → (计算表达式) 或 ./ → 推荐（）
  width: (68 / 37.5rem);
  // 出现红线, 并且提示报错, 但照样能计算出结果
  // width: 37.5 ./ 37.5rem;

  // 如果表达式有多个单位，最终 css 里面以第一个单位为准，结果是 0.77333333px;
  height: (29px / 37.5rem);
}
4、嵌套

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

提示：用 & 表示当前选择器，不会生成后代选择器，通常配合伪类或伪元素使用。

less 文件的代码：

.father {
  color: red;
  .son {
    width: 200px;
    a {
      color: green;
      // & 表示的是当前选择器，代码写到谁的大括号里面就表示谁, 不会生成后代选择器
      // 应用：配合hover伪类或nth-child结构伪类使用
      &:hover {
        color: blue;
      }
    }

    // 虽然也能实现 hover 效果, 但是习惯使用 &, 代码都在 a {} 里面, 便于以后阅读维护
    // a:hover {
    //   color: orange;
    // }
  }
}

生成的 css 代码：

.father {
  color: red;
}

.father .son {
  width: 200px;
}

.father .son a {
  color: green;
}

.father .son a:hover {
  color: blue;
}
5、变量

概念：容器，存储数据。

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

语法：

  • 定义变量：@变量名: 数据;
  • 使用变量：CSS属性：@变量名;
// 定义变量
@myColor: pink;

// 使用变量
.box {
  color: @myColor;
}

a {
  color: @myColor;
}
6、导入

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

语法：@import "文件路径"; 。

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

@import './base.less';
@import './common';
7、导出

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

提示：

  • 导出路径只有写在第一行才起作用
  • 文件夹名称后面添加 /
  • 如果没有指定 css 的路径和名字，默认创建一个和 less 同级且同名的 css 文件，如果要创建的 css 名字和 less 名字一样，路径中可以省略 css 的名字，路径是 文件夹/ 结尾，/不能省。
// out: ./14-mycss/index.css
// 导出 css 路径写在第一行才起作用, 否则不生效

// 定义变量
@myColor: pink;

.father {
    background-color: @myColor;
}

// 导出路径是：同文件夹下的 css 文件夹内，创建一个和 less 文件名字一样的 css 文件
// 如果没有指定 css 的名字和路径，默认创建一个和 less 同名且同级的 css 文件
// 但是不起作用, 只有在第一行才起作用，
// out: ./css/

.son {
    background-color: #fff;
}

// 不起作用, 只有在第一行才起作用
// out: ./index.css
8、禁止导出

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

// out: false
// 禁止导出 css 文件, 写在第一行才起作用

四、综合案例

通过今日所学，使用 rem 完成如下移动端页面布局：

在这里插入图片描述

想要完整代码的，点击这里获取Day12综合案例完整代码。完全免费，仅供学习参考使用。



在这里插入图片描述

乾坤未定，你我皆是黑马


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

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

相关文章

2024高考作文引发的人工智能争议

2024高考作文引发的人工智能争议

又是一年高考季&#xff0c;多少学子的修行成果也在这这一刻迎来了终极检验&#xff0c;多少学子的梦也在这一刻拉开了揭晓序幕&#xff0c;多少学习的命运也在这一刻迎来了人生中的第一次转变。每年的高考不仅是学子们的人生大事&#xff0c;也是多少父母的热切期望&#xff0…
阅读更多...
[office] excel怎么设置图表格式- excel中chart tools的使用方法 #笔记#经验分享#其他

[office] excel怎么设置图表格式- excel中chart tools的使用方法 #笔记#经验分享#其他

excel怎么设置图表格式? excel中chart tools的使用方法 excel怎么设置图表格式&#xff1f;excel中的数据可以制作成图表&#xff0c;在出啊如图表以后可以再图表总使用命令对其格式进行设置&#xff0c;下面我们就来看看excel中chart tools的使用方法&#xff0c;需要的朋友可…
阅读更多...
运维 之 DNS域名解析

运维 之 DNS域名解析

前言 我们每天打开的网站&#xff0c;他是如何来解析&#xff0c;并且我们怎么能得到网站的内容反馈的界面呢&#xff1f;那什么是DNS呢&#xff08;DNS&#xff08;DomainNameservice&#xff0c;域名服务&#xff0c;主要用于因特网上作为域名和IP地址相互映射&#xff09;那…
阅读更多...
计算机网络--传输层

计算机网络--传输层

计算机网络--计算机网络概念 计算机网络--物理层 计算机网络--数据链路层 计算机网络--网络层 计算机网络--传输层 计算机网络--应用层 1. 概述 1.1 传输层的意义 网络层可以把数据从一个主机传送到另一个主机&#xff0c;但是没有和进程建立联系。 传输层就是讲进程和…
阅读更多...
Golang | Leetcode Golang题解之第137题只出现一次的数字II

Golang | Leetcode Golang题解之第137题只出现一次的数字II

题目&#xff1a; 题解&#xff1a; func singleNumber(nums []int) int {a, b : 0, 0for _, num : range nums {b (b ^ num) &^ aa (a ^ num) &^ b}return b }
阅读更多...
SpringAI调用OpenAI Demo

SpringAI调用OpenAI Demo

Spring AI 在maven的setting.xml <mirror> <id>spring-milestones</id> <name>Spring Milestones</name> <mirrorOf>spring-milestones</mirrorOf> <url>https://repo.sprin…
阅读更多...
用HTML实现拓扑面，动态4D圆环面，可手动调节，富有创新性的案例。（有源代码）

用HTML实现拓扑面，动态4D圆环面，可手动调节，富有创新性的案例。（有源代码）

文章目录 前言一、示例二、目录结构三、index.html&#xff08;主页面&#xff09;四、main.js五、Tour4D.js六、swissgl.js七、dat.gui.min.js八、style.css 前言 如果你觉得对代码进行复制粘贴很麻烦的话&#xff0c;你可以直接将资源下载到本地。无需部署&#xff0c;直接可…
阅读更多...
5.31.15 使用图像到图像转换和 YOLO 技术对先前的乳房 X 光检查结果中的异常进行早期检测和分类

5.31.15 使用图像到图像转换和 YOLO 技术对先前的乳房 X 光检查结果中的异常进行早期检测和分类

在本研究中&#xff0c;我们研究了基于 You-Only-Look-Once (YOLO) 架构的端到端融合模型的有效性&#xff0c;该模型可同时检测和分类数字乳房 X 光检查中的可疑乳腺病变。包括四类病例&#xff1a;肿块、钙化、结构扭曲和正常&#xff0c;这些病例来自包含 413 个病例的私人数…
阅读更多...
JavaEE初阶---多线程编程（一.线程与进程）

JavaEE初阶---多线程编程（一.线程与进程）

目录 &#x1f923;一.线程与进程的概念与联系&#xff1a; 进程的基本概念&#xff1a; 线程的基本概念&#xff1a; 进程和线程的区别与联系&#xff1a; &#x1f643;代码执行实列&#xff1a; 1.通过继承Thread父类来实现多线程 2.通过实现Runnable接口来实现多线程…
阅读更多...
【C语言题解】1、写一个宏来计算结构体中某成员相对于首地址的偏移量；2、写一个宏来交换一个整数二进制的奇偶位

【C语言题解】1、写一个宏来计算结构体中某成员相对于首地址的偏移量；2、写一个宏来交换一个整数二进制的奇偶位

&#x1f970;欢迎关注 轻松拿捏C语言系列&#xff0c;来和 小哇 一起进步&#xff01;✊ &#x1f308;感谢大家的阅读、点赞、收藏和关注 &#x1f495;希望大家喜欢我本次的讲解&#x1f495; 目录&#x1f451; 1、写一个宏&#xff0c;计算结构体中某变量相对于首地址的偏…
阅读更多...
拼多多第37期：拼多多单品裂变起爆2.0（17节课）

拼多多第37期：拼多多单品裂变起爆2.0（17节课）

课程下载&#xff1a;拼多多第37期&#xff1a;拼多多单品裂变起爆2.0&#xff08;17节课&#xff09;-课程网盘链接提取码下载.txt资源-CSDN文库 更多资源下载&#xff1a;关注我。 课程内容&#xff1a; 01.《拼多多单品裂变起爆2.0》非标品类成功操作案例.mp4 02.《拼多…
阅读更多...
在Windows上用Llama Factory微调Llama 3的基本操作

在Windows上用Llama Factory微调Llama 3的基本操作

这篇博客参考了一些文章&#xff0c;例如&#xff1a;教程&#xff1a;利用LLaMA_Factory微调llama3:8b大模型_llama3模型微调保存-CSDN博客 也可以参考Llama Factory的Readme&#xff1a;GitHub - hiyouga/LLaMA-Factory: Unify Efficient Fine-Tuning of 100 LLMsUnify Effi…
阅读更多...
Spring Security系列之Handler

Spring Security系列之Handler

概述 与Spring、Spring MVC、Spring Boot一样&#xff0c;Spring Security里也有很多Handler接口、可以分为两大类&#xff0c;一类是普通的XxxHandler&#xff08;见名知意&#xff09;&#xff0c;另一类是对应的ServerXxxHandler&#xff08;RequestRejectedHandler除外&am…
阅读更多...
【ArcGIS微课1000例】0119：TIFF与grid格式互相转换

【ArcGIS微课1000例】0119：TIFF与grid格式互相转换

文章目录 一、任务描述二、tiff转grid三、grid转tif四、注意事项一、任务描述 地理栅格数据常用TIFF格式和GRID格式进行存储。TIFF格式的栅格数据常以单文件形式存储，不仅存储有R、G、B三波段的像素值，还保存有地理坐标信息。GRID格式的栅格数据常以多文件的形式进行存储，且…
阅读更多...
ElasticSearch学习笔记之三：Logstash数据分析

ElasticSearch学习笔记之三：Logstash数据分析

第3章 Logstash数据分析 Logstash使用管道方式进行日志的搜集处理和输出。有点类似*NIX系统的管道命令 xxx | ccc | ddd&#xff0c;xxx执行完了会执行ccc&#xff0c;然后执行ddd。 在logstash中&#xff0c;包括了三个阶段: 输入input --> 处理filter&#xff08;不是必须…
阅读更多...
【MMU】——ARM 二级页表

【MMU】——ARM 二级页表

文章目录 二级页表项即 entry 的格式如下 二级页表项有三种类型 产生中止异常的故障条目。这可能是预取或数据中止、取决于访问类型。这实际上表示虚拟地址未映射 bit[1:0] 00大页 64KB。bit[1:0] 01。小页 4KB。bit[1:0]1x。 一级页表占用 16KB 的内存&#xff0c;二级页表…
阅读更多...
Fastgpt接入Whisper本地模型实现语音输入

Fastgpt接入Whisper本地模型实现语音输入

前言 FastGPT 默认使用了 OpenAI 的 LLM 模型和语音识别模型，如果想要私有化部署的话，可以使用openai 开源模型Whisper。参考文章 《openai 开源模型Whisper语音转文本模型下载使用》 开源项目地址 ： 兼容openai接口api服务 https://gitee.com/taisan/whisper-api 设置安…
阅读更多...
glm-4v-9b 部署

glm-4v-9b 部署

glm-4v-9b 模型文件地址 GLM-4 仓库文件地址 官方测试 硬件配置和系统要求 官方测试硬件信息: OS: Ubuntu 22.04Memory: 512G…
阅读更多...
【Mac】Media Encoder 2022 for Mac（媒体编码器）V22.6.1软件介绍

【Mac】Media Encoder 2022 for Mac（媒体编码器）V22.6.1软件介绍

软件介绍 Media Encoder 2022 for Mac是一款有着十分丰富硬件设备的编码格式设置和专门设计的预设设置功能的媒体编码器软件&#xff0c;Media Encoder Mac版能够帮助用户导出与特定交付媒体兼容的文件&#xff0c;可以很容易地将项目导出到任何屏幕上的可播放内容中。软件同时…
阅读更多...
4.通用编程概念

4.通用编程概念

目录 一、变量与常量1.1 变量1.2 常量 二、遮蔽三、数据类型3.1 标量类型1. 整型2. 浮点型3. 布尔类型4.字符类型 3.2 复合类型1. 元组2. 数组 四、函数五、语句和表达式六、函数的返回值 一、变量与常量 1.1 变量 在Rust中默认的变量是不可变的&#xff0c;如果修改其值会导致…
阅读更多...
最新文章

Copyright @ 2022~2023