Skip to content

Instantly share code, notes, and snippets.

View jokemmy's full-sized avatar
😏
Working for my life!

Zhenyu.Xu jokemmy

😏
Working for my life!
View GitHub Profile
<!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 -->
<html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
<head>
    <!-- 声明文档使用的字符编码 -->
    <meta charset='utf-8'>
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- 页面描述 -->
    <meta name="description" content="不超过150个字符"/>
@jokemmy
jokemmy / 横竖屏样式.css
Created December 12, 2017 05:41
横竖屏样式
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen

提高滚动流畅度

passive-event-listeners

addEventListener 的参数定义

target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);
@jokemmy
jokemmy / dataset.md
Last active September 13, 2017 14:45
dataset 使用
<div id="day2-meal-expense" 
  data-drink="coffee" 
  data-food="sushi" 
  data-meal="lunch">¥20.12</div>
var expenseday2 = document.getElementById('day2-meal-expense');  
var typeOfDrink = expenseday2.dataset.drink;
@jokemmy
jokemmy / geolocation.md
Last active September 12, 2017 09:08
浏览器地理位置API

在使用地理位置API之前首先要检测浏览器是否支持,如下测试代码:

if (navigator.geolocation) {
  // 想干嘛就干嘛
}

当然,这个if判断也能用来进行浏览器的判断,可以区分IE678浏览器与IE9和其他现代浏览器。这在我们使用某些CSS3属性时非常有用,检测浏览器是否支持某些CSS3属性相对比较麻烦,可以折中下,即在知道浏览器对该CSS3属性的支持情况下检测浏览器,一般而言就是区分区分IE678浏览器和其他浏览器,这正好与navigator.geolocation的检测是一致的。

@jokemmy
jokemmy / overflow-float.md
Created September 12, 2017 07:34
消除浮动

在响应式的左右布局中挺有用,也可以用在表单中代替常用的 grid 布局

// less
.clearfix {
  &:before,
  &:after {
    content: "";
 display: table;
@jokemmy
jokemmy / math.doc
Created September 7, 2017 08:55
一些数学术语翻译
negative sign
数学 mathematics
负号 minus; minus sign; negative ...
负号 minus; minus sign; negative indication; negative sign◇负号端子 minus terminal; 负号项 ...
负号的 subtractive
负号位 minus zone
减号;负号 -minus
正负号 plus-minus sign; plusmn;plus or minus; ±plus or minus
数学 mathematics 他数学方面训练不够。 he was lacking in mathematical training.; 数学归纳法 [ ...
负号穿孔 minus punch
@jokemmy
jokemmy / blob-filename.js
Created September 1, 2017 07:49
在 formdata 里面放 blob 时可以添加文件名
formdata.append( 'file', blob, 'filename.xx' );
@jokemmy
jokemmy / CSS外边距合并.html
Last active September 1, 2017 03:44
css  知识点和技巧
<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta name="force-rendering" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<title></title>
<style>
@jokemmy
jokemmy / offsetHeight-clientHeight-scrollHeight.md
Last active September 13, 2017 09:26
offsetHeight, clientHeight与scrollHeight的区别

normal elemtnt

clientHeight

box-sizing: border-box;

clientHeight = height - borderTop - borderBottom - scrollBar

box-sizing: content-box;