移动 Web学习

零.零

已于 2024-05-10 09:50:15 修改

阅读量165

点赞数 1

分类专栏：前端学习学习笔记文章标签：学习 web

于 2023-06-28 15:57:47 首次发布

本文链接：https://blog.csdn.net/Peng_jj/article/details/131438860

版权

学习笔记同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

前端学习

10 篇文章 0 订阅

订阅专栏

Lodash中文文档
 swiper官网

移动 Web学习

移动适配

移动适配方案

谷歌模拟器

检查 -> 切换到仿真设备 -> 刷新

屏幕分辨率

屏幕分辨率:纵向横向上的像素点数,单位是px
PC分辨率:
……　

19201080

1366768

……
缩放150%
1920/150%

1080/150%
总结
*　硬件分辨率 → 物理分辨率（出厂设置）
*　缩放调节的分辨率 → 逻辑分辨率（软件/驱动设置）

手机型号	物理分辨率	逻辑分辨率	比例关系
iPhone3GS	320 * 480	320 * 480	1:1
iPhone4	640 * 960	320 * 480	2:1
iPhone5	640 * 1136	320 * 568	2:1
iPhone6/7/8	750 * 1334	375 * 667	2:1
iPhone6/7/8 Plus	1080 * 1920	414 * 736	2.6:1
iPhone11Pro/X/XS	1125 * 2436	375 * 812	3:1
iPhone11/XR	828 * 1792	414 * 896	2:1
iPhone11 Pro Max/XS Max	1242 * 2688	414 * 896	3:1
iPhone12 mini	1080 * 2340	360 * 780	3:1
iPhone12/iPhone12 Pro	1170 * 2532	390 * 844	3:1
iPhone12 Pro Max	1284 * 2778	428 * 926	3:1

视口

手机屏幕尺寸不同，网页宽度均为100%
网页的宽度和逻辑分辨率尺寸相同
视口：显示HTML网页的区域，用来约束HTML尺寸

<!-- width=device-width : 视口宽度 = 设备宽度-->
<!-- initial-scale=1.0 ： 缩放1倍（不缩放）-->
<!--  视口标签 (会自动生成)-->
<!-- 视口标签：规定HTML的尺寸，让HTML的宽度 = 逻辑分辨率的宽度/设备的宽度 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

二倍图

概念：设计稿里面每个元素的尺寸的倍数
作用：防止图片在高分辨率屏幕下模糊失真
现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿
二倍图设计稿尺寸：750px

适配方案

宽度适配：宽度自适应
- 百分比布局
- Flex布局
等比适配：宽高等比缩放
- rem
- vw

移动适配 - rem

rem单位，是相对单位
rem单位是相对于HTML标签的字号计算结果
1rem = 1HTML字号大小

/* 1. 给HTML标签添加字号 */
html {
    font-size:30px 
}
/* 2. 使用rem单位书写尺寸 */
.box {
    width: 5rem;
    height: 3rem;
    background-color: pink;
}

媒体查询

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

@media (媒体特性) {
    选择器 {
        CSS属性
    }
}

HTML标签字号

设备宽度大，元素尺寸小
设备宽度小，元素尺寸大
目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的1/10

<!-- 视口宽度320px，根字号为32px -->
@media (width: 320px) {
    html {
        font-size: 32px;
    }
}

rem - flexible.js

flexible.js是手淘开发出的一个用来适配移动端的js库。
核心原理就是根据不同的视口宽度给网页中HTML根节点设置不同的font-size。

<body>
    ……
    <!-- script:脚本 -->
    <script src="./js/flexible.js"></script>
</body>

