Day12：rem 布局 和 less 使用

news2024/11/19 1:34:08

目标：使用 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.coloradmin.cn/o/1799316.html

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

相关文章

Vue3_上传文件_下载文件

Vue3_上传文件_下载文件

目录 一、上传文件 二、下载文件 vue3对接后端进行文件上传和下载。 一、上传文件 点击上传资料按钮&#xff0c;选择文件&#xff0c;进行上传。 创建一个proFile.vue&#xff0c;文件&#xff0c;这个文件可以作为一个子组件在其他页面引用。 组件用的element-Plus的ElM…
阅读更多...
端午假期来临，来使用闪侠惠递便宜寄快递吧！

端午假期来临，来使用闪侠惠递便宜寄快递吧！

相信很多人和我一样&#xff0c;每当需要寄快递时&#xff0c;总是感到十分头疼。不同的快递公司有不同的价格、时效和服务质量等等&#xff0c;选择起来真的很不容易。但是现在有了闪侠惠递来帮大家寄快递吧&#xff0c;这个问题就可以迎刃而解了&#xff01;小编奉劝大家快来…
阅读更多...
NSSCTF CRYPTO MISC题解（一）

NSSCTF CRYPTO MISC题解（一）

陇剑杯 2021刷题记录_[陇剑杯 2021]签到-CSDN博客 [陇剑杯 2021]签到 下载附件压缩包&#xff0c;解压后得到 后缀为.pcpang&#xff0c;为流量包&#xff0c;流量分析&#xff0c;使用wireshark打开 {NSSCTF} [陇剑杯 2021]签到 详解-CSDN博客 选择统计里面的协议分级 发现流…
阅读更多...
JVMの堆、栈内存存储

JVMの堆、栈内存存储

1、JVM栈的数据存储 通过前面的学习&#xff0c;我们知道&#xff0c;将源代码编译成字节码文件后&#xff0c;JVM会对其中的字节码指令解释执行&#xff0c;在解释执行的过程中&#xff0c;又利用到了栈区的操作数栈和局部变量表两部分。 而局部变量表又分为一个个的槽位&…
阅读更多...
接口的应用、 适配器设计模式

接口的应用、 适配器设计模式

接口的应用 适配器设计模式 Inter package com.itheima.a09;public interface Inter {public abstract void show1();public abstract void show2();public abstract void show3();public abstract void show4();}InterAdapter package com.itheima.a09; //抽象 public abs…
阅读更多...
WPF中读取Excel文件的内容

WPF中读取Excel文件的内容

演示效果 实现方案 1.首先导入需要的Dll(这部分可能需要你自己搜一下) Epplus.dll Excel.dll ICSharpCode.SharpZipLib.dll 2.在你的解决方案的的依赖项->添加引用->浏览->选择1中的这几个Dll点击确定。(添加依赖) 3.然后看代码内容 附上源码 using Excel; usi…
阅读更多...
苍穹外卖笔记-08-套餐管理-增加，删除，修改，查询和起售停售套餐

苍穹外卖笔记-08-套餐管理-增加，删除，修改，查询和起售停售套餐

套餐管理 1 任务2 新增套餐2.1 需求分析和设计接口设计setmeal和setmeal_dish表设计 2.2 代码开发2.2.1 根据分类id查询菜品DishControllerDishServiceDishServiceImplDishMapperDishMapper.xml 2.2.2 新增套餐接口SetmealControllerSetmealServiceSetmealServiceImplSetmealMa…
阅读更多...
阿里通义千问，彻底爆了！（本地部署+实测）

阿里通义千问，彻底爆了！（本地部署+实测）

点击“终码一生”&#xff0c;关注&#xff0c;置顶公众号 每日技术干货&#xff0c;第一时间送达&#xff01; 问大家一个问题&#xff1a;你是否想过在自己的电脑上部署一套大模型&#xff1f;并用自己的知识库训练他&#xff1f; 阿里通义千问今天发布了最新的开源大模型系…
阅读更多...
【转】ES， 广告索引

【转】ES， 广告索引

思考&#xff1a; 1&#xff09;直接把别名切换到上一个版本索引 --解决问题 2&#xff09;广告层级索引如何解决&#xff1f; -routing、join 3&#xff09;查询的过程&#xff1a;query and fetch, 优化掉fetch 4&#xff09;segment合并策略 5&#xff09;全量写入时副…
阅读更多...
二轴机器人大米装箱机：技术创新引领智能包装新潮流

二轴机器人大米装箱机：技术创新引领智能包装新潮流

在科技日新月异的今天&#xff0c;自动化和智能化已成为各行各业追求高效、精准生产的关键。作为粮食加工行业的重要一环&#xff0c;大米装箱机的技术创新与应用价值日益凸显。其中&#xff0c;二轴机器人大米装箱机以其高效、稳定、智能的特点&#xff0c;成为市场的新宠。星…
阅读更多...
IT学习笔记--Flink

