素日里的小结1

时间 2019-12-08

标签日里小结繁體版

原文原文链接

移动端常见适配方案

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项目总结

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

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

平常问题

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

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

移动端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

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

前端最新资讯网址

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

1. 前端技术刊物
网站名连接

ES.next News ES.next News官网

Web Design Weekly Web Design Weekly官网

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

经常使用清除浮动的方法

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

7.设置常见的reset样式css

/* 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都会发生变化。
1. background拼凑式例子：美团数字为图片，根据background-position进行偏移，显示不一样的字符。
1. 字符穿插式例子：微信公众号文章
1. 伪元素隐藏式html
  
  例子：汽车之家前端
  
  把关键字作到伪元素的content里面，vue
```
div::after {
    content: "哈撒给";
}

复制代码
```
1. 元素定位覆盖式例子：去哪儿 4位数字，先用4个标签展现，其中有的数字是错的，再用几个标签（带正确的数字）去覆盖错误的数字。
1. 增长一些无用的dom数字节点

页面元素动起来的动画库

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