css注意事项

框架- 不推荐

JS

手机端对ES5的特性已经全部都支持的很好了

对手势的处理，zepto中有几个很有用的事件，swipe，swipeLeft，right，up，down，一类的，还有tap，我们可以看下zepto的源码：zepto，自己写一个swipe的基类，徒手写个下托刷新禁止页面惯性反弹的代码，这里给个思路，比如我们检测touchmove的位置快到达页面【或者容器】底部的时候，阻止touchmove，做容器或者页面translate移动，再在下部埋一个loading，touchend之后再做缓动回复，应该普通前端都能做到。

swipe.js 做幻灯用的，但是我使用swipe框架的经历也是很痛苦的，比如无法很好的设置滚动过的距离，自定义缓动效果，还有无法它自己本身带的一些问题，比如横竖屏的时候复位问题，动态插入子节点重排等，让我第一次用的时候越开发越伤心，后来干脆也是自己实现。

划屏活动页的组件：
https://github.com/xiaojue/EasySlide

CSS

common css
https://gist.github.com/xiaojue/8bac56fb488532e7857f

Rules

使用缩放、倾斜这种手段hack来突破极限，比如最小字体，自己画的伪类图标
能css画的不要用图
大小需要自适应的图标做成字体的不要画
能flex布局的不要浮动，不要用绝对定位（不利于页面布局的扩展）

常见组件

 * touch对应的swipe事件。
 * 各种滑动翻页效果。
 * 简单的小游戏框架。
 * 视频和音频的包装。
 * 各种lazyload。
 * 各种keyframes效果收集。
 * 拉拽刷新。
 * PC相同的：浮层，tip，气泡，分享，添加主屏

常用的css模块

1. 一行省略

//一行省略
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

//多行省略
//移动端大部分是webkit内核
-webkit-line-clamp: 2;
display: -webkit-box;

-webkit-box-orient:  //子元素的排列方式
text-overflow: ellipsis

2. input date

input type date的placeholder支持性有问题，使用placeholder的目的是为了让用户更准确的输入文字。但是iOS上不显示placeholder文字，但是安卓的部分机型没有datepicker也不会显示placeholder
兼容性如下：
PC：

* Safari不支持，placeholder正常显示
* Firefox 不支持，placeholder正常显示
* Chrome支持datepicker，显示年、月、日格式，忽略placeholder

移动：

* iPhone5 iOS7 有datepicker，但不支持placeholder
* Android 4.04 无datepicker

问题解决方法：
设置type为text，此时支持placeholder，当触摸或者聚焦的时候，使用JS切换使其触发datepicker功能

<input placeHolder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" id="date" >

3. 快速回弹滚动

早期移动端的浏览器不支持非body元素的滚动条所以一般借助iScroll，安卓4.0和iOS5.0解决了滚动条不可见，增加了快速回弹滚动效果。
在iOS上拥有像Native的滚动效果：

 div{
     overflow: auto;
     -webkit-overflow-scrolling: touch;
 }

4. 移动端取消touch高亮效果

所有a标签在触发点击时，或者设置了伪类:active的元素，默认都会在激活状态时显示高亮框。禁止高亮框的办法：

-webkit-tap-highlight-color: rgba(0,0,0,0);

大部分机子有效，但是三星自带浏览器无效。还有一种办法是不使用a标签

5. 禁止保存或拷贝图像

通常你长按img，会弹出选项：存储图像或者拷贝图像，禁止方法

 img{
     -webkit-touch-callout: none;
 }

6. 清除输入框内阴影

iOS上，输入框默认有内部引用，但无法使用box-shadow来清除。

 input, textarea{
     border: 0;/*法1*/
     -webkit-appearance: none; /*方法2*/
 }

7. 横竖屏

 window.addEventListener('orientationchange', function() {
   // rerender something
});

console.log(window.orientation); // 0, 90, 180, -90 顺时针角度

<style media="all and (orientation:portrait)" type="text/css">
    /* 竖屏 */
</style>

<style media="all and (orientation:landscape)" type="text/css">
    /* 横屏 */
</style>

8. Flex伸缩布局

 .container {
  display: -webkit-flex;
  display: flex;
}
.initial {
  -webkit-flex: initial;
          flex: initial;
  width: 200px;
  min-width: 100px;
}
.none {
  -webkit-flex: none;
          flex: none;
  width: 200px;
}
.flex1 {
  -webkit-flex: 1;
          flex: 1;
}
.flex2 {
  -webkit-flex: 2;
          flex: 2;
}

