➷ 02 H5C3-移动web

➷ 02 H5C3-移动web(基础篇)

Day❶ 移动端开发布局

• 字体图标
  图标库：https://www.iconfont.cn/ (阿里)
  • 引入方式1 —本地文件
    1. fonts← iconfont四个文件夹(复制)
    2. ; 网页头部引入字体css文件;
    3. ; iconfont是图标的font-family属性,icon-xxx对应具体使用的图标;
  • 引入方式2 —在线文件链接
    1. 图标库项目里生成在线链接: at.alicdn/t/font_xxxx.css;
    2. ;将在线链接引入页面
    3. ; 用类名引用字体图标 ★； &#ex8d0 ; 用unicode编码引用图标；
  • 引入方式3 —伪元素
    1. .car::after{ content:“\e7b2”};
    2. 在伪元素父盒子.car上添加类名iconfont;
• 2D平面转换—transform
  margin移动盒子会把其他盒子挤走; transform移动不影响其他盒子布局;
  应用场景：如轮播图动画;
  • 位移
    transform:translate(x轴距离,y轴距)
    transform:translateX/Y(50%)；
    (移动距离百分比,为盒子自身宽度/高度的50%)
    ★ 对行内元素,如span无效;
  • 旋转
    transform:rotate(45deg);
    (正数顺时针，负数逆时针旋转45°)；
    transform-origin:x y;
    (设置旋转的中心点，默认的是(50% 50%),还可以设置像素/方位名词)；
  • 缩放
    transform:scale(x轴倍数,y轴倍数);
    transform:scale(2); 整体放大一倍;
    transform-origin:x y;(改缩放中心点)
  • 多重变化综合写法
    transform:translate (150px,50px) rotate(180deg) scale(1.2)
    (顺序不同,转换效果不同)
  • 渐变
    background-image:linear-gradient { to bottom, 颜色1,颜色2 };
    第一个参数可以设置渐变方向;
• 3D空间转换
  • 3D空间
    (都是给父级盒子添加的属性)
    perspective:值； (透视,取值一般800～1200之间)
    transform-style:preserve-3d;
  • 位移
    transform:translate3d(x,y,z);
    transform:translateX/Y/Z(100px);
    (x,y轴移动可用px或%; z轴正值向屏幕外,单位一般用px,近大远小近清楚远模糊);
  • 旋转
    transform:rotateX/Y/Z(45deg);
    transform:rotate3d(x,y,z,角度度数);
• 动画
  • 优点：可以不用鼠标触发,自动+反复地执行某些动画;

  • 定义动画
    @keyframes 动画名称 {
    0%/from { }
    100%/to { }
    }

  • 调用动画
    animation-name: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态；
    
    

  • 鼠标经过动画暂停
    animation-play-state:paused;

  • 多组动画（逗号隔开）
    animation:run 2s stps(12) infinite,move 5s linear forwards;

Day❷ 移动端开发特点

• 移动端和PC端区别

  • PC端
    1. 屏幕大,版心固定;
    2. 浏览器多,考虑兼容性问题;
  • 移动端
    1. 手机屏幕小,开发宽度多为100%适配手机屏幕;
    2. 不用考虑兼容性问题,多使用CSS新特性;

• 移动端调试
  谷歌模拟器;
  搭建本地web服务器，服务器和手机在一个局域网内，再用手机访问服务器；
  使用外网服务器，直接IP或域名访问；

• 分辨率
  屏幕尺寸:xx英寸; (屏幕对角线长度)
  【物理分辨率】硬件分辨率;
  【逻辑分辨率】开发中用的px;
  〖PC端〗1物理分辨率=1px;
  〖移动端〗2物理分辨率=1px;

• 视口

  • 三种视口
    『布局视口』早期默认980px,元素压缩到手机屏幕上显示会变得很小；
    『视觉视口』类似可操作的手机屏幕区域；
    ★ 理想视口：网页宽度(布局视口)可以根据手机屏幕宽度(视觉视口)显示;
  • 视口标签语法
    

• 二倍图
  假设屏幕尺寸667×375,丢一张图片50×50按手机物理像素1334×750渲染放大会显示模糊;

  • 背景图片缩放
    background-size:图片宽度 图片高度;
    background-size:50% (相对父级盒子的50%，不是图片本身的50%)；
    background-size:cover/contain;

Day❸ 移动端布局 —Flex

• 移动端常见布局方案
  • 单独制作移动端页面
    • 流式布局(百分比布局)；
    • flex弹性布局 ★
    • rem布局 (+媒体查询+less)；
  • 响应式页面兼容移动端
    (开发成本高,需要协调兼容性问题; 用的不多)
    • bootstarp(响应式框架)；
• 流式布局(百分比布局) ← 逐渐淘汰✘
  部分盒子宽度可以用百分比表示，其他很多布局模式和PC端类似；
