移动WEB
何北木
这个作者很懒,什么都没留下…
展开
-
移动WEB-屏幕触摸事件
1. 触摸事件uchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。touchend事件:当手指从屏幕上离开的时候触发。touchcancel事件:当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间,文档中并没有具体说明,咱们只能去猜测了。2. 事件详解上面的这些事件都会冒泡,也都可以取消。虽然这些触摸事件没有在DOM规原创 2020-07-02 14:46:57 · 480 阅读 · 0 评论 -
移动WEB布局总结
1. 移动端主流方案2. 移动端技术选型原创 2020-07-01 00:34:24 · 79 阅读 · 0 评论 -
WEB-响应式布局
1. 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式设置,从而达到适配不同设备的目的2. 响应式布局容器响应式需要一个父级作为布局容器,来配合自己元素实现变化效果原理就是在不同宽度的屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同页面布局和样式变化常见的响应式尺寸划分超小屏幕(手机,小于768px):设置宽度为100%小屏幕(平板,大于等于768px):设置宽度为750px中等屏幕(桌面显示器,大于等于99原创 2020-07-01 00:27:01 · 893 阅读 · 0 评论 -
移动WEB-flex弹性布局
1. 概述布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便。CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用。别名:伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局2. 布局原理flex 是 flexible Box 的缩写,意为弹性布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 fl原创 2020-06-30 12:15:57 · 380 阅读 · 0 评论 -
移动WEB-rem布局篇
1. 概述rem布局主要的作用就是:根据屏幕的大小的不同,改变盒子的高度和文字的大小2 rem单位rem 和 em 类似,都是相对单位em 相对的是父元素的字体大小rem 相对的是html 根元素的字体大小3. 媒体查询1. 什么是媒体查询:媒体查询(Media Query)是CSS3的新语法使用 @media 查询,可以针对不同的媒体类型定义不同的样式@media 可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面目前针原创 2020-06-29 23:36:47 · 226 阅读 · 0 评论 -
移动-WEB流式布局
1. 流式布局(百分比布局)流式布局,就是百分比布局,也称非固定像素布局通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充流式布局方式是移动web开发使用的比较常见的布局方式max-width 最大宽度(max-height最大高度)min-width 最小宽度(min-height最小高度)2. pc端网页适配到移动端适配要求:a. 网页宽度必须和浏览器保持一致b. 默认显示的缩放比例和pc端保持(缩放比例1.0)c. 不允许用户自行缩原创 2020-06-25 21:54:42 · 153 阅读 · 0 评论 -
移动WEB开发基础篇
1. 移动端不使用jQuery可以使用jQuery,但是不建议,因为jQuer库用在移动端显得太冗余了jQuery 做了很多桌面浏览器的兼容问题 特别是IE,但是移动端没有IE浏览器主流的浏览器:谷歌、 火狐(2016年停止了维护和更新)、 safari、 百度 、360 、qq ...特点:内核基本上都是 webkit 或者 blink ,兼容 -webkit-使用H5的 API 或者说使用一个 叫做: zepto.js 的库(基于高版本浏览器开发)2. 移动端开发注意事项原创 2020-06-25 17:24:49 · 909 阅读 · 0 评论