// flexible.js内容
(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

rem - 移动适配

工作中，书写代码的尺寸要参照设计稿尺寸——rem单位尺寸

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

目标：计算68px是多少个rem？ （设计稿适配375px视口）
    N * 375 = 68
    N = 68 / 375

/* 68px*29px盒子 */
div {
    width: 1.813rem;
    height: 0.773rem;
    background-color: pink;
}

移动适配 - less

Less 是一个CSS预处理器，Less文件后缀是.less。扩充了CSS语言，使CSS具备一定的逻辑性、计算能力
注意：浏览器不认识Less代码，目前阶段，网页要引用对应的CSS文件(后面有框架less)
VS Code插件：Easy Less，保存less文件后自动生成对应的CSS文件

less - 注释

单行注释
- 语法：//注释内容
- 快捷点：Ctrl + /
块注释
- 语法：/注释内容/
- 快捷键：Shift + Alt + A

less - 运算

运算：
- 加、减、乘直接书写计算表达式
- 除法需要添加小括号或 .
- 推荐使用小括号

width: (100px / 2);
width: 68px ./ 37.5rem;   //如表达式有多个单位，最终CSS里以第一个单位为准   此例为px

less - 嵌套

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

less 代码：

.父选择器 {
  //父级样式
  .子选择器 {
    //子级样式
  }
}

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

自动生成的css代码：

.father {
  color: red;
}
.father .son {
  width: 100px;
}
.father .son a {
  color: green;
}
.father .son a:hover {
  color: blue;
}

less - 变量

概念：容器、存储数据
作用：存储数据、方便实用和修改
语法：
- 定义变量: @变量名: 数据;
- 使用变量: CSS属性: @变量名;

/* 定义变量 */
@myColor: pink;

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

a {
  color: @myColor;
}

less - 导入

作用：导入less公共样式文件
语法：导入： @import “文件路径”;
提示：如果是less文件可以省略后缀

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

less - 导出

写法：在less文件的第一行添加: // out: 存储URL
提示：文件夹名称后面添加 /

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

less - 禁止导出

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

// out:false

移动适配 - vw

适配方案

相对单位
相对视口的尺寸计算结果
vw: viewport width
- 1vw = 1/100视口宽度 (1%视口宽度)
vh: viewport height
- 1vh = 1/100视口宽度

/* vw 和 vh 是相对视口宽高计算结果，可以直接实现移动端适配效果 */
/* .box {
    width: 50vw;
    height: 30vw;
    background-color: pink;
} */
.box {
    width: 50vh;
    height: 30vh;
    background-color: pink;
}

vw布局

确定设计稿对应的vw尺寸（1/100视口宽度)
- 查看设计稿宽度→确认参考设备宽度（视口宽度）→确定vw尺寸（1/100视口宽度)
vw单位的尺寸 = px单位数值 / (1/100视口宽度)

vh单位问题

开发中，vw和vh不能混用
vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能导致盒子变形
开发时，一般使用vw单位

响应式网页

解决方案：媒体查询、Bootstrap

媒体查询

媒体特性
- max-width: 最大宽度 <=
- min-width: 最小宽度 >=

@media (媒体特性) {
  选择器 {
    样式
  }
}

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

@media (min-width: 1200px) {
  html {
    background-color: pink;
  }
}

媒体查询 - 书写顺序

需求：

默认网页背景色是灰色
屏幕宽度大于等于 768px, 网页背景色是粉色
屏幕宽度大于等于 992px, 网页背景色是绿色
屏幕宽度大于等于 1200px,网页背景色是skyblue

提示：

min-width（从小到大）
max-width（从大到小）
不可打乱顺序书写（层叠覆盖）

/* 默认网页背景色是灰色 */
body {
    background-color: #ccc;
}
/* 屏幕宽度大于等于 768px, 网页背景色是粉色 */
@media (min-width: 768px){
    body {
        background-color: pink;
    }
}
/* 屏幕宽度大于等于 992px, 网页背景色是绿色 */
@media (min-width: 992px){
    body {
        background-color: green;
    }
}
/* 屏幕宽度大于等于 1200px,网页背景色是skyblue */
@media (min-width: 1200px){
    body {
        background-color: blue;
    }
}

媒体查询 - 完整写法

关键词媒体类型 and （媒体特性） { CSS 代码 }

关键词/逻辑操作符

and
only
not

媒体类型：是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备

类型名称	值	描述
屏幕	screen	带屏幕的设备
打印预览	print	打印预览模式
阅读器	speech	屏幕阅读模式
不区分类型	all	默认值，包括以上3种情形

媒体特性：主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等。

特性名称	属性	值
视口的宽和高	width、 height	数值
视口的最大宽和高	max-width、max-height	数值
视口的最小宽和高	min-width、min-height	数值
屏幕方向	orientation	portrait:竖屏 landscape: 横屏

