Web前端—移动Web第三天（移动Web基础、rem、less、综合案例—极速问诊）

已于 2023-11-23 15:18:43 修改
阅读量958 收藏 6
点赞数 14
分类专栏： 前端学习笔记（自用） 文章标签： 前端 less css html 前端框架
于 2023-11-20 20:51:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65106708/article/details/134518459
版权

版本说明

当前版本号[20231120]。

版本修改说明
20231120初版

本课程的笔记已经更新完毕，各位可以通过点击《黑马程序员2023新版前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选》学习笔记总目录查看所有知识点，同时也能免费下载学习笔记和配套资料。

目录

文章目录

移动 Web 第三天

01-移动 Web 基础

谷歌模拟器

模拟移动设备，方便查看页面效果

1681811083202

屏幕分辨率

分类：

  • 物理分辨率：硬件分辨率（出厂设置）
  • 逻辑分辨率：软件 / 驱动设置

结论：以后编写代码时就要参考 逻辑分辨率 来制作了。

1681811157520

视口

作用：显示 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倍（不缩放）

二倍图

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

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

使用方法：

image-20231119150753537

适配方案

  • 宽度适配：宽度自适应

    • 百分比布局
    • Flex 布局

  • 等比适配：宽高等比缩放

    • rem
    • vw

02-rem

简介

  • rem单位，是相对单位

  • rem单位是相对于HTML标签的字号计算结果

    如：此时我们给html标签大小为font-size:30px ， 而width:5rem; height: 3rem;最后盒子在移动端显示的大小就是（30* 5）*（30*3）=150 * 90 pxc 了。

  • 1rem = 1HTML字号大小

1、看看是否能等比例缩小/放大，看移动端的适配效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 5rem;
            height: 5rem;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div> </div>
    <script src="../js/flexible.js"></script>
</body>
</html>

就可以发现可以等比例缩小了。

image-20231119152118871

媒体查询

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

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

1681811369469

@media (width:320px) {
  html {
    background-color: green;
  }
}

通过对比，可以看到，符合视口宽度的背景颜色才会变成绿色，不符合的不会。

image-20231119153508734

rem 布局

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

1681811438512

flexible.js

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

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

【意思主要是在自己写代码的时候就不用自己写媒体查询了。】

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

rem 移动适配

rem单位尺寸

  1. 确定基准根字号
  • 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
  • 目前大部分视口宽度为375，所以基准根字号可以旋转37.5
  1. rem单位的尺寸
  • rem单位的尺寸 = px单位数值 / 基准根字号

在上面我们可以看到，求rem的尺寸特别的麻烦，每一个都要除以37.5，这时我们就可以使用less去统一的操作。

03-less

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

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

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

1681811545628

注释

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

运算

  • 加、减、乘直接书写计算表达式
  • 除法需要添加 小括号 或 . （注：但使用 . 这种用法的话，会出现红色波浪线，易让你以为是报错的代码提示 ）
  • 表达式存在多个单位以第一个单位为准

1681811616094

嵌套

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

1681811640347

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

1681811659709

如下图所示：

image-20231119162416698

有例外，如：&表示的是当前选择器，代码写到谁的大括号里面就表示谁，不会生成后代选择器。

image-20231119170454574

变量

概念：容器，存储数据

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

语法：

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

导入

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

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

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

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

注：这里是在less文件中导入别的less文件哦，并不是在html文件中导入！html文件是不可以导入less文件的，可以把less文件转成css文件才能进行导入！

导出

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

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

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

禁止导出

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

1681811772496

04-综合案例-极速问诊

1681811796608

准备工作

  • 项目目录

1681811827562

1、建立 less 文件，并导出成 css 文件。

// out: ../css/

@import "./base.less";

image-20231119204626580

下图便是 /base.less 转的 /base.css 。

image-20231119204650448

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

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

头部布局

  • 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);
}

根据设计图，一步步来弄：

image-20231119205115812

头部内容

  • 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;
}

1、建立好框架。