IT学习笔记--Flink

概况&#xff1a; Flink 是 Apache 基金会旗下的一个开源大数据处理框架。目前&#xff0c;Flink 已经成为各大公司大数据实时处理的发力重点&#xff0c;特别是国内以阿里为代表的一众互联网大厂都在全力投入&#xff0c;为 Flink 社区贡献了大量源码。 Apache Flink 是一个…
阅读更多...
SQL进阶day10————多表查询

SQL进阶day10————多表查询

目录 1嵌套子查询 1.1月均完成试卷数不小于3的用户爱作答的类别 1.2月均完成试卷数不小于3的用户爱作答的类别 ​编辑1.3 作答试卷得分大于过80的人的用户等级分布 2合并查询 2.1每个题目和每份试卷被作答的人数和次数 2.2分别满足两个活动的人 3连接查询 3.1满足条件…
阅读更多...
嵌入式Linux系统编程 — 2.1 标准I/O库简介

嵌入式Linux系统编程 — 2.1 标准I/O库简介

目录 1 标准I/O库简介 1.1 标准I/O库简介 1.2 标准 I/O 和文件 I/O 的区别 2 FILE 指针 3 标准I/O库的主要函数简介 4 标准输入、标准输出和标准错误 4.1 标准输入、标准输出和标准错误概念 4.2 示例程序 5 打开文件fopen() 5.1 fopen()函数简介 5.2 新建文件的权限…
阅读更多...
分享：各种原理测厚仪的发展历程！

分享：各种原理测厚仪的发展历程！

板材厚度的检测离不开测厚仪的应用&#xff0c;目前激光测厚仪、射线测厚仪、超声波测厚仪等都已被广泛的应用于板材生产线中&#xff0c;那你了解他们各自的发展历程吗&#xff1f; 激光测厚仪的发展&#xff1a; 激光测厚仪是随着激光技术和CCD&#xff08;电荷耦合器件&…
阅读更多...
如何挑选最适合你的渲染工具

如何挑选最适合你的渲染工具

随着技术的发展&#xff0c;云渲染平台逐渐成为设计师、动画师、影视制作人员等创意工作者的得力助手。然而&#xff0c;市场上的云渲染平台种类繁多&#xff0c;如何选择最适合自己的渲染工具成为了一个需要认真考虑的问题。 在挑选适合自己的云渲染工具时&#xff0c;我们需…
阅读更多...
tomcat10部署踩坑记录-公网IP和服务器系统IP搞混

tomcat10部署踩坑记录-公网IP和服务器系统IP搞混

1. 服务器基本条件 使用的阿里云服务器&#xff0c;镜像系统是Ubuntu16.04java version “17.0.11” 2024-04-16 LTS装的是tomcat10.1.24阿里云服务器安全组放行了&#xff1a;8080端口 服务器防火墙关闭&#xff1a; 监听情况和下图一样&#xff1a; tomcat正常启动&#xff…
阅读更多...
Vue2(0基础入门)

Vue2(0基础入门)

环境准备 安装脚手架 vuecli: npm install -g vue/clivite: npm init vuelatest-g 全局安装&#xff0c;任意目录都可以使用vue脚本 进入目录创建项目&#xff1a; 在目录的终端输入&#xff1a;vue ui安装devtool(这个网页是安装好了自动跳转的) 运行项目&#xff1a; …
阅读更多...
MS1112驱动开发

MS1112驱动开发

作者简介&#xff1a; 一个平凡而乐于分享的小比特&#xff0c;中南民族大学通信工程专业研究生在读&#xff0c;研究方向无线联邦学习 擅长领域&#xff1a;驱动开发&#xff0c;嵌入式软件开发&#xff0c;BSP开发 作者主页&#xff1a;一个平凡而乐于分享的小比特的个人主页…
阅读更多...
Mysql基础进阶速成2

Mysql基础进阶速成2

看着篇文章之前先看我的前一章&#xff1a;MySQL基础进阶速成1 函数&#xff1a; 每个字段使用一个函数&#xff1a;select 函数(字段名)from 表名 upper&#xff1a;将字符串中的字母大写 lower&#xff1a;将字符串中的字符小写 max&#xff1a;得到最大值 min&#xf…
阅读更多...
力扣hot100：295. 数据流的中位数（两个优先队列维护中位数）

力扣hot100：295. 数据流的中位数（两个优先队列维护中位数）

LeetCode&#xff1a;295. 数据流的中位数 这个题目最快的解法应该是维护中位数&#xff0c;每插入一个数都能快速得到一个中位数。 根据数据范围&#xff0c;我们应当实现一个 O ( n l o g n ) O(nlogn) O(nlogn)的算法。 1、超时—插入排序 使用数组存储&#xff0c;维持数…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023