• flex布局(弹性布局) ★
  • 案例：小兔鲜儿个人中心页面PC
  • flex布局特点
    1. 不区别块元素、行内元素、行内块元素,都可以直接设置宽高;
    2. flex模式下盒子不脱标,无须清除浮动;
    3. flex布局原理:通过给父盒子添加flex属性来控制子元素排列方式；
  • flex父元素属性
    • display:flex;
      (给上一级父盒子添加,亲爸爸)
    • 当父盒子设为flex布局后，子元素的float、clear、vertical-align失效;

flex父元素属性
flex-direction	主轴方向	row(默认)、column、 row-reverse(行,右向左)、column-reverse(列,下到上)
justify-content	主轴元素对齐方式	flex-start、flex-end、center、space-around(缝隙10 20 10)、space-between(0 20 0)、space-evenly(10 10 10)
flex-wrap	是否换行	nowrap(默认不换)、wrap(换行)
align-items	侧轴元素对齐方式	flex-start、flex-end(逆序) 、center、stretch(默认值:拉伸填充)
align-content	侧轴元素对齐方式（+wrap换行使用; 针对多行子元素）	flex-start、center、space-around、space-between
flex-flow	复合属性	column wrap;(两个属性简写)

flex子元素属性
flex	伸缩比 (占剩余空间几份)	有flex:1和width时,优先执行flex:1
align-self	单个子元素自身对齐位置
order	项目排列顺序	(默认数值0,数字越小越前)

Day❹ 移动端布局 —Rem

rem布局的意义
流式布局和flex布局只实现宽度适配,无法解决高度适配的问题;

• 两种主流方案
  flex+rem：目前多数企业在用,如小米移动端;
  flex+vw/vh：未来的解决方案,如B站移动端;

• 方案1：rem单位布局
  • 案例：游乐园首页移动端
  • rem单位
    1 rem = 1个html字号大小;
    通常html字号设置为视口宽度的1/10;
  • 媒体查询——适配屏幕设置不同的html标签字号
    @media (媒体特性) {
    选择器 { CSS属性; }
    };
    • flexible.js 适配移动端的js库；
      (原理：根据不同的设备宽度,给html根节点设置不同的font-size)
  • LESS
    • 浏览器不识别less,写完后转成css格式引入页面;
      添加vscode插件：easy less;
      (自动将.less文件编译保存为css文件)
    • LESS运算
      除法要用( )包起来,运算时两数单位不一样的以第一个为准;
      嵌套样式时,用&搭配伪类/伪元素使用;
      • less变量
        对于一些重复使用的属性值;
        定义变量：@变量名:值;
        @font14:14px
        使用变量：
        div { font-size:@font14; }
        (变量名规则：@为前缀; 不包含特殊字符; 不以数字开头; 大小写敏感)
      • less文件导入
        将base.less/commen.less导入→index.less中;
        @import url(base.less);
        @import “common”;
      • less导出至单独css文件夹
        “less.compile”: {
        “out”:“…/css/”
      • cssrem初始页面字体大小16px,可在setting里设置：cssrem.rootFontSize:32px);
• 方案2：vw/vh (比rem香)
  • 案例：bilibili首页移动端
  • viewport width/height
    1 vw = 1/100视口宽度;
    vh一般不咋用(通常图片需要等比例缩放,同时用vw和vh会比较混乱);

Day❺ 移动端布局 —Bootstrap

• 案例：腾讯首页
  • 开发成本高,要协调兼容性问题;
    重点：“学习使用UI框架”,后面还有更好用的框架 饿了么和vant;
  • 媒体查询
    根据设备宽度的变化,设置差异化样式;
    min-width (从小到大写)
    max-width (从大到小写)
    • 语法
      @media 关键词 媒体类型 and (媒体特性) {
      css代码
      }
    • 设备尺寸划分

设备类型	宽度
超小屏幕(手机)	<768px
小屏设备(平板)	768px～992px;设置宽度750px;
中等屏幕(桌面显示器)	992px~1200px;设置宽度970px;
宽屏设备(大桌面显示器)	>=1200px;设置宽度1170px;

样式调用
<link rel="stylesheet" href="./css/pad.css" media="(min-width:768px)">
大于768px宽度时,调用pad.css;

• Bootstrap开发框架
  【UI框架】将常见效果封装后形成的一套代码;
  【BootStrap】Twitter公司开发维护,稳定性高;
  • Bootstrap栅格系统
    1. 在html中引入bootstrap.css;
    2. 内部预设了normalize(增强浏览器表现一致性),不需要单独引入;
    3. 通过改变元素类名提取相关样式;
    4. 栅格系统默认将网页横向分成12等份;

• 列偏移

     <div class="col-lg-3">左侧</div>
     <div class="col-lg-5 col-lg-offset-4">右侧</div>
     (将右侧盒子向右移动4格)
  

• 列嵌套
  从父盒子的角度,又划分成12等份给里面的子盒子;