素日里的小结1

移动端常见适配方案

1. 弹性盒布局(display: flex), 如拉勾网

• 特点: 关键元素高度和位置不变, 容器元素做伸缩变换。
• 用法: (1). 文字使用流失布局(em单位); (2). 图片等比缩放

2. 使用rem单位(网易做法)

• (1). 设1rem = 100px, 设计稿750px, body宽度为7.5rem, 在不同的屏幕宽度下: font-size = width / 7.5rem;
• (2). 设置meta标签, ;
• (3). 当设备分辨率大于设计稿750px, 设置body宽度始终为7.5rem;

3. 使用rem单位(淘宝做法)

• (1). 设置meta标签, device-width = 设备物理分辨率 / (devicePixelRatio * scale), 当scale = 1时, 即device-width = 设备物理分辨率 / dpr;
• (2). var scale = 1 / devicePixelRatio, document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
• (3). html元素的font-size的计算公式，font-size = deviceWidth / 10, 设计稿750px, 则font-size为75px, 元素rem尺寸为: 150px / 75px = 2rem;

4. bootstrap栅格布局

vue项目总结

1. 问题: vue中请求返回的数组(嵌套对象), 改变对象value, 可以触发视图的更新; 若将请求返回的数组与本地数组拼接, 成为了普通数组, 改变对象value, 不能触发视图的更新; 解决方法: vue是通过检测get, set才得知数据是否更新的，而对于普通数组来说，是没有get，set方法的，所以需要我们自己手动触发，需要发送消息通知vue this.list[index].flag = true; Vue.set(this.list, index, this.list[index]);

2. 问题: 列表在ios上滑动卡顿 解决方法: ul { overflow-y: auto; -webkit-overflow-scrolling: touch; }

日常问题

1. 关于在谷歌浏览器中input[type="password"]框设置autocomplete=off失效问题 解决方法: 同事去掉input的id和name属性, 如果要加name, 在onchange事件中加

2. npm安装开发环境的包: npm install --save-dev 或者 npm i -D; npm安装生产环境的包: npm install --save -dev;

3. 移动端web app UI框架

UI框架	星星	语言	前端框架
Ionic	34K	typescript	angular
ant-design	27.6k
weui	18.5k
vux	12.2k		vue
Framework7	12.2k
amazeui	11.7k
mui	8.9k
onsenui	6.3k
sui	5.5k

• 4. 前端最新资讯网址

  网站名	链接
  EchoJS	EchoJS官网
  DailyJS	DailyJS官网
  Front-End Front	Front-End Front官网

• 5. 前端技术刊物

  网站名	链接
  ES.next News	ES.next News官网
  Web Design Weekly	Web Design Weekly官网

• 6. 常用清除浮动的方法

  .clearfix:after {
      content: "";
      display: table;
      clear: both;
  }
  复制代码

• 7.设置常见的reset样式

/* IE浏览器对输入控件有自己的font-family，需要统一 */
input,
textarea,
button{
	font-family: inherit;
}

/* Chrome浏览器会在输入控制聚集的时候添加一个蓝色的outline */
input:focus,
textarea:focus,
select:focus {
	outline: none;
}

/* 去掉textarea的可拉大小功能 */
textarea {
	resize: none;
}

/* IOS Safari在横屏的时候会放大字体，第二个属性让滑动更流畅 */
html {
	-webkit-text-size-adjust: 100%;
	-webkit-overflow-scrolling : touch;
}

/* 统一标签的margin值和p标签的line-height */
body, p, h1, h2, ul, ol, figure, li {
	padding: 0;
	margin: 0;
}
h1, h2, p {
	line-height: 150%;
}

/* 去掉select的默认样式 */
select{
	-webkit-appearance: none;
}

/* 如果有输入内容IE会给输入框右边加一个大大的X */
input::-ms-clear {
	display: none;
	width: 0;
	height: 0;
}

/* 去掉number输入框右边点击上下的小三角 */
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}
input::-webki-outer-spin-button {
    -webki-appearance: none;
}
复制代码

• 8.图片压缩 使用tinypng.com

前端常见反爬虫策略

• 1. 定义font-face字符集 例子：猫眼电影 使用font-face定义字符集, 并通过unicode去映射展示。 每次刷新，字符集的url都会发生变化。
• 2. background拼凑式 例子：美团 数字为图片，根据background-position进行偏移，显示不同的字符。
• 3. 字符穿插式 例子：微信公众号文章

• 4. 伪元素隐藏式

     例子：汽车之家

     把关键字做到伪元素的content里面，

     div::after {
         content: "哈撒给";
     }
     
     复制代码

• 5. 元素定位覆盖式 例子：去哪儿 4位数字，先用4个标签展示，其中有的数字是错的，再用几个标签（带正确的数字）去覆盖错误的数字。
• 6. 增加一些无用的dom数字节点

页面元素动起来的动画库

• 1. scrollreveal.js
• 2. animate.css + wow.js