利用translate实现移动端滑屏效果(缓冲动画/滚动条)

利用translate实现移动端滑屏效果(缓冲动画/滚动条)

css代码body {margin:0; }body,html {height:100%;overflow: hidden;position: relative; }header {height:40px;font-size:20px;color:#fff;text-align: center;background:#000;line-height:40px; }footer
浏览:48 标签: 滚动条 translate 移动端 时间: 2018-04-11 23:53
移动端事件对象-touches/targetTouches/changedTouches

移动端事件对象-touches/targetTouches/changedTouches

        当给某个元素加上了事件绑定函数之后,事件函数默认的第一个参数就是事件对象。        事件对象:当用户在浏览器下触发了某个行为,事件对象会记录用户操作时一些细节信息。         touches:当前位于*屏幕*上的所有手指的一个列表         targetTouches:位于当前DOM元素上的手指的一个列表         chan
浏览:267 标签: touches targetTouches changedTouches 移动端 时间: 2018-01-10 23:05
移动端touch事件-ontouchstart/ontouchmove/ontouchend

移动端touch事件-ontouchstart/ontouchmove/ontouchend

        移动端的三大事件         手指按下:ontouchstart;手指移动:ontouchmove;手指抬起:ontouchend。       注意:在移动端开发的时候,浏览器的模拟器时好时坏,一般不用on的方式绑定事件函数,要用事件绑定的方式 (addEventListener)。 var div = document.getElementByI
浏览:298 标签: touch 移动端 时间: 2018-01-09 21:39
移动端开发适配方式-百分比适配/rem适配/弹性盒模型

移动端开发适配方式-百分比适配/rem适配/弹性盒模型

1、百分比适配<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><metaname="viewport"content="width=device-width,user-scalable=no"><styletype="text/css">     body {marg
浏览:292 标签: 适配 移动端 rem 时间: 2018-01-03 23:24
移动端开发去除默认css样式/overflow问题

移动端开发去除默认css样式/overflow问题

        清除点击阴影:-webkit-tap-highlight-colora,input,button{-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}        清除按钮圆角 (ios上):-webkit-appearanceinput,button {-webkit-appearance: none;border
浏览:281 标签: 移动端 css 时间: 2018-01-03 22:57
移动端开发viewport设置/常见的meta设置

移动端开发viewport设置/常见的meta设置

        viewport 视口(可视区窗口)<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=.5,minimum-scale=.5,maximum-scale=1">        默认不设置 viewport 一般可视区宽度在移动端是980。width
浏览:299 标签: viewport 移动端 meta 时间: 2018-01-02 23:40
移动端开发之touch事件

移动端开发之touch事件

touch事件        touchstart:手指触碰;touchmove:手指移动;touchend 手指抬起。在模拟器下,不支持用on 的方式来给元素加touch事件,在真机没有问题。通常在开发中建议用addEventListener去给元素添加事件。box.ontouchstart =function(){ //不建议使用,模拟器上无效console.log(0)
浏览:378 标签: touch事件 时间: 2017-09-04 23:14
关于移动端 rem 布局的一些总结

关于移动端 rem 布局的一些总结

        【资源一】基础知识恕不回顾        基础知识参考以下两篇博客:http://isux.tencent.com/web-app-rem.htmlhttp://www.w3cplus.com/css3/define-font-size-with-css3-rem        【资源二】淘宝m站首页的动态实现        学习http://m.t
浏览:515 标签: rem 移动端 时间: 2017-08-29 10:53
前端页面适配的rem换算

前端页面适配的rem换算

                为什么要使用rem        之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale)。    例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类推。        但直接这样强制页面缩放过于粗暴,会导致页面图片文字失真模糊。        px是相对固定单位,字号
浏览:469 标签: rem 时间: 2017-08-28 17:49
移动端适配之rem

移动端适配之rem

        随着手机等移动设备的普及,移动端带来的流量已经不可忽视,一个网站不只是只有pc的页面就足够了,移动端的适配已经势在必行。但是移动设备种类繁多,屏幕尺寸也千奇百怪,能不能找到一种方式可以适配所有的手机屏幕呢?答案就是rem。        俗话说 “授人以鱼不如授人以渔”,但今天我就反其道而行,就是授人以鱼的。因为要跟你说什么设备像素比、css像素、ppi等东西
浏览:376 标签: rem 移动端 时间: 2017-08-28 15:56
了解真实的『rem』手机屏幕适配

了解真实的『rem』手机屏幕适配

        rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用。使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果。    rem 的官方定义『The font size of the root element.』,即以根节点的字体大小作为基准值进行长度计算。一般认为网页中的根节点是 html 元素,所以
浏览:357 标签: rem 时间: 2017-08-25 17:51
web移动端Fixed布局解决iOS下的Fixed+Input BUG现象

web移动端Fixed布局解决iOS下的Fixed+Input BUG现象

        移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的
浏览:425 标签: 移动端 fixed 时间: 2017-07-31 15:50

邮箱快速注册

忘记密码