视口设置: <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=.5,minimum-scale=.5,maximum-scale=1"> 默认不设置viewport一般可视区宽度在移动端是980 width 可视区的宽度 (number||device-width) user-scalable 是否允许用户缩放 (yes||no) iOS10无…

移动端用touch还是click? 在移动端开发中,click事件有300ms的延时,由来源于iphone处理双击缩放功能种下的坑.因为用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例.为了区分用户的操作是双击还是单击,就增加了300ms的延时等待!随着touch端界面的发展,用户体验的提高使得300ms让人难以忍受. touch事件存在的问题: 某些场景下存在点击穿透的问题.(在移动端,手指点击一个元素,会经过:touchstart --> touchmo…

移动端适配 通过rem适配 em: 根据元素自身的字体大小来计算自己的尺寸 rem: (root em) 根据根节点(html)的字体大小来计算自己的尺寸   我们知道,在不同的手机设备,分辨率大小是不一样的.为了使页面在不同分辨率下等比缩放,需要动态的设置Html的字体大小来达到页面等比缩放的效果.我们可以如下设置rem值: function() { var html = document.querySelector("html"); var width = html.getBoun…

移动端事件 三个事件 touchstart 手指触摸 相当于PC端 mousedown touchend 手指抬起 相当于PC端 mouseup touchmove 手指滑动 相当于PC端 mousmove 注意: touch事件在chrome的模拟器下,部分版本通过on的方式来添加事件无效,这时候需要事件监听的方法 addEventListener("事件名",函数,冒泡或捕获),它有以下优点: 不会存在事件前后覆盖问题 在chrome的模拟器下可以一直识别 写法如下: box.ad…

Flex布局 Flex即Flexible Box,写法为:display:flex(旧版:display: -webkit-box) 在Webkit内核下,需要加-webkit前缀: .box{ display: -webkit-flex; //safari display: flex; } 注意: 1.css 列(CSS columns)在弹性盒子中不起作用 2.float, clear and vertical-align 在flex项目中不起作用 新旧兼容写法: .box{ display…

1. <input id="mobile" maxlength="11> 2. input type 为 number 时,maxlength 失效 <input type="number" id="mobile" oninput="if(value.length>11)value=value.slice(0,11)"> reset 默认样式 input[type=color], inp…

input{-webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none;}…

*{   padding: 0;   margin: 0; } ul,ol{   list-style: none; } a,a:hover,a:link,a:visited,a:active{   text-decoration: none;   color: black; }   :歪比巴卜…

正在学习中,不断改错... 学习了一段时间nodejs,对其中的很多东西还不是很理解,在网上看过很多的例子,希望通过自己的一些总结让自己了解的更全面些,同时也作为学习笔记留存备忘. 准备工作 nodejs安装 相关资料 powerdesigner数据建模 运行环境 mac10.11.6 webStorm11 node4.2.2 服务端目的 1.数据接收:验证用户提交的数据是否正确. 2.数据验证:存储客户端提交的数据. 3.数据处理:根据用户提交的数据,以表关系方式存入数据库. 4.数据返回:处…

html的input输入框在Chrome浏览器里是有默认样式的,当它获得焦点时,即使你没有为它设置:focus时的样式,Chrome浏览器还是会给它加上蓝色的边框,今天百度找到有个方法可以去除该默认样式. 给需要去除默认样式的元素加上这么一条CSS属性: -webkit-appearance: none;…