袁森Simon-CSDN博客

原创 media queries常用介绍及兼容性问题解决

媒体查询media queries，响应式布局的利器。本文分两块内容：一，常用介绍二，如何解决IE不支持的问题一、常用介绍如果有能力看官网（强烈推荐）的话，下面的介绍（常用的部分）可以不用看了，地址：https://www.w3.org/TR/css3-mediaqueries 1，常用的两种引入 a, 通过link media =“type and （attribut

2016-12-20 22:55:55 814

原创当parseInt 遇到科学计数法

最近项目，首页中需要将后台返回的金额以 xx亿 xx万 xx元的形式显示，转换代码如下：/** 设置总金额* */function setTotalAmount(amount){ yi=parseInt(amount/Math.pow(10,8)); wan=parseInt((amount%Math.pow(10,8))/Math.pow(10,4)); yuan=p

2016-11-11 20:27:42 1624

原创移动端冒泡的touch 事件挡也挡不住

demo案例如下： body 有多个直接子元素，普通文档流布局，另一个直接子元素，满屏fixed定位，其内部也有多个子元素，一屏幕下显示不全，y轴滚动显示；该场景下，滚动fixed定位的内部元素，至底部后，Android机上fixed定位的元素回诡异的向上移动，带动body的直接子元素一起滚动。如图： touch 事件可以阻止默认 event.preventDefault ；如果加给紫色框，

2016-11-07 23:49:31 4181

原创固定定位在Android机上的显示问题

项目中遇到一个问题，固定定位一个button在屏幕下侧，中部有input输入，在Android机上，输入法软键盘从下方弹出后，挤压了文档流高度，造成底部固定定位的button按照挤压后的高定位，造成跟input信息重叠问题。解决方案：显示区域的高度受输入法占位影响，我们可以在文档流加载后，写死文档流信息所参考的高度，比如，dom元素分三块，占满屏高（20+70+10），如果用vh 单位，就会出现

2016-10-30 22:35:39 1067

原文：https://www.w3.org/Style/Examples/007/units.en.htmlEM，PX，PT，CM，IN….CSS提供了一些表示长度的单位，其中一些时间比较久的单位来自印刷排版界，比如point(pt) 和 pica(pc),还有我们每天都会用到的、广为人知的，比如 centimeter(cm) 和 inch(in)。还有一个由CSS而生的神奇单位：px；那是不是不

2016-10-01 19:11:02 1060

原创从dpr谈起到移动端适配问题(一)

一、dpr先看个公式： devicePixelRatio （设备像素比简写dpr）=physical pixels/ logical pixels(也就是device-independent pixel) 物理像素点：硬件上最小的显示点位，硬件不同最小点位就可能存在差异设备独立像素点：系统设定的最小的显示点位，不可能小于物理像素点，这个单位的意义在于css样式中px 所对应的值，系统设

2016-09-30 14:41:05 2597

原创关于前端基础知识储备的几点分享

周六有幸做了一次线下分享，其中关于前端基础知识储备几点如下：一、try 大法亲手实操是掌握知识的很有效的方法，要常去控制台做test；1，console里敲代码，测属性和方法；比方 Array的length属性，delete方法，slice方法，reverse方法对原数组的影响以及返回值是什么，你想要的是返回值还是原对象。2，对elements 直接修改调试，可以改innHTML 可以修改属性

2016-09-25 22:43:46 2475

原创《js高级程序设计》之最佳实践(笔记)

一、可维护性松散耦合1.解耦HTML/JS 2.解耦CSS/JS 3.解耦应用逻辑/事件处理程序编程实践1.尊重对象所有权 2.避免全局量//before： var name='Jon'; function sayName(){alert(name)};//after: var myApplication={ name:'Jon', sa

2016-09-18 18:49:46 402

原创 Duff 装置

create by Tom Duff, first used in C；first used in JS by Jeff Greenberg基本概念：通过迭代的次数是否为8的倍数讲一个循环展开为一系列的语句//credit: Jeff Greeberg for JS implementation of Duff's Device//假设value.length>0var iterations=

2016-09-18 18:39:51 615

原创浅谈工作中如何规避思维定式

有朋友工作中遇到一些问题，让帮忙处理下，分析后，发现其实并不是技术问题，而是思考问题的方式产生了思维定式，下面事例浅谈如何规避：朋友的问题：实现多个div 绑定点击事件事件为被点击div增加指定class,同时其余div移除此class，前提是不允许使用jQuery。当然，jQuery操作起来非常简单，addClass/removeClass 秒秒钟的事情，具体为什么不让用jQuery也

2016-08-23 20:01:50 1274

原创浅谈对产品原型的深入分析

周初，客户安排了一个小的页面–泰康20周年直播，比较简单，样式我却调整了三版，主要原因还是对需求没能深入的分析，在此汇总分析如下：首先，项目原型，底部见图，上部分直播窗口，两个频道切换按钮，和下部图文装饰。第一版拿到原型后，根据经验自认为是全屏布局，所以根据原型比例，设定直播窗口大约占比40%，其余以次固定定位；同时用video标签引入一个视频，做为demo，并加上设计图中的暂停按钮，第

2016-08-18 20:44:33 927

原创 Canvas 绘制动态效果线框

本周项目，移动端页面开发，要求丰富的动效，主要技术实现 Canvas ；其中绘制动态线框，走了点弯路，所谓的弯路是逻辑问题，非技术实现方式。一：涉及技术点，具体如下：1，html 中引入canvas 标签，设置宽高；<canvas id="canvas" width=xx height=xx>您的浏览器不支持canvas，请更换版本</canvas>2, js中定义ctx–beginPath–

2016-08-13 23:33:22 7309 3

原创 button重叠后的点击事件

最近在做一个基于微信的保险产品，遇到一些逗比的事情，给大家乐呵乐呵。其中一个页面为投保人信息表单，底部固定定位的‘去支付’button，表单中点选非身份证会出现性别和年龄的input;其中年龄的日期选择引入的是个插件，触发为一个透明的button：先看下两个正常的点击效果：点击支付：点击日期请选择：页面滚动时日期button刚好到‘去支付’button；额，逗比的事情来了，手机

2016-08-06 01:11:36 5197

原创 CSS 中相对长度 rem 和 em 如何区别

rem vs em做为相对长度单位的俩个活宝，都是以倍数关系定长度，只是参照物不一样，这里就事例分析两者的区别： 1，em 的参照倍数对象为其父元素 2，rem的参照倍数对象为根元素事例代码：<html style="font-size:14px"><div style="font-size:14px;background:#bbb;border:1px solid #f00;margin-

2016-08-01 22:31:25 3401 1

simonyuan100的博客