随笔分类 -  移动端

案例：移动端返回顶部效果
摘要：实现功能： 页面滚动某个地方就显示，否则隐藏 点击可以返回顶部 下面详细地说明具体的实现步骤： ① 滚动到某个地方后显示 ② 事件：使用scroll页面滚动事件 ③ 如果被卷去的头部（window.pageYOffset）大于某个数值 ④ 点击返回顶部的图片，使用window.scroll(0, 0 阅读全文
posted @ 2020-05-28 22:06 浮华夕颜 阅读(1479) 评论(0) 推荐(0)
移动端轮播图（原生JS写法）
摘要：移动端轮播图功能和PC端基本一致。 实现功能： 可以自动播放图片 手指可以拖动播放轮播图 下面详细地说明具体的实现步骤： 1. 自动播放功能： ① 开启定时器 ② 移动端移动可以使用CSS3的translate移动。注意， 使用translate不需要添加就可以移动 ③ 想要图片优雅的移动，就需要添 阅读全文
posted @ 2020-05-28 17:55 浮华夕颜 阅读(3751) 评论(0) 推荐(2)
移动端特效
摘要：从以下4个方面介绍移动端特效： 触屏事件 移动端常见特效 移动端常用开发插件 移动端常用开发框架 1. 触屏事件 移动端浏览器兼容性较好，我们不需要考虑以前JS的兼容性问题，可以放心的使用原生JS书写效果，但是移动端也有自己独特的地方。比如触屏事件touch（也称触摸事件），Android和IOS都 阅读全文
posted @ 2020-05-28 17:32 浮华夕颜 阅读(540) 评论(0) 推荐(0)
移动布局之响应式开发
摘要：响应式开发不需要单独制作移动端页面。 响应式开发原理：就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 设备划分 尺寸区间 超小屏幕（手机） x < 768px 小屏设备（平板） 768px <= x < 992px 中等屏幕（桌面显示器） 992px <= x < 阅读全文
posted @ 2020-05-19 23:02 浮华夕颜 阅读(285) 评论(0) 推荐(0)
移动布局——rem
摘要：前面两篇介绍了流式布局和flex弹性布局，在介绍rem之前，我们先考虑以下三个问题： 1. 页面布局文字能否随着屏幕大小变化而变化？ 2. 流式布局和flex布局主要针对于宽度布局，那高度如何设置？ 3. 怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？ rem的出现完美的解决了上面的三个问题。 阅读全文
posted @ 2020-05-18 20:52 浮华夕颜 阅读(612) 评论(0) 推荐(0)
移动布局之弹性布局
摘要：flex是flexble Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。 当我们为父盒子设置为flex布局以后，子元素的float（浮动）、clear（清除浮动）和vertical-align（垂直居中，margin: 0 auto是水平居中） 阅读全文
posted @ 2020-05-17 23:51 浮华夕颜 阅读(431) 评论(0) 推荐(0)
.dpg和.webp的图片格式
摘要：DPG图片压缩技术： 京东自主研发推出DPG图片压缩技术，经测试该技术，可直接节省用户近50%的浏览流量，极大的提升了用户的网页打开速度。 能够兼容jpeg，实现全平台、全部浏览器的兼容支持。 经过内部和外部上万张图片的人眼浏览测试后发现，压缩后的图片和webp的清晰度对比没有差距。 webp图片格 阅读全文
posted @ 2020-05-17 17:02 浮华夕颜 阅读(994) 评论(0) 推荐(0)
移动布局之流式布局
摘要：流式布局（百分比布局）： 流式布局，也就是百分比布局，也称非固定像素布局 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充 流式布局方式是移动web开发使用的比较常见的布局方式 max-width 最大宽度（max-height 最大高度） min-width 阅读全文
posted @ 2020-05-17 16:56 浮华夕颜 阅读(316) 评论(0) 推荐(0)
移动端布局
摘要：移动端布局和PC端有所区别： 1) 单独制作移动端页面（主流） 流式布局（百分比布局） flex弹性布局（推荐） less+rem+媒体查询布局 混合布局 2) 响应式页面兼容移动端 媒体查询 bootstrap 移动端布局需要了解几个概念： 1. meta视口标签 <!-- 视口的设置：devic 阅读全文
posted @ 2020-05-17 16:48 浮华夕颜 阅读(193) 评论(0) 推荐(0)