移动端前端开发
文章平均质量分 85
学习移动端前端开发的知识点并进行实战训练。参考视频课程哔哩哔哩课工坊移动端开发
孤傲倾城
努力学习编程的本科大学生
展开
-
(十)移动端前端开发-开发技巧
开发移动端页面时,建议前端工程师使用HTML5,HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序的体验,减少开发者的工作量。webkit内核中有一些私有的meta标签,这些meta标签在开发中webapp时起到非常重要的作用。由产品意识形态决定,在触控手机上,为提升用户体验,尽可能的保证用户的可点击区域较大。使用2倍大小的背景图片来代替。/*点击box1,令其消失*/"看看box2会不会被点击到"/*点击box1,令其消失*/"看看box2会不会被点击到"原创 2023-02-14 12:25:15 · 648 阅读 · 0 评论 -
(九)移动端前端开发-Zepto框架
Zepto的一些的可选功能专门针对移动浏览器,因为最初的目标是专门为移动网站提供一个精简的jQuery替代方案。//需求:点击div元素,给div元素添加animate动画(需要包含transform属性里面的方法)。使用jQuery时load事件的处理函数不会执行,使用Zepto时load事件的处理函数会执行。//tap事件类似PC端上的click事件,它表示手指触摸某个元素会被出发。//选中页面中所有id为foo元素,将其背景设为粉色。//选中页面中所有的div元素,将其背景设为红色。原创 2023-02-14 11:43:33 · 630 阅读 · 0 评论 -
(八)移动端前端开发-移动端事件
鼠标类:click、mouseover、mouseout、mouseleave、mouseenter、mouseup、mousedown…键盘类:keydown、keyup…其他类:blur、focus、change、load…移动端事件:点击事件\双击事件、滑动事件:上滑、下滑、左滑、右滑、长按事件、摇一摇、重力感应等。。在移动端上使用click事件,会出现300ms延时问题。判断用户操作是否为双击事件,在300ms以内再一次点击了屏幕,浏览器则判断为双击操作。没有点击则为单击操作。touch事件原创 2023-02-14 11:45:34 · 700 阅读 · 0 评论 -
(七)移动端前端开发-基于rem布局案例2
移动端前端开发,基于rem布局,制作淘宝交易成功页面头部。通过javascript代码获取设备屏幕的宽度,来调整html根节点的字体大小。使用相对单位rem设置页面字体、宽度等大小尺寸。HTML部分包含头部、交易成功、地址三部分。让页面自适应不同型号屏幕的移动设备。原创 2023-02-12 16:23:13 · 170 阅读 · 0 评论 -
(六)移动端前端开发-基于rem布局案例1
移动端开发,基于rem布局。在移动端开发中,由于屏幕空间有限,经常会把一些菜单或功能浮窗隐藏在屏幕一侧,当点击开展按钮时,以滑出的效果呈现内容。点击左上角用户头像时,侧边栏滑出,然后单击右侧区域,侧边栏再滑入。HTML结构主体、遮罩、侧边栏三个部分,而遮罩、侧边栏默认隐藏。//思路:点击人物头像按钮,侧边栏从左侧滑出,遮罩层也显示出来;//侧边栏要从左侧滑出(改变left的值)//点击蒙层,侧边栏滑入,遮罩层隐藏。//侧边栏滑入(改变left的值)//给人物头像按钮绑定事件。//给遮罩层添加点击事件。原创 2023-02-12 16:21:25 · 130 阅读 · 0 评论 -
(五)移动端前端开发-页面布局案例
移动端前端开发,制作当当书香节导航部分实操;案例:屏幕宽度大于768px小于1199px时,按钮一行显示4个。屏幕宽度大于480px小于767px,按钮一行显示4个;屏幕宽度大于1200px,按钮一行显示5个。屏幕宽度小于479px,按钮一行显示3个。原创 2023-02-12 16:21:09 · 219 阅读 · 0 评论 -
(四)移动端前端开发-移动端页面布局
流动布局响应式布局基于rem的布局flex布局。水平居中行内元素text-align: center;块级元素采取绝对定位的方式实现。自适应块级元素css:Transform属性。行内元素垂直居中单行文本的垂直居中;元素的高度和行高相等时,文本呈现垂直居中。多行文本的垂直居中;不固定高度的垂直居中通过设置padding实现。固定高度的垂直居中使用display设置table,配合样式vertical-align设置为middle来实现。块级元素的垂直居中,固定宽高的垂直居中;不固定宽高的垂直居中。原创 2023-02-12 16:19:28 · 112 阅读 · 0 评论 -
(三)移动端前端开发-Flex弹性盒布局
flex-direction的改变,一些依赖于主轴定义的属性也跟着改变。justify-content;align-content;align-items。容器转为flex布局之后,项目不受float的影响。flex-wrap的默认是nowrap,需要设置才会自动换行。align-self交叉轴上的对齐方式。flex复合属性。flex-basis。flex-shrink项目缩小比例。flex-grow项目放大比例。order定义项目的排列顺序。align-content多根轴线对齐方式。align-item原创 2023-02-12 16:17:52 · 189 阅读 · 0 评论 -
(二)移动端前端开发-自适应和响应式布局
响应式的概念覆盖了自适应,响应式布局可以根据屏幕的大小自动的调整页面的展现方式,以及布局。自适应,如果屏幕太小,即使网页能够根据屏幕大小进行适配,也会感觉在小屏幕上查看内容过于拥挤。响应式可以自动识别屏幕宽度,并作出相应屏幕,布局和展示的内容可能会有所变动。动态改变html的font-size值的大小,来完成rem实现响应式布局。and :同时满足这两者时生效,到达限定范围.@media screen and (max-width: 1200px ) {样式代码 ...}only:指定某种特定的媒体类型,原创 2023-02-12 16:02:36 · 336 阅读 · 0 评论 -
(一)移动端前端开发-移动端基础
移动web、运行在移动设备上的产品。适配平台:安卓、IOS;H5运行环境分类:移动端浏览器 - 原生APP的webview中(hyBrid模式)- 开发的H5页面镶嵌入到app的webview中显示。移动端屏幕PPI;代表屏幕每英寸的像素数量,即**像素密度**。高PPI屏幕显示的元素会比较精细(看起来会比较小),低PPI屏幕显示的元素相对来说就比较粗糙(看起来会比较大)。DPR设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下,设备像素和CSS像素的比值。原创 2023-02-12 15:42:20 · 1925 阅读 · 0 评论