目的:学习移动端场景下的js事件;制作移动端特效常用的js库;介绍移动端常用开发框架Bootstrap;介绍动态样式语言less、sass、stylus的基本使用。移动端js事件移动端的操作方式和PC端是不同的,移动端主要用手指操作,所以有特殊的touch事件,touch事件包括如下几个事件:1、touchstart: //手指放到屏幕上时触发2、touchmove: //手指在屏幕上滑动式触发3
转载
2023-12-10 17:12:45
62阅读
移动客户端的开发类型(站在前端立场上来说),主要是三种:
Native App(原生APP),也就是完全使用移动设备系统语言写的客户端,iPhone iPad就是纯Object-C,安卓就是纯JAVA, 是性能最棒的开发方式,但灵活性不好。
Web App, 就是在移动浏览器里打开的,纯HTML+CSS+JS,说白了就是个网页,只不过非常的富应用,比如手机浏览器访问的GMAIL。就是在浏览器里打开的页面。IOS支持可以在桌面创建访问的快捷方式,但是说到底还是打开Safari跑。而且对设备硬件的接口什么的挺薄弱。
Hybrid App.[HTML5 in mobile devices] 。实际上是使用原生写了一个容器,然后使用HTML+CSS+JS来实现用户界面和交互。Web App的短处便可以克服(因为自己写的容器可以辅助暴露偏底层的接口,比如本地存储或者麦克风控制之类),同时比起纯原生的java或者object-c开发灵活性要高(更新可以更快更迅速,也不依赖于市场,因为说白了,就是自己下载更新网页资源。)实际上这种方式已经不限于移动端。豌豆荚其实是个pc端的hybrid app
原创
2021-06-07 15:14:09
2387阅读
1:pc端响应式开发火狐浏览器打开菜单栏,点击开发者,选择我们的响应式设计 ctrl+shiift+M谷歌浏览器点击“show console”图标,打开模拟面板,使用"User Agent",选择所要模拟的机子,点击emulate按钮模拟,刷新浏览器。如要调整横竖屏,切换到"screen"2:新建...
原创
2022-04-06 14:24:43
1004阅读
从我工作以来,开发的一直都是移动端的页面,只有偶尔去开发几个PC端的页面,现在是一个移动端的时代,移动先行已经深入骨髓,作为一个web前端开发,如果你还在为如何开发移动端页面而迷茫,或者你还在为开发出了一个在你手机上“完美”的移动页面而沾沾自喜却不知移动的世界有多“残酷”的时候,那你应该看看这篇文章了。希望这能给你帮助,同时也能给我帮助,有不合理的地方,欢迎评论支持,必将改正。这里是基础,你了解否
转载
2024-06-18 22:02:03
32阅读
负责一个项目pc端的,再上线以后呢,想兼容移动端。用同一套页面 1.方法1 定义视口窗口,简单,可以在手机上看到一个缩小版的pc端
原创
2022-07-06 11:50:40
847阅读
移动端开发模板:750的稿子除以75:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer
转载
2023-07-02 23:56:09
146阅读
一 什么是爬虫 爬虫:就是抓取网页数据的程序。二、爬虫怎么抓取网页数据: 网页三大特征: -1. 网页都有自己唯一的URL(统一资源定位符)来进行定位 -2. 网页都使用HTML (超文本标记语言)来描述页面信息。 -3. 网页都使用HTTP/HTTPS(超文本传输协议)协议来传输HTML数据。 爬虫的设计思路: -1. 首先确定需要爬取的网页URL地址。 -2. 通过HTTP/H
转载
2023-11-21 15:05:52
56阅读
5:等分,居中等页面布局等分在说等分之前,先抛出一个问题,如下面的emmet代码,footer部分的导航有些页面是三个,有些页面是四个,我们要求的是不论是三个还是四个甚至于5个,都平分宽度。footer.footer>ul.nav-links>li*3footer.footer>ul.nav-lin...
原创
2022-04-06 14:25:27
237阅读
一、什么是移动端适配 移动端 Web 页面,就是常说的手机 h5页面、webview页面、公众号开发的网页等。 由于手机机型较多,各个手机的屏幕尺寸不一样,所以做移动端页面,需要考虑在安卓和ios的各种尺寸设备的兼容问题,我们要做的 web 页面适配,就是为了在不同设备上,页面能够保持统一展示效果,
原创
2021-08-25 09:51:40
10000+阅读
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-sc
原创
2017-07-25 10:36:00
773阅读
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
原创
2022-03-02 13:48:39
641阅读
页面的适配,就是一个页面能在PC端正常访问,同时也可以在移动端正正常访问。现在我们可以通过弹性布局【Flexible布局】、媒
原创
2023-10-07 10:15:10
437阅读
移动端app分类 1、Native App 原生app手机应用程序使用原生的语言开发的手机应用,Android系统用的是java,iOS系统用的是object-C 2、Hybrid App 混合型app手机应用程序混合使用原生的程序和html5页面开发的手机应用 3、Web App 基于Web的ap
原创
2021-08-05 17:07:34
369阅读
iOS 8人机界面指南(二):设计策略 文章索引2.1 设计原则(Design Principles)2.1.1 美学完整性(Aesthetic Integrity)2.1.2 一致性(Consistency)2.1.3 直接操作(Direct Manipulation)2.1.4 反馈(Feedback)2.1.5 隐喻(Metaphors)2.1.6 用户控制(User Control)
12:popuppopup分为两种:一种是内容比较多,直接以全屏显示, 一种是少量内容的popup提示popup page第一种形式,设计结构如下: ... 因为这种形式内容可能会比较长,有可能会有滚动效果,所以头部(含有关闭按钮)采用固定,动画设计使用translate...
原创
2022-04-06 14:21:09
124阅读
说明:由于vue 脚手架应用的广泛,在适配移动端页面的时候也有许多插件可以引用, 但有的时候不需要使用脚手架来编写,再去引用插件就比较麻烦,没有一段js来的方便, 在这里我就把适配移动端的js放在这,并且说明使用方法,后续也会写出使用脚手架时引入的适配插件 ;((doc, win) => { let ...
转载
2021-07-16 16:39:00
675阅读
2评论
1.联系人列表界面联系人列表不仅存在于手机通讯录里,社交、问答、短视频等各种类型的应用中都包含了类似联系人的列表。如何设计出与产品调性一致的列表?让这些案例给你灵感吧! 2.天气界面天气界面可以说是最常见的 App 之一了,也是 UI 设计师们发挥创意的地方,我精选十二组天气界面,在配色、构图等方面都很NICE,值得大家借鉴哈。
【饿了么】—— Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑(一) 前言:学习Vue.js高仿饿了么课程过程中,总结了这个Web App项目从准备到开发完毕自己觉得很重要的知识点。这一篇主要介绍:项目准备、页面骨架开发、header组件开发。 Appheader 一、项目分析&学习目标
转载
2023-08-22 11:38:53
395阅读