随笔分类 -  移动端开发

响应式布局和媒体查询
摘要：一套页面能够适配所有浏览器网页能够在任何大小的屏幕上完美布局！这个网页能够动态监测到当前屏幕的宽度，根据不同的宽度来设置不同的样式，达到适配的效果； 监测当前屏幕宽度:1.用js获取当前屏幕的宽度2.媒体查询技术 css3新增媒体查询基本语法：@media screen and (min-width 阅读全文
posted @ 2020-09-16 17:23 MIKE-CHOW 阅读(262) 评论(0) 推荐(0)
zepto.js
摘要：移动端使用js库 zepto1、jquery有大量处理低版本浏览器兼容的代码，在移动端不需要，因此过于冗余2、zepto是个轻量级的js库，api与jquery类似，会用jquery就会用zepto3、zepto包含了许多不同用途的模块，我们只需要引入基础模块并根据需求引入其他相应模块即可，最大程度 阅读全文
posted @ 2020-09-16 00:13 MIKE-CHOW 阅读(303) 评论(0) 推荐(0)
用touch事件来优化click事件
摘要：在移动端，既有touch事件又有click事件1.click事件在pc端很常用，但是在移动端会有大约300ms左右的延迟，比较影响用户的体验，300ms用于判断双击还是长按事件，只用没有后续的动作发生时，才会触发点击事件基于第一点原因，用户体验有待提升，希望能用touch事件封装出一个响应速度更快的 阅读全文
posted @ 2020-09-15 21:15 MIKE-CHOW 阅读(171) 评论(0) 推荐(0)
BFC 神奇背后的原理
摘要：BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BFC 解决这些问题，但当别人问我 BFC 是什么，我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spe 阅读全文
posted @ 2020-09-14 14:24 MIKE-CHOW 阅读(155) 评论(0) 推荐(0)
移动端触屏事件
摘要：touch事件移动端常见屏幕操作场景：单击、双击、长按、滑动、缩放、旋转在移动端，以上所有的操作场景，都是基于触屏事件实现的移动端新增了4个与手指触摸相关的事件：touchstart：手指放到屏幕上时触发touchmove：手指在屏幕上滑动时触发（会触发多次）touchend：手指离开屏幕时触发to 阅读全文
posted @ 2020-09-13 17:38 MIKE-CHOW 阅读(141) 评论(0) 推荐(0)
less介绍
摘要：css需要书写大量看似没有逻辑的代码，不凡便维护和拓展，不利于复用。造成这些困难的原因源于css是一门非程序式语言，没有变量，函数，作用域等概念，less/sass为web开发者带来了福音，它在css语法基础之上，引入了变量，混入，运算以及函数等功能，大大简化了css的编写，并且降低了css的维护成 阅读全文
posted @ 2020-09-11 13:45 MIKE-CHOW 阅读(209) 评论(0) 推荐(0)
视口
摘要：在移动端，如果把一个盒子的宽度设置成100%，盒子的宽度并不是浏览器的宽度，而是980px移动端网页的布局不是基于浏览器可视区域宽度，而是基于一个虚拟的布局区域（视口），视口宽一般默认980px这个是历史原因导致的，早期的电脑屏幕分辨率通常是1024的分辨率，所以版心的宽度通常是980px，由于手机 阅读全文
posted @ 2020-09-10 17:59 MIKE-CHOW 阅读(315) 评论(0) 推荐(0)
二倍图和三倍图
摘要：物理像素：由屏幕硬件决定，一个物理像素大小在不同的屏幕上是不一样的由于不同的屏幕一个物理像素的大小不一样，如果采用物理像素布局，会导致网页在不同分辨率的屏幕显示时布局差异很大CSS像素：px可以解决不同分辨率屏幕布局盒子大小不一样的问题px可以屏蔽物理像素点大小不一致的差异看不懂了吧~举个例子 一倍 阅读全文
posted @ 2020-09-10 17:02 MIKE-CHOW 阅读(2338) 评论(0) 推荐(0)
PC端布局和移动端布局差异
摘要：PC端布局和移动端布局差异一、pc端让一个网页在不同的屏幕适配 设置版心：1200px二、在移动端 让一个网页在不同的屏幕适配，要充分利用屏幕空间 宽度自适应， 流式布局：百分比布局 伸缩布局 宽高自适应： rem 阅读全文
posted @ 2020-09-10 16:06 MIKE-CHOW 阅读(489) 评论(0) 推荐(0)