每次打开今日，不知道写什么，还好一个私活把pc端网站交了出去，老板还是比较满意，下面就是移动端的了。就边写边记，当笔记好了。如果认为low的请越过。感觉对自己有些帮助的，请留言或点赞谢谢！

一、大体注意点：

1、兼容性问题：

当前移动端使用的浏览器基本上就2种，一种是Android，一种为ios，他们用的浏览器无非是谷歌浏览器和Safari浏览器，都是webkit内核，都支持css3，和es6。所以兼容性基本上可以不用考虑了。

2、手势代替鼠标事件

因为移动设备没有鼠标，而都是触摸屏，所以用手势代替鼠标事件是理所当然的事情。

3、屏幕大小的不一定

不可能为每一个屏幕尺寸开发一套css，所以应用响应式的开发也是水到渠成的。

4、关于css3动画

现在的css3动画在原理上使用GPU硬件加速，所以说使用css3动画比用javascript动画更快。

5、移动端的js库。

大家都用zopto.js和angular.js，我们也没有必要标新立异。

二、详细展开

1、因为不存在兼容性问题（看到ie偷笑中...），html5和css3上吧。具体说

①布局使用flex布局，也可使用flex和固定像素的布局。

②布局单位的选择rem（相对单位），为了更好的兼容屏幕，我们可以html根节点用屏幕的宽度 / 10（这个值你来确定，也可以为20），也更方便我们运算。

但是也有需要固定像素的时候，比如说：你无论在pc端看文章或者看书或者是phone上看小说，眼睛对于字体的要求是一定的。一般情况下是14px。

③图片问题：

高清屏的dpr为2，这就是说如果你用100*100px的图片，像达到100*100px的清晰度，因为高清屏幕的dpr为2，就是说它用200*200的物理像素来显示你100*100的图片，这就造成了图片的模糊。也就是说如果想要达到你想要的效果，就需要用100*100dp（物理像素）来表现它。因为屏幕是我们无法控制的，所以我们只能控制图片了。那么一个公式来表示：width = （w_dp / dpr）px；w_dp是指图片的宽度，这样我们就了解了，100*100的图片我们应该用50*50来表现它，就可以达到了我们想要的效果。

注意下，iPhone 6 plus dpr都是3了；

④一像素边框问题

由上面的第三小点，引申出第四个问题，因为dpr为2，也就是说1px边框用2个物理像素显示，也模糊掉了。如何解决呢？现在通用的用缩放的方式解决：

缩放的方式解决1px边框问题

⑤为了用户体验，使用多行文本溢出：

多行文本溢出

暂时先写这么多，也参考了X课网上的许多知识点，在此说声谢谢。