复习（h5c3+移动web）

最新推荐文章于 2026-03-22 13:04:28 发布

原创最新推荐文章于 2026-03-22 13:04:28 发布 · 525 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

总结

本文主要复习了H5C3在移动Web中的应用，包括HTML5的新特性如语义化标签、本地存储和多媒体元素，CSS3的动画、转换、过渡属性，以及响应式布局和适配策略。还探讨了rem与em的区别，以及 vh 和 vw 视口单位在Vue项目中的应用。此外，提到了移动端的常见兼容性问题，如click事件延迟和CSS动画的优化方法。

##第一个阶段复习:H5C3+移动web

###1. H5是什么？

H5是html5，HTML5包含了HTML5，CSS3，JS等技术，可以说是一种技术的集大成者。新增了语义化标签，如

#####H5新增了以下的几大类元素:

内容元素: header , nav , footer , section
表单控件: calender , date , time , email , url , search
本地存储: localStorage 长期存储数据,浏览器关闭后数据不会丢失, SessionStorage 数据在浏览器关闭之后自动删除
媒介播放: video , audio
绘画使用: canvas

###2. C3是什么？

C3新特性有哪些?

动画: animation
2D,3D转换: transform
过度: transition
边框圆角:border-radius, 阴影:box-shadow
盒子模型: box-sizing
文字阴影: text-shadow
背景: background-size, background-origin背景图片原点
渐变: linear-gradient
伸缩布局: flex
颜色: rgba()

###3. h5新增的标签有哪些，是什么意思?（举例5种）

内容元素: 头部标签header , 导航标签nav ,底部标签 footer , 内容标签section，侧边栏标签aside

###4. h5新增常用的表单属性有哪些?（举例3种）

表单控件: 日历calender , 日期date , 时间time , 邮件email , 地址url , 搜索search

###5. C3里面你常用的选择器？举例一种

属性选择器 [attr]

伪类选择器

：link 未访问的

：visited 访问过的

：hover 鼠标悬停

：active 激活状态

：focus 获取焦点

###6. c3里面伪元素的写法？

::before 在…之前插入与content一起使用 ::before｛content：‘ ’｝

::after 在…之后插入与content一起使用 ::after { content：‘ ’ }

###7. C3里面2d 转换的用法？

7.1 旋转 transform:rotate(45deg);

7.2 移动 transform:translate(45px,45px);(水平，垂直)

7.3 缩放 transform:scale(2,2);(水平，垂直)

7.4 翻转 transform:skew(20deg,40deg);(沿X轴翻转，沿Y轴翻转)

将以上四个组合在一起 matrix(),需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

###8. C3里面动画的写法？

animation是一个复合属性，一共有8个参数;
一般是由@keyframes先定义动画，然后animation使用动画。

8.1声明动画

创建一个动画，并且指定名称，通过@keyframes关键词声明动画的关键帧

8.2调用动画 animation

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: #000;
        }

        div {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: red;
            box-shadow: 0px 0px 4px 4px #fff;
            /* 使用动画 */
            /* animation: myAnimaiton 2s infinite; */
            /* 1. 动画名称 */
            animation-name: myAnimaiton;
            /* 2. 动画执行时间 */
            animation-duration: 2s;
            /* 3. 动画执行次数 */
            /*animation-iteration-count: 2;*/
            /* infinite 无限次 */
            animation-iteration-count: infinite;
            /* 4. 延迟时间 */
            /*animation-delay: 1s;*/

            /* 5. 动画效果 */
            /* animation-timing-function: linear; */
            /* steps(n) 按照步数执行, 可以用来实现帧动画 */
            /* animation-timing-function: steps(3); */

            /* 6. 动画方向 */
            /* alternate 交替执行, 可以让动画序列来回交替执行 */
            /* animation-direction: alternate; */

            /* 7. 动画最终状态 forwards 停留在最终动画状态 */
            /*animation-fill-mode: forwards;*/

        }

        div:hover {
            /* 8. 动画播放状态 */
            animation-play-state: paused;
        }

        /* 自定义动画 */
        @keyframes myAnimaiton {
            0% {
                transform: scale(1.0)
            }

            100% {
                transform: scale(1.5)
            }
        }
    </style>
</head>

<body>
    <div>奔跑吧, 兄弟！</div>
</body>

</html>

9. C3里面过渡属性的用法？

transition过渡，两种抒写方式，一种是分开写每项属性、一种是合写。

方式一：分开写四个属性
1.transition-property 设置过渡属性可以单写属性也可以用all代替全部
2.transition-duration 设置过渡时间单位s
3.transition-timing-function 设置过渡动画效果 ease:先慢后快再慢 linear:匀速
4.transition-delay 设置过渡延时单位s

方式二：合写只需要注意, 延迟时间写在执行时间后面就可以了其它顺序无序
transition: all 1s linear 0.2s; //过渡全部属性、执行1秒钟、匀速执行、延迟0.2秒钟

###10. 移动web如何解决适配问题?

10.1使用rem做单位，效果很好，浏览器的兼容性也不错

只要一行代码就能适配多个分辨率终端

10.2使用响应式布局，用媒体查询，弊端:冗余代码较多，要做多个分辨率的适配，css代码写的较多。个人不太建议使用这种，除非用成熟的bootstrap框架节省一些工作量。

10.3使用百分比布局，做出来的界面在各个分辨率的适配上比较不好，例如一个div在分辨率为320*568是320px * 100px 在375 * 667 的分辨率显示就是 375px * 100px 效果不是等比拉升

