原标题：HTML5入门教程之移动端页面布局实战一、 移动设备和电脑pc端的区别我们要学习移动端布局首先要了解“移动端”和“网页端”布局的不同之处在于哪里？也就是屏幕的尺寸！讲到屏幕尺寸我们就不得不提viewport，它是设备终端用来显示网页的那一块区域，而非浏览器的可视区域。它可以比浏览器可视区域大可以比可视区域小，但一般来说移动设备里的viewport都比可视区域要来的大。现在的浏览都会给提供一
转载
2024-09-28 22:04:44
38阅读
现如今，各大APP平台都有属于自己的小程序体系，各种各样的应用都可直接内嵌在APP中实现一站式体验。使用uniapp开发的APP如何实现这样的功能呢？答案就是内嵌web-view注意事项APP中有vue页面及nvue页面，两种页面均可内嵌web-view，但两种页面的表现不一：vue页面会自动铺满整个页面，接收web-view页面通信使用的是@message；nvue页面则需要指定页面宽高，接收w
转载
2023-09-05 09:47:16
452阅读
1. 单个页面内容不能过多 设计常用尺寸：750 x 1334 / 640 x 1134，包含了手机顶部信号栏的高度。微信、QQ顶部导航，底部也有 操作栏（safari浏览器也一样），这些都会占用设计稿显示区域，因此在 设计环节 就需要考虑内容的多少，页面底部要 预留一定的空白，这样在微信或qq中才不会被遮住。750*1074）存下来，用于实时查看移动端页
转载
2023-11-06 13:17:48
772阅读
移动端h5页面问题总结
原创
2023-07-04 09:04:49
1487阅读
移动端瀑布流布局是一种比较流行的网页布局方式，视觉上来看就是一种像瀑布一样垂直落下的排版。每张图片并不是显示的正正方方的，而是有的长有的短，呈现出一种不规则的形状。但是它们的宽度通常都是相同的因为移动端瀑布流布局主要为竖向瀑布流，因此本文所探讨的是竖向瀑布流特点竖向瀑布流布局主要有下面几种特点：一般出现在移动端 H5 页面底部主要以图片或视频为主降低页面复杂度，节省空间，可以容纳更多内容不规则展示
转载
2024-05-21 07:33:55
65阅读
做题目页面H5页面（Vue开发）最近公司需要，要写一个可以做题目的H5小页面，需求是挺简单的（目前来说），就是可以上一题下一题的，另外不存在什么输入，全是选择题;我仔细想想觉得也不复杂，就打算用前些时候学的Vue来写（之前万年的Jquery的...），这个简单的小功能，我周末写了一天多,,,汗颜，还是太菜了..现在总结一下吧1：题目展示和选项展示首先这个功能不复杂，页面没有什么逻辑，我刚接到这个任
转载
2023-12-17 08:20:08
195阅读
移动H5前端性能优化概述1. PC优化手法在移动端相同适合使用 2. 在移动端我们提出3s加载完首屏资源 3. 根据第二点，首屏加载3s完或使用Loading 4. 根据联通3G网络均匀338KB/s(2.71Mb/s)，所以首屏资源不该超过1014KB 5. 移动端因手机配置原因，除加载外呈现页面速度也是优化重点 6. 根据第五点，要合理处理代码削减呈现页面的损耗 7. 根据第二、第五点
转载
2023-07-28 00:24:49
467阅读
背景项目：移动端H5电商项目痛点：慢！！！初始方案：最基本的图片懒加载，静态资源放到cdn，predns等等已经都做了。但是还是慢，慢在哪？显而易见的原因：由于前后端分离，所有的数据都由接口下发，之后根据模板渲染页面。也就是说，我们需要先加载js，等到js加载完毕之后，请求接口，接口返回数据之后，渲染页面，加载图片等等。尽管使用了模块化的加载方式，但是对于要求高的首页和活动页，给用户的感知也不是很
转载
2023-07-12 13:58:51
48阅读
目录 文章目录目录1.css尺寸介绍2.视口基础3.像素并非像素4.rem的几种解决方案4.1 方案1，针对各个分辨率范围在html上设置font-size4.2 方案2，通过视口的宽度的比值动态算出html根元素的字体大小4.3 方案3，阿里团队的方案，推荐方案4.4 方案4，淘宝触屏版的方案4.5 方案5，另一种 1.css尺寸介绍单位描述备注%百分比相对in英寸绝对cm厘米绝对mm毫米绝对e
转载
2023-11-07 11:25:55
179阅读
# Vue移动端iOS H5页面下滑出现空白的解决方案
在使用Vue开发移动端H5页面时，尤其是在iOS设备上，用户在下滑页面时可能会遇到出现空白的现象。这种情况给用户体验带来了不便。在这篇文章中，我们将探讨这一问题的原因，并给出解决方案，同时附上代码示例和序列图，以方便理解。
## 问题分析
在移动端H5应用中，特别是在iOS手机上，WebKit引擎可能会对页面的滚动行为产生影响。出现空白
使用VUE3.0版本搭建H5模板仓库地址，有需要的可以参考参考 https://gitee.com/young_frivolous/vue3-app-template/tree/master为了方便每次写项目都要去搭建一个框架，今天使用vue3.0从0开始实行一个开箱即用移动端模板，基于vue3.0全家桶 + vant3.0 +scss + rem适配方案 + axios封装，构建H5模板脚手架版
转载
2024-05-07 11:09:55
239阅读
业务背景弹窗是页面交互中的重要组成部分，前端开发的同学应该经常与它打交道。小编的日常是做面向C端的H5活动页面，弹窗处理是每天都要面对的情况。根据日常工作中的场景，我总结了弹窗有以下特点：不同的活动页面，弹窗样式基本不同；不同的CSS开发者，弹窗的html结构不尽相同；同一个活动页面中的弹窗样式基本相同，但弹窗文案、按钮文案、按钮交互都不尽相同；第一点和第二点导致我们无法抽离出适用于所有页面的弹窗
转载
2023-10-18 10:38:57
534阅读
去年JDC出了不少优秀的武媚娘…不，H5呢，大家都很拼，同时当然也积累了一些经验和教训，今天结合咱们的实战案例，从字体，排版，动效，音效，适配性，想法这几个方面好好聊一聊关于H5的设计，希望对同学们有帮助。 字体
排版
在有限的手机屏幕空间内，我们积累的经验告诉我们最好的效果是简单集中，最好有一个核心元素，中心元素不宜过多，突出重点为最优。
转载
2023-08-24 22:17:41
331阅读
如果想要成为架构师或想突破
原创
2023-06-22 14:06:20
465阅读
canvas在retina屏模糊 只需要将画笔根据像素比缩放即可 run(canvasEl) { const canvas = canvasEl; const ctx = canvas.getContext('2d'); const devicePixelRatio = window.deviceP ...
转载
2021-08-05 17:19:00
366阅读
2评论
前言 iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网
转载
2022-10-13 15:39:03
916阅读
前言最近接到项目新需求，H5项目需要内嵌到微信小程序和APP里，然后将H5页面分享出去，被分享的人可以点击消息跳转到H5页面。H5页面不难，难的是要与微信小程序和APP进行交互，因为以前也没有接触过，所以这里卡的时间有点长。现分享出来小程序内嵌H5页面介绍这里小编使用的是 uinapp 写的H5项目！！！ H5页面放入小程序中，需要使用小程序的一个组件 web-view微信官方文档 官方文档中有详
转载
2023-07-12 10:50:53
744阅读
WEB端设计规范一、网页尺寸 一般网站宽为996px；国内网站大部分还是以1000个像素为界限，因超过1000像素适合在大屏幕上浏览，小屏幕会显得拥挤。国内尺寸设置比较保守，这样可以保证大部分用户舒适的浏览网页。二、主流浏览器chromeIEfirefoxsafariopera知道了浏览器的设计特点才能更好的设计页面，比如浏览器的头部的操作高度和信息的展示都会有所
转载
2023-12-20 06:12:27
259阅读
在Web开发过程中，对html页面进行开发和调试的时候都会用到浏览器提供的调试工具，小编我最常用的就是Chrome浏览器自带的开发者工具了，可以很方便的对JS代码进行断点调试，log也很方便。但是在移动端的浏览器上进行开发就没有这么方便了，不管是iOS的Safari还是Android的众多浏览器。在这里小编推荐一个移动端的调试神器Eruda。Eruda 是一个专为手机网页前端设计的调试面板，类似
转载
2023-10-21 08:33:28
85阅读
# Vue 移动端 iOS H5 页面固定在底部的按钮
在移动端的开发中，尤其是针对 iOS 设备，常常需要实现页面底部固定按钮的功能。Vue.js 是一个流行的前端框架，能够高效地管理用户界面。在这篇文章中，我们将探讨如何使用 Vue 实现一个固定在底部的按钮，并提供代码示例。
## 1. 项目结构
首先，创建一个 Vue 项目。您可以使用 Vue CLI 生成一个新的项目。以下是我们的项