<body>
    <!-- 头部 -->
    <header>1</header>

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

/* 头部 */
header{
     height: (44 / 37.5rem);
    background-color: pink;
}

image-20231119210417305

2、将头部的文字填充好，并设置好居中的位置。

<!-- 头部 -->
    <header>
        <a href="#" class="back">1</a>
        <h3>极速问诊</h3>
        <a href="#" class="note">问诊记录</a>
    </header>

/* 头部 */
header{
    display: flex;
    justify-content: space-between;
    height: (44 / 37.5rem);
    background-color: pink;
}

image-20231119211017058

3、设置好内边距。

padding: 0 (15 / 37.5rem);

image-20231119211139842

4、设置行高。

line-height: (44 / 37.5rem);

image-20231119211317253

5、再定义。

/* 定义变量 */
@rootSize:37.5rem;

/* 头部 */
header{
    display: flex;
    justify-content: space-between;
    padding: 0 (15 / @rootSize);
    height: (44 / @rootSize);
    line-height: (44 / @rootSize);
    background-color: pink;
}

<a href="#" class="back"><span class="iconfont icon-left"></span></a>

image-20231119212059538

6、将文字的大小尺寸修改好。

header .back{
    font-size: (22 / @rootSize);
}

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

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

image-20231119212555884

7、把背景颜色注销掉后，便是我们想要的背景。

image-20231119212734946

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;
    }
  }
}

1、插入图片。

<!-- banner区域 -->
    <div class="banner">
        <img src="./assets/entry.png" alt="">
        <p><span>20s</span> 快速匹配专业医生</p>
    </div>

// bannner区域
.banner{
    text-align: center;
}

image-20231120142931213

2、使文字部分与图片之间有间隔。

margin-top: (30 / @rootSize);
margin-bottom: (34 / @rootSize);

image-20231120143129409

3、设置宽高。

img{
        height: (206 / @rootSize);
        width: (240 / @rootSize);
    }

image-20231120143450210

4、图片加上底部外边距。

margin-bottom: (18 / @rootSize);

image-20231120143646361

5、修改好字体的大小。

p{
        font-size: (16 / @rootSize);

        span{
            color: #16C2A3;
        }
    }

image-20231120144026435

问诊类型布局

  • 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);
    }
  }
}

1、添加两个li标签，用于装放问诊类型。

<!-- 问诊类型 -->
    <div class="type">
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
    </div>

// 问诊类型
.type{
    padding: 0 (15 / @rootSize);
}

image-20231120144353651

2、设置内边距，边框圆角，底部外边距。

// 问诊类型
.type{
    padding: 0 (15 / @rootSize);

    li{
        height: (78 / @rootSize);
        border: 1px solid #EDEDED;
        border-radius: (4 / @rootSize);
        margin-bottom: (15 / @rootSize);
    }
}

image-20231120144733536

3、在li标签里再加上内边距的要求。

padding: 0 (15 / @rootSize);

image-20231120145020840

4、使类型中的三块内容在flex布局中放在一起。

<li>    
                <a href="">
                    <div class="pic">1</div>
                    <div class="txt">2</div>
                    <span class="iconfont icon-right"></span>
                </a>
            </li>

 a{
            display: flex;
  }

image-20231120145944368

5、将名为"a"的元素设置为弹性布局容器，将子元素的垂直对齐方式设置为居中对齐。

a{
            display: flex;
            align-items: center;
            height: (78 / @rootSize);
        }

image-20231120150230839

问诊类型内容

  • 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);
}

1、插入小图片。

<div class="pic">
                        <img src="./assets/type01.png" alt="">
                    </div>

 img{
                margin-right: (14 / @rootSize);
                height: (40 / @rootSize);
                width: (40 / @rootSize);
            }

image-20231120150735566

2、将其在其父容器中的弹性大小设置为1，即它们将平均分配父容器的空间。

.txt{
                flex: 1;
            }

image-20231120151057399

3、将两段文字及字节图标放在一起。