###11. 移动web4种常用布局的方式，以及单位?

11.1 流式布局（百分比布局）

11.2 rem布局

11.3 响应式布局

11.4 flex布局（弹性布局）

12. Rem和em的区别是什么？

都是相对单位，用来适应各种手机屏幕，rem是根据html根节点进行计算的，而em是继承父元素的字体

em相对于父级元素的font-size计算而来的

本级元素字体大小（单位为px）=父级元素的字体大小（转化为px） * 本级元素em的值

例如：

父级元素：20px，子级元素的1em相当于20px

若父级元素的单位也是em，则一层层往上找，直到找到单位为px的元素。

例如：

父级元素的font-size为0.8em，父级元素的上一级元素的font-size为20px

则父级元素的font-size为0.8*20=16px。

则子级元素的1em相当于16px

因为这个特性，多级嵌套的元素若是其中几层的单位时em，元素的字体大小计算就会容易出错

rem相对于html根元素的font-size计算而来的，所有单位是rem单位的元素的基础值都是同一个，所以计算比较方便，也不会出现em单位的那种嵌套问题，非常适合响应式页面使用

html元素的字体大小默认是16px，以此为基准计算比较麻烦，所以一般会做如下操作:

<style>
    html{
        //默认为16px，设置为62.5%，html的font-size就变成了16*62.5=10px
        //以此为基准比较好计算
        font-size:62.5%
    }
</style>

13. 响应式布局有什么好处和坏处?

优点：

1.跨平台和终端且不需要分配子域

2.兼容当前及未来设备

3.节约开发成本

缺点：

1.兼容性问题不兼容低版本浏览器

2.移动带宽增多

3.加赞事件长，无用代码多

###14. 扩展：移动端现在流行的常用单位vm，和vh（如何使用，代表什么意思）?

响应式web设计离不开百分比。但是，CSS百分比并不是所有的问题的最佳解决方案。CSS的宽度是相对于包含它的最近的父元素的宽度的。但是如果你就想用视口（viewpoint）的宽度或者高度，而不是父元素的，那该怎么办？

“vh” & “vw”：

vh：相对于视窗的高度：视窗高度是100vh。

vw：相对于视窗的宽度：视窗宽度是100vw。

####vw、vh工作原理

vh、vw方案即将视觉视口宽度 window.innerWidth和视觉视口高度 window.innerHeight 等分为 100 份；

vw(Viewport’s width)： 1vw等于视觉视口的 1%
vh(Viewport’s height) : 1vh 为视觉视口高度的 1%

如果视觉视口为 375px，那么 1vw=3.75px，这时 UI给定一个元素的宽为 75px（设备独立像素），我们只需要将它设置为 75/3.75=20vw。

如何在vue项目中适配

首先下载依赖

npm install postcss-px-to-viewport --save-dev

然后修改postcss.config.js或者.postcssrc.js文件

module.exports = {
  "plugins": {
    "postcss-px-to-viewport": {
      viewportWidth: 750,   // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 3,     // 指定`px`转换为视窗单位值的小数位数
      viewportUnit: "vw",   // 指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore'],// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1,     // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false,     // 允许在媒体查询中转换`px`
      exclude: [/node_modules/] // 设置忽略文件，用正则做目录名匹配
    }
  }
}

引用vant后发现组件变得很小，被压扁了一半，这是因为vant团队是根据375px的设计稿去做的。

适配方法：修改postcss.config.js配置文件；

const path = require('path');
module.exports = ({ file }) => {
  const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750;
  return {
    plugins: {
      autoprefixer: {},
      "postcss-px-to-viewport": {
        unitToConvert: "px",
        viewportWidth: designWidth,
        unitPrecision: 6,
        propList: ["*"],
        viewportUnit: "vw",
        fontViewportUnit: "vw",
        selectorBlackList: [],
        minPixelValue: 1,
        mediaQuery: true,
        exclude: [],
        landscape: false
      }
    }
  }
}

###15. 扩展:移动端常见的兼容性问题?

1.IOS移动端click事件300ms的延迟响应

移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。

这是由于区分单机事件和双击屏幕缩放的历史原因造成的。

解决方式：

fastclick可以解决在手机上点击事件的300ms延迟
zepto的touch模块，tap事件也是为了解决在click的延迟问题
触摸屏的相应顺序为touchstart–>touchmove–>touchend–>click，也可以通过绑定ontouchstart事件，加快事件的响应，解决300ms的延迟问题

2.CSS动画页面闪白,动画卡顿
解决方法:
2.1.尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位

2.2.开启硬件加速
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

3.禁止 iOS 弹出各种操作窗口
-webkit-touch-callout:none

4.一些情况下对非可点击元素（label，span）监听click事件，iso下不会触发

css增加cursor：pointer就搞定了。

###16. 扩展：移动端你还了解哪些布局方式?

bootstrap布局
bootstrap是一个比较流行的响应式前端框架，利用bootstrap的栅格系统可以实现响应式的移动端布局。
bootstrap的栅格是基于百分比的，在使用的时候，我们给相应的div设置col-sm-4, col-md-6,col-lg-12。
class=“c1 col-lg-2 col-md-3 col-sm-4 col-xs-6”
多列布局
column-count是css3的一个属性，主要用于文本元素，支持响应式。
column-count属性指定某个元素应分为的列数。
column-width属性指定列的宽度。

.box1{
columns: 200px 3;
padding: 50px 0;
}

标签

#html #css3 #移动开发 #html5 #css