![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web移动端
文章平均质量分 67
Amethyst紫宣
这个作者很懒,什么都没留下…
展开
-
苏宁案例(rem适配)—zepto&Swiper应用
文章目录less适配Zepto轮播图(zepto实现)Swiper轮播图(Swiper实现) less适配 less&rem适配方案 Zepto Zepto.js.api中文版 Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api 注意:有些操作除了zepto.min.js还需引入其他文件 此处用到zepto的selector.js(扩展选择器)、fx.js(animate函数)、touch.js(手势—swipeLeft、swipeRight)原创 2021-01-28 18:34:57 · 222 阅读 · 0 评论 -
less&rem适配方案
文章目录less基本语法less浏览器端的使用remrem的认识移动端适配方案——rem适配用less适配各类设备(改变html的字体大小,@media) less 基本语法 变量、mixin、嵌套(注意&:hover、.@{var})、导入 less浏览器端的使用 1. 浏览器不识别less代码,必须先解析为css代码 2. 引入less文件需要加上type="text/less" 3. less.watch();无刷新预览新样式 有延迟 4. 以http形式打开网页(不支持file) &原创 2021-01-28 17:48:47 · 327 阅读 · 0 评论 -
响应式布局&Bootstrap&writing-mode
文章目录响应式布局响应式原理媒体查询BootstrapBootstrap中文文档基本模板响应式布局容器:.container流式布局容器: .container-fluidnormalize和reset栅格系统响应式栅格系统栅格系统的扩展(嵌套、偏移offset、排序pull,push)内容的显示和隐藏(visible、hidden)writing-mode复习 响应式布局 简言之,就是一个网站能够兼容多个终端,在新建网站上普遍采用响应式开发 响应式原理 媒体查询 /* * 响应式容器: * 1、在超小屏原创 2021-01-22 23:07:27 · 263 阅读 · 0 评论 -
背景平铺&两栏自适应(占满剩余高度)&fastclick、IScroll&双飞翼布局
文章目录背景平铺两栏自适应(占满剩余高度)需求实现fastclick插件的使用IScroll插件的使用(实现区域滚动效果)条件双飞翼布局(两边固定宽度,中间自适应)条件实现 背景平铺 /*可应用于精灵图*/ /*让背景从内容开始平铺*/ -webkit-background-origin: content-box; background-origin: content-box; /*没有做背景裁剪 背景图片就是默认从边框显示*/ /* border-box 边框之外被裁减掉 padding-box原创 2021-01-19 14:28:04 · 194 阅读 · 0 评论 -
web移动端touch&手势&轮播图
文章目录触摸事件touch绑定事件事件对象clientX、pageX、screenX的区别移动端的手势事件(swipe,swipeLeft,swipeRight,swipeUp,swipeDown)轮播图需求分析准备工作自动无缝轮播touchstart(起始点startX)touchmove(计算位移distanceX—>imageBox移动距离-index*width+distanceX)touchend(比较手指滑动距离Math.abs(distanceX)和width/3—>做吸附|切换)原创 2021-01-08 18:03:43 · 481 阅读 · 2 评论