flex box 兼容写法

移动端的性能优化和统计

分散成不同的几个资源下载，总时间比较快，比如活动页面，h5小游戏页都是这样。可以统一把资源图拆开加载，然后增加loading即可。

移动端网页布局方法

em与rem

em是父元素的fontsize的倍数表示，rem是root即为html的fontsize的倍数表示。html.style.fontSize=12px; 那么1rem即为12px
移动端的默认字体为16px，如果想要1rem表示为10px，需要10 % 16 = 0.625; 即为62.5%，就可以把设计稿的px转换成rem来自适应了。

(网络原因，大神的js看不了)

首先根据设计稿的宽度设置一个基值base，然后用js获取当前窗口宽度width，fontSize = width/(base/100), ps里的px除以100就得到了任何宽度环境下rem值。有些浏览器rem单位是存在bug的，比如比例值不准，这时只要活得这个不准的比例再转换成准的，赋值给fontSize，之后再处理一下旋转屏幕的情况，resize的情况。

开发规范

字体设置

 body {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;
}

iOS 4.0+ 使用英文字体 Helvetica Neue，之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi。需补充说明，华文黑体并不存在iOS的字体库中(http://support.apple.com/kb/HT5878)，但系统会自动将华文黑体 STHeiTi 兼容命中系统默认中文字体黑体-简或黑体-繁

Heiti SC Light 黑体-简 细体 （iOS 7后废弃）
Heiti SC Medium 黑体-简 中黑
Heiti TC Light 黑体-繁 细体
Heiti TC Medium 黑体-繁 中黑

原生Android下中文字体与英文字体都选择默认的无衬线字体

4.0 之前版本英文字体原生 Android 使用的是 Droid Sans，中文字体原生 Android 会命中 Droid Sans Fallback
4.0 之后中英文字体都会使用原生 Android 新的 Roboto 字体
其他第三方 Android 系统也一致选择默认的无衬线字体

避免图中的长按弹出菜单与选中文本的行为

a, img {
    -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */
}
html, body {
    -webkit-user-select: none;   /* 禁止选中文本（如无文本选中需求，此为必选项） */
    user-select: none;
}

发布前必须检查

Copy from http://alloyteam.github.io/Spirit/modules/Standard/

所有图片必须有进行过压缩
考虑适度的有损压缩，如转化为80%质量的jpg图片
考虑把大图切成多张小图，常见在banner图过大的场景

加载性能优化, 达到打开足够快

* 数据离线化，考虑将数据缓存在 localStorage
* 初始请求资源数 < 4 注意！
* 图片使用CSS Sprites 或 DataURI
* 外链 CSS 中避免 @import 引入
* 考虑内嵌小型的静态资源内容
* 初始请求资源gzip后总体积 < 50kb
* 静态资源(HTML/CSS/JS/Image)是否优化压缩？
* 避免打包大型类库
* 确保接入层已开启Gzip压缩（考虑提升Gzip级别，使用CPU开销换取加载时间） 注意！
* 尽量使用CSS3代替图片
* 初始首屏之外的静态资源（JS/CSS）延迟加载 注意！
* 初始首屏之外的图片资源按需加载（判断可视区域） 注意！
* 单页面应用(SPA)考虑延迟加载非首屏业务模块
* 开启Keep-Alive链路复用

运行性能优化, 达到操作足够流畅

* 避免 iOS 300+ms 点击延时问题 注意！
* 缓存 DOM 选择与计算
* 避免触发页面重绘的操作
* Debounce连续触发的事件(scroll / resize / touchmove等)，避免高频繁触发执行 注意！
* 尽可能使用事件代理，避免批量绑定事件
    * 就是使用on的父级绑定事件，冒泡到子元素
* 使用CSS3动画代替JS动画
* 避免在低端机上使用大量CSS3渐变阴影效果，可考虑降级效果来提升流畅度
* HTML结构层级保持足够简单
* 尽能少的使用CSS高级选择器与通配选择器
    * 不使用 *，把需要的的元素直接列举出来
    * 高级选择器就是，:first-child, :first-type, ::before, ::after, 属性选择器，>, ~
* Keep it simple

其他

利用CSS3边框背景属性
使用-webkit-border-image来定义这个按钮的样式。
块级化a标签
请保证将每条数据都放在一个a标签中，为何这样做？因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。
如何去除Android平台中对邮箱地址的识别
在Android平台，它会自动检测邮件地址，当用户touch到这个邮件地址时，Android会弹出一个框提示用户发送邮件，如果你不想Android自动识别页面中的邮件地址，你不妨加上这样一句meta标签在head中

如何去除iOS和Android中的输入URL的控件条

setTimeout(scrollTo,0,0,0);

请注意，这句代码必须放在window.onload里才能够正常的工作，而且你的当前文档的内容高度必须是高于窗口的高度时，这句代码才能有效的执行。

如何禁止用户旋转设备
做不到！
如何检测用户是通过主屏启动你的webapp
从主屏启动的webapp和浏览器访问你的webapp最大的区别是它清除了浏览器上方和下方的工具条，这样你的webapp就更加像是nativeapp了。还有一个区别是window对像中的navigator子对象的一个standalone属性。iOS中浏览器直接访问站点时，navigator.standalone为false,从主屏启动webapp时，navigator.standalone为true，我们可以通过navigator.standalone这个属性获知用户当前是否是从主屏访问我们的webapp的。
如何关闭iOS中键盘自动大写
我们知道在iOS中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，根据某些业务场景，可能我们需要关闭这个功能，移动版本webkit为input元素提供了autocapitalize属性，通过指定 autocapitalize=”off” 来关闭键盘默认首字母大写。
iOS中如何彻底禁止用户在新窗口打开页面, iOS中如何禁止用户保存图片＼复制图片
webkit-touch-callout样式属性为none
iOS中如何禁止用户选中文字
-webkit-user-select属性为none
iOS中如何获取滚动条的值
桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的，但在iOS中你会发现这两个属性是未定义的，为什么呢？因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获取滚动条的值呢？

通过window.scrollY和window.scrollX我们可以得到当前窗口的y轴和x轴滚动条的值。

常用的css模块

1. 一行省略

//一行省略
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

//多行省略
//移动端大部分是webkit内核
-webkit-line-clamp: 2;
display: -webkit-box;

-webkit-box-orient:  //子元素的排列方式
text-overflow: ellipsis

2. input date

* Safari不支持，placeholder正常显示
* Firefox 不支持，placeholder正常显示
* Chrome支持datepicker，显示年、月、日格式，忽略placeholder

移动：

* iPhone5 iOS7 有datepicker，但不支持placeholder
* Android 4.04 无datepicker

问题解决方法：
设置type为text，此时支持placeholder，当触摸或者聚焦的时候，使用JS切换使其触发datepicker功能

<input placeHolder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" id="date" >

3. 快速回弹滚动

 div{
     overflow: auto;
     -webkit-overflow-scrolling: touch;
 }

4. 移动端取消touch高亮效果

所有a标签在触发点击时，或者设置了伪类:active的元素，默认都会在激活状态时显示高亮框。禁止高亮框的办法：

-webkit-tap-highlight-color: rgba(0,0,0,0);

大部分机子有效，但是三星自带浏览器无效。还有一种办法是不使用a标签

5. 禁止保存或拷贝图像

通常你长按img，会弹出选项：存储图像或者拷贝图像，禁止方法

 img{
     -webkit-touch-callout: none;
 }

6. 清除输入框内阴影

iOS上，输入框默认有内部引用，但无法使用box-shadow来清除。

 input, textarea{
     border: 0;/*法1*/
     -webkit-appearance: none; /*方法2*/
 }

7. 横竖屏

 window.addEventListener('orientationchange', function() {
   // rerender something
});

console.log(window.orientation); // 0, 90, 180, -90 顺时针角度

<style media="all and (orientation:portrait)" type="text/css">
    /* 竖屏 */
</style>

<style media="all and (orientation:landscape)" type="text/css">
    /* 横屏 */
</style>

8. Flex伸缩布局

 .container {
  display: -webkit-flex;
  display: flex;
}
.initial {
  -webkit-flex: initial;
          flex: initial;
  width: 200px;
  min-width: 100px;
}
.none {
  -webkit-flex: none;
          flex: none;
  width: 200px;
}
.flex1 {
  -webkit-flex: 1;
          flex: 1;
}
.flex2 {
  -webkit-flex: 2;
          flex: 2;
}

框架- 不推荐

JS

CSS

Rules

常用的css模块

7. 横竖屏

8. Flex伸缩布局

移动端的性能优化和统计

移动端网页布局方法

em与rem

开发规范

字体设置

避免图中的长按弹出菜单与选中文本的行为

发布前必须检查

其他

常用的css模块

7. 横竖屏

8. Flex伸缩布局

猜你喜欢