meta篇

1.视窗宽度

<meta name="viewport" content="width=device-width", initial-scale=1.0, minimum-scale=1.0, maxinum-scale=1.0,user-scalable=no"">

其中width=device-width是设置视窗宽设备宽度,还可以固定宽度,例如:width=640则是640px的宽度(常见于微信);
initial-scale=1.0: 设置缩放比例为1.0;
minimum-scale=1.0和maximum-scale=1.0: 最大缩放比例和最大缩放比例;
user-scalable-no: 禁止用户自由缩放,user-scalable默认值为yes.

<meta name="viewport" content="width=device-width, initscale=1.0, user-scalable=no">

自动识别格式

<meta name="format-detection" content="telephone=no">

content里面的参数: telephone是禁止浏览器自动识别手机号码,email=no是禁止浏览器自动识别Email.

完整模板

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<meta name="format-detection" content="telephone=no">

<meta name="formate-detection" content="email=no">

CSS篇

body {
  font-family: "Helvetica Neue",
  Helvetica, STHeiTi, sans-serif;
  /* 使用无衬线字体 */
}
a, img {
  -webkit-touch-callout: none;
  /* 禁止长按链接与图片弹出菜单 */
}
html, body {
  -webkit-user-slect: none;
  /* 禁止选中文中 */
  user-select: none;
}
button, input, optgroup, select, textarea {
  -webkit-tap-highlight-color: rgab(0, 0, 0, 0);
  /* 去掉a, input和button点击时的蓝色外边框和灰色半透明背景 */
}
input::-webkit-input-placeholder {
  color: #ccc;
  /* 修改webkit中input的planceholder样式 */  
}
input:focus::-webkit-input-placeholder {
  color: #f00;
  /* 修改webkit中focus状态下input的planceholder样式 */
}
body {
  -webkit-text-size-adjust: 100%!important;
  /* 禁止Ios调整字体大小 */
}
input::-webkit-input-speech-button {
  display: none;
  /* 隐藏Android的语音输入按钮 */
}

flex基础篇

这里假设flex容器为.box, 子元素为item

定义容器为flex布局

    .box {
      display: -webkit-flex; 
      display: flex;
    }
    /* 行内flex */
    .box {
      display: -webkit-inline-flex;
      display: inline-flex;
    }
  

容器样式

  .box {
    flex-direction: row | row-reverse | column | column-reverse;
    /* 主轴方向: 从左到右(默认) | 从右到左 | 上到下 | 下到上 -->
    flex-wrap: norwap | wrap | wrap-reverse;
    /* 换行: 不换行(默认) | 换行 | 换行并第一行在下方 */
    flex-flow: flex-direction | flex-wrap;
    /* 主轴方向和换行简写 */
    justify-content: flex-start | flex-end | center | space-between | space-argound;
    /* 主轴对齐方式: 左对齐(默认) | 右对齐 | 居中对齐 | 两端对齐 | 平均分布 */
    align-items: flex-start | flex-end | center | baseline | stretch;
    /* 交叉轴对齐方式: 顶部对齐(默认) 顶部对齐 居中对齐 | 上下对齐并铺满 | 文本基线对齐 */
    align-content: flex-start | flex-end | cneter | space-between | space-around | strech;
    /* 多主轴对齐: 顶部对齐(默认) | 顶部对齐 | 居中对齐 | 上下对齐并铺满 | 上下平均分布 */
  }
  

子元素样式

  item {
    order: integer;
    /* 排序: 数值越小,越排前,默认为0 */
    flex-grow: 
      /*放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小，以此类推）*/
    flex-shrink: 
    /*缩小：默认1（如果空间不足则会缩小，值为0不缩小）*/
    flex-basis:  | auto; /* default auto */
    /*固定大小：默认为0，可以设置px值，也可以设置百分比大小*/
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    /*flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，*/
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
    /*单独对齐方式：自动（默认） | 顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/
  }

小技巧篇

自定义苹果图标

在网站文件根目录放一个 apple-touch-icon.png 文件，苹果设备保存网站为书签或桌面快捷方式时，就会使用这个文件作为图标，文件尺寸建议为：180px × 180px。

自定义favicon

<link rel="icon" href="favicon.icon" mce_href="favicon.icon" type="image/x-icon">

定义浏览器点击行为

<a href="tel: 020-10086">打电话: 020-10086</a>

<a href="sms: 10086">发短信</a>

<a href="mailto:me@22.clue>发送邮件</a>

定义上传文件类型和格式

<input type="file" accept="image/*">

上面的文件上传框中,accept可以限制上传文件的类型,参数image/是所有图片类型,点击会弹出图库,也可以指定图片格式,参数设置成image/png则可以限制图片类型png,参数如果为video/则是选择视频的意思;accept还可以设置多个文件格式,语法为accept=”image/gif, image/jpeg”;

使用box-shadow改变(挡住)表单自动填充后的黄色

  input:-webkit-autofill, textarea: -webkit-autofill, select:-webkit-autofill {
    box-shadow: inset 0 0 0 1000px #fff;
  }

用CSS实现省略号截断

white-space: nowrap; text-overflow: elipsis;

使用border绘制小三角

原理是:上下和左右的边框对接其实是个斜角,利用这个特性,使其中一边的边框透明,另外一边写成想要的颜色并隐藏对边,就可以变成小箭头形状。

  border-width: 10px 10px 10px 0;
  /* 三角形 */
  border-color: transparent #fff;
  border-style: solid;
  width: 0; 

Toptips写法

<div class="box">嗨！点击菜单就可以关注兮兮公众号了哟

.box {
  position: relative;
  padding: 0 20px;
  width: 380px;
  height: 80px;
  border-radius: #efefef;
  font-size: 18px;
  line-height: 80px;
}
.box:after {
  position: absolute;
  top: 50%;
  left: -15px;
  z-index: 1;
  display: block;
  margin-top: -15px;
  width: 0;
  border-color: transparent #efefef;
  border-style: solid;
  border-width: 15px 15px 15px 0;
  content: '';
}

以上内容绝对纯手打,没有任何机打痕迹。
转载自作者Heleth