媒体查询 - 外部CSS

逻辑符、媒体类型可以省略，小括号必须要有，否则不生效

<link rel="stylesheet" media="逻辑符媒体类型 and (媒体特性)" href="xx.css">

<!-- 视口宽度 小于等于768px 网页背景为粉色 -->
<link rel="stylesheet" media="(max-width: 768px)"href="pink.css">
<!-- 视口宽度 大于等于1200px 网页背景为绿色 -->
<link rel="stylesheet" media="(min-width: 1200px)"href="green.css">

Bootstrap

简介：Bootstrap是由Twitter公司开发维护的前端UI框架,它提供了大量编写好的CSS样式,允许开发者结合一定HTML结构及JavaScript,快速编写功能完善的网页及常见交互效果。

Bootstrap - 下载

中文官网：https://www.bootcss.com/

中文文档: https://v5.bootcss.com/docs/5.3/getting-started/introduction/

下载步骤：Bootstarp V5中文文档 → 进入中文文档 → 下载 → 下载Bootstrap生产文件

github无法连接：

修改 C:\Windows\System32\drivers\etc\hosts 文件
添加 140.82.121.4 https://github.com/

Bootstrap - 使用

使用步骤：

引入Bootstrap CSS 文件

<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">

调用类名: container: 响应式布局版心类

<div class="container">测试</div>

Bootstrap - 栅格系统

栅格化是指将整个网页的宽度分成12等份,每个盒子占用的对应的份数

例如：一行排4个盒子，则每个盒子占 3份即可（12/4 = 3）

Breakpoint	Class infix	Dimensions
Extra small	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra	xl	≥1200px
Extra extra large	xx1	≥1400px

Bootstrap5中，栅格系统划分了6个响应区间

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
Container max-width	None(auto)	540px	720px	960px	1140px	1320px
Class prefix	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-	.col-xxl-

常用布局类

col-*-*:列(例如：col-xxl-3)
row: 行

<!-- 
    视口宽度大于等于1200px,一行排4个盒子    
    视口宽度大于等于768px,一行排2个盒子
    视口宽度大于等于576px,一行排1个盒子
-->

<!-- 版心 → row → 子级 -->
<div class="container">
    <div class="row">
        <div class="col-xl-3 col-md-6 col-sm-12">1</div>
        <div class="col-xl-3 col-md-6 col-sm-12">2</div>
        <div class="col-xl-3 col-md-6 col-sm-12">3</div>
        <div class="col-xl-3 col-md-6 col-sm-12">4</div>
    </div>
</div>

代码提示插件：

IntelliSense for CSS class names in HTML
HTML CSS Support

Bootstrap - 全局样式

中文文档: https://v5.bootcss.com/docs/5.3/getting-started/introduction/

Button类

官方文档：https://v5.bootcss.com/docs/components/buttons/
- btn: 默认样式
- btn-success: 成功
- btn-warning: 警告
- ……
- 按钮尺寸：btn-lg / btn-sm

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

表格类

官方文档：https://v5.bootcss.com/docs/content/tables/
- table: 默认样式
- table-striped: 隔行变色
- table-success: 表格颜色
- ……

更多类可参考官方中文文档

Bootstrap - 组件（Components）

引入样式表
引入js文件
复制结构，修改内容

Bootstrap - 字体图标

下载：

导航 / Extend：图标库 → 安装 → 下载安装包 → bootstrap-icons-.X.X.zip
下载速度慢
- 可修改文件：C:\Windows\System32\drivers\etc\hosts
- 添加： 185.199.108.133 https://objects.githubusercontent.com/

使用：

复制 fonts文件夹到项目目录
网页引入 bootstrap-icons.css 文件
调用CSS类名(图标对应的类名)

可参考官方文档

<i class="bi bi-android2"></i>
<!-- 使用时前面bi可省略 -->
<i class="bi-android2"></i>

HTML学习
 Web移动端学习
 JS基础学习
 Web API学习
 JS进阶学习
 ajax学习
 Node.js与Webpack学习
 Git学习—学习中
 vue学习—学习中
 小程序学习—学习中

XML教学视频

零.零

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
移动 Web学习

移动端web学习
复制链接

扫一扫

专栏目录