移动 Web学习

Lodash中文文档
swiper官网

移动 Web学习

移动适配

移动适配方案

  • rem
  • vw

谷歌模拟器

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

屏幕分辨率

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

    19201080

    1366
    768

    ……
  • 缩放150%
    1920/150%

    1080/150%
  • 总结
    * 硬件分辨率 → 物理分辨率(出厂设置)
    * 缩放调节的分辨率 → 逻辑分辨率(软件/驱动设置)
手机型号物理分辨率逻辑分辨率比例关系
iPhone3GS320 * 480320 * 4801:1
iPhone4640 * 960320 * 4802:1
iPhone5640 * 1136320 * 5682:1
iPhone6/7/8750 * 1334375 * 6672:1
iPhone6/7/8 Plus1080 * 1920414 * 7362.6:1
iPhone11Pro/X/XS1125 * 2436375 * 8123:1
iPhone11/XR828 * 1792414 * 8962:1
iPhone11 Pro Max/XS Max1242 * 2688414 * 8963:1
iPhone12 mini1080 * 2340360 * 7803:1
iPhone12/iPhone12 Pro1170 * 2532390 * 8443:1
iPhone12 Pro Max1284 * 2778428 * 9263: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布局

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

vh单位问题

  1. 开发中,vw和vh不能混用
  2. vh是1/100视口高度,全面屏视口高度尺寸大,如果混用可能导致盒子变形
  3. 开发时,一般使用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
  1. 媒体类型:是用来区分设备类型的,如屏幕设备、打印设备等,其中手机、电脑、平板都属于屏幕设备
类型名称
描述
屏幕screen带屏幕的设备
打印预览print打印预览模式
阅读器speech屏幕阅读模式
不区分类型all默认值,包括以上3种情形
  1. 媒体特性:主要用来描述媒体类型的具体特征,如当前屏幕的宽高、分辨率、横屏或竖屏等。
特性名称
属性
视口的宽和高width、 height数值
视口的最大宽和高max-width、max-height数值
视口的最小宽和高min-width、min-height数值
屏幕方向orientationportrait:竖屏
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 - 使用

使用步骤:

  1. 引入Bootstrap CSS 文件
<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
  1. 调用类名: container: 响应式布局版心类
<div class="container">测试</div>
Bootstrap - 栅格系统

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

例如:一行排4个盒子,则每个盒子占 3份 即可(12/4 = 3)

Breakpoint
Class infix
Dimensions
Extra smallNone<576px
Smallsm≥576px
Mediummd≥768px
Largelg≥992px
Extraxl≥1200px
Extra extra largexx1≥1400px

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

xs
<576px
sm
≥576px
md
≥768px
lg
≥992px
xl
≥1200px
xxl
≥1400px
Container max-widthNone(auto)540px720px960px1140px1320px
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/

  1. 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>
  1. 表格类

    官方文档:https://v5.bootcss.com/docs/content/tables/

    • table: 默认样式
    • table-striped: 隔行变色
    • table-success: 表格颜色
    • ……

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

Bootstrap - 组件(Components)
  1. 引入样式表
  2. 引入js文件
  3. 复制结构,修改内容
Bootstrap - 字体图标

下载:

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

使用:

  1. 复制 fonts文件夹到项目目录
  2. 网页引入 bootstrap-icons.css 文件
  3. 调用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
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值