h4{
                    font-size: (16 / @rootSize);
                    line-height: (24 / @rootSize);
                    color: #3C3E42;
                    margin-bottom: (4 / @rootSize);
                }

                p{
                    font-size: (13 / @rootSize);
                    line-height: (20 / @rootSize);
                    color: #848484;
                }

.iconfont{
                font-size: (16 / @rootSize);
            }

image-20231120152212242

4、补充好内容。

<li>    
                <a href="">
                    <div class="pic">
                        <img src="./assets/type02.png" alt="">
                    </div>
                    <div class="txt">
                        <h4>普通图文问诊</h4>
                        <p>二甲主治及以上级别医生</p>
                    </div>
                    <span class="iconfont icon-right"></span>
                </a>
            </li>

image-20231120152516488

需要完整源码，可点击 点我查看 跳转，进行下载。

放下华子我只抽RuiKe5
关注
  • 14
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
移动web开发之自适应布局解决方案一: less+媒体查询+rem
qq_37635012的博客
12-11 1060
移动端自适应解决方案之rem和媒体查询
移动WEB开发_rem布局01-rem单位.html
04-14
移动WEB开发
前端移动Web第三天知识点：rem适配布局以及Less-课堂code.zip
04-18
前端移动Web第三天知识点：rem适配布局以及Less-课堂源代码。
前端web入门-移动web-day10-rem适配与less讲解
来自计科大一萌新的编程记录本
07-04 728
了解移动web基础，学会用rem适配移动端，了解less
web前端基础——rem移动适配
NGUP_LEE的博客
03-11 2897
文章目录1、rem是什么？2、rem媒体查询3、不同设备移动适配4、rem——flexible移动适配 1、rem是什么？ rem是目前好多企业都在使用的移动端界面的适配方案，是一种尺寸单位 rem单位 相对单位 rem单位是相对于HTML标签的字号计算结果 1rem = 1HTML字号大小 网页的根就是 html 标签 样例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8
移动web一 屏幕适配
jiuchabaikaishui的专栏
05-04 990
默认 cssrem 插件将16px转换为1rem，这在绝大部分情况下是不能满足开发要求的（比如按照750的设计稿开发，由于flexible.js将屏幕分成10等分，也就是说1rem等于屏幕的十分之一，那么就是75px）。它在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了CSS 的编写，并且降低了CSS 的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。原理，就是直接在link中判断设备的尺寸，然后引用不同的 css 文件。
移动web开发rem适配布局(rem+Less+媒体查询)
qq_49900295的博客
03-24 1267
文章目录移动端基础meta视口标签物理像素&物理像素比移动端多倍图做法移动端css初始化移动端特殊样式rem 单位rem适配布局原理媒体查询什么是媒体查询语法规范注意mediatype 查询类型关键字媒体特性媒体查询+rem实现元素动态大小变化案例引入资源语法规范案例Less基础什么是LessLess变量语法规范：变量命名规范：Less编译 移动端基础 meta视口标签 我们在移动端开发时都要加上这句话： <meta name="viewport" content="width=device-
移动Web开发基础-rem布局
前端向朔
11-15 2565
前言在了解了基本的布局方案 移动Web开发基础-百分比+flex布局方案 之后，我们来了解下利用rem这个css单位来布局的方案。 其实不管哪种方案，最终的目的都是为了适配不同设备尺寸的屏幕显示。基本认识1.px是布局当中的css像素 2.em是相对父元素大小的单位，可以用来设置字体，行高，缩进等一些css属性 3.rem是根据根元素，也就是HTML元素的字体大小来计算的，因为rem单位都是根
web前端开发时推荐用rem做单位
自酌一杯酒
06-09 1329
欢迎访问我的 个人博客 我之前做页面写css样式的时候一直用的 px 做单位，因为直接看着PC端的设计图标注多少像素就写多少像素。 直到做了一个内容宽度是1440px 大小的PC端设计图后，我感觉用 rem 做单位才是最好的选择（个人认为），不管开发的是PC端还是移动端，还是响应式页面。 下面我说下我对 rem 的看法，和我怎样使用 rem ，为什么推荐使用 rem 一、rem 单位 rem 是一个相对单位，相对根元素 <html>标签 字体大小的单位，一般浏览器默认的是 1rem = 16p
移动web开发-rem布局案例源码，html+css素材
02-16
移动web开发-rem布局案例源码，html+css素材
移动Web开发之 rem适配布局----苏宁首页案例制作
06-23
没做完....这是静态网页
移动WEB前端高级开发项目实战_移动网页样式布局_编程案例解析实例详解课程教程.pdf
05-22
随着手机等移动设备的普及,用户的使用场景开始大面积从PC端转移至移动端,Web前端的开发工作也更多地偏向移动端应用。所以,有效地掌握移动端网页样式布局,是成为一名合格前端开发工程序的必要条件。移动端因其较好的...
web前端基础——Less语法
NGUP_LEE的博客
03-11 9669
在使用rem对移动端界面布局进行适配时，需要完成px单位到rem单位的转换，这个过程中的除法运算对于界面中很多个标签时，是很麻烦的，但是CSS又不支持计算写法，那么有什么办法可以解决这个问题呢？ 文章目录1、Less语法简介2、Less语法的运算3、Less语法快速生成选择器4、Less变量设置属性值5、Less文件的导入与导出5.1 导入5.2 导出5.3 禁止导出 1、Less语法简介 Less是一个CSS预处理器，Less文件后缀是.less 扩充了CSS语言，使CSS具备一定的逻辑性、计算能力.
最新前端教程：Web前端HTML5+CSS3+移动Web
Aa112233aA1的博客
07-19 696
前端入门基础教程：Web前端HTML5+CSS3+移动Web 配套资料：链接：https://pan.baidu.com/s/1Wvi-__pNUUGZcLjlYm5zsA 提取码：3ola 适用人群： 1.对前端开发感兴趣的在校生及应届毕业生。 2.对目前职业有进一步提升要求，希望从事前端行业高薪工作的在职人员。 3.对前端行业感兴趣的相关人员。 教程内容： 一、HTML 01-认知 1. HTML的基本语法 2. HTML的排版标签 3. 绝对路径和相对路径 4. HTML的多媒体标签 5. HTML的
【Web】CTFSHOW 中期测评刷题记录(1)
uuzeray的博客
05-02 1705
访问./cache/6a992d5529f459a44fee58c733255e86.php，命令执行拿flag。login.php是在./templates下的，而./flag.php与./templates均为web目录。注意到用./template/error.php中存在{{username}}，可以用其cache来写马。这时候重开下靶机再去读./templates/index.php，发现是给了提示的。访问./config/settings.php，命令执行拿到flag。
50个前端实战项目之04：隐藏的搜索小组件
前端开发博客
05-03 1094
大家好，我是宝哥。今天讲50个前端实战项目之04：隐藏的搜索小组件。源码下载地址https://github.com/bradtraversy/50projects50days/tree/master/hidden-search前端实战项目系列正在更新：04/5001：可展开卡片02：进度条03：旋转导航动画04：隐藏的搜索小组件项目介绍本项目演示了一个简洁实用的隐藏式搜索小部件。点击搜索按钮后，...
前端Vue 后端FastApi 跨域 CORS
最新发布
weixin_44656422的博客
05-06 307
前端是localhost:3000,后端是localhost:8000 ，就是跨域了。
一对一WebRTC视频通话系列（一）—— 创建页面并显示摄像头画面
君莫笑lucky的博客
05-02 502
本系列博客主要记录WebRtc实现过程中的一些重点，代码全部进行了注释，便于理解WebRTC整体实现。
web前端中文字的设置
09-03
Web前端中文字的设置可以通过CSS样式来实现。可以使用font-family属性来设置字体，font-size属性来设置字号，line-height属性来设置行高，letter-spacing属性来设置字间距，word-spacing属性来设置单词间距等等。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

放下华子我只抽RuiKe5

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值