Loading

随笔分类 -  移动端

摘要:一、简介 ①Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 ②Swiper 是一款免费以及轻量级的移动设备触控滑块的框架,使用硬件加速过渡(如果该设备支持的话)。主要使用与移动端的网站、网页 阅读全文
posted @ 2018-07-24 13:13 澎湃_L 阅读(282) 评论(0) 推荐(0) 编辑
摘要:一、简介 ①Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api。 ②Zepto的设计目的是提供 jQuery 的类似的API,但并不是100%覆盖 jQuery 。Zepto是一个5-10k的通用库、能够下载并快速执行、有一个熟悉通用的API,可以 阅读全文
posted @ 2018-07-24 12:19 澎湃_L 阅读(205) 评论(0) 推荐(0) 编辑
摘要:一、概念 ①em大小是基于父元素的字体大小 ②rem是相对单位,r是root的意思,在html页面上就是html标签,所以rem的大小是基于html元素的字体大小 二、rem适配 ①使用flex的伸缩布局、使用百分比的流式布局、使用媒体查询的响应式布局,共同点就是元素只能做宽度的适配(图片除外) ② 阅读全文
posted @ 2018-07-23 01:26 澎湃_L 阅读(803) 评论(0) 推荐(0) 编辑
摘要:一、思路 ①less无法在浏览器中直接使用,浏览器不能识别 ②通过less解析插件less.js(JavaScript插件)可以把less文件解析成css代码(下载地址) 二、具体应用 ①less.js 插件的原理是使用Ajax,所以需要以HTTP协议打开文件,而不是使用文件协议 file://(这 阅读全文
posted @ 2018-07-22 21:50 澎湃_L 阅读(2866) 评论(0) 推荐(0) 编辑
摘要:一、响应式开发 ①在移动互联日益成熟的时候,我们在桌面浏览器上开发的网页已经无法满足移动设备的阅读。 ②通常的做法是针对移动端单独做一套特定的版本,但是如果终端越来越多那么你需要开发的版本就会越来越多(大屏移动设备普及) ③这时候就出现了响应式开发,简而言之,就是一个网站能够兼容多个终端 ④现在的移 阅读全文
posted @ 2018-07-20 17:37 澎湃_L 阅读(1762) 评论(0) 推荐(0) 编辑
摘要:一、文字环绕效果:使用浮动 二、两栏自适应 ①上面的例子里,如果把文字放进另外一个div盒子里,效果不变 ②然后对右边的div盒子加上overflow:hidden属性,出现了变化(触发了bfc) ③把右边盒子的文字去掉,加上一些样式 ④这样就可以做出移动端的一个两栏自适应的布局:左栏固定不变,右栏 阅读全文
posted @ 2018-07-20 12:17 澎湃_L 阅读(375) 评论(0) 推荐(0) 编辑
摘要:一、问题 ①移动端也有click点击事件,click点击会延迟200~300ms ②因为点击的响应过慢,影响了用户体验,所以需要解决响应慢的问题 二、解决方案 ①使用tap事件:即轻击,轻敲,响应速度快(不是原生事件,是通过touch相关事件衍生过来的) ②使用fastclick.js插件:可以提高 阅读全文
posted @ 2018-07-19 11:29 澎湃_L 阅读(511) 评论(0) 推荐(0) 编辑
摘要:一、定义 ①touch是移动端的触摸事件,而且是一组事件,主要有以下事件: touchstart 事件:当手指触摸屏幕的时候触发 touchmove 事件:当手指在屏幕来回滑动的时候触发 touchend 事件:当手指离开屏幕的时候触发 touchcancel事件:当被终止滑动的时候触发(来电、弹消 阅读全文
posted @ 2018-07-18 02:01 澎湃_L 阅读(1408) 评论(0) 推荐(0) 编辑
摘要:一、概念 ①外加模式: box-sizing: content-box 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容,在宽度和高度之外绘制元素的内边距,即宽和高不包括内边距 ②内减模式: box-sizing: border-box 为元素设定的宽度和高度决定了元素的边框 阅读全文
posted @ 2018-07-17 11:12 澎湃_L 阅读(299) 评论(0) 推荐(1) 编辑
摘要:一、适配问题 ①移动端Web页面,即常说的H5页面、手机页面、webview页面等。 ②适配问题产生的原因:手机设备屏幕尺寸不一,做移动端的Web页面,需要考虑在安卓/IOS的各种尺寸设备上的兼容,针对移动端设备的页面,设计与前端实现怎样做能更好地适配不同屏幕宽度的移动设备。 ③适配的目标:在不同尺 阅读全文
posted @ 2018-07-16 16:35 澎湃_L 阅读(177) 评论(0) 推荐(0) 编辑
摘要:效果图如下: 阅读全文
posted @ 2018-04-18 16:27 澎湃_L 阅读(359) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示
主题色彩