移动端问题初总结。

Posted 2020-07-26

　　初接触移动前端，第一天整个人都是懵的。不仅从web前端到移动前端的思维转化，还有一些html页面结构的模块化，css样式的顺序书写与可读性,  关于布局的思考等等。如今入职快一个月，对此进行总结，往后继续优化。

　　1）CSS样式的书写顺序

　　　　1. 位置属性(position, top, right, z-index, display, float等)
　　　　2. 盒模型(width, height, padding, border, margin)
　　　　3. 文字系列(font, color， line-height, letter-spacing, text-align等)
　　　　4. 背景(background等)
　　　　5. 其他(animation, transition等)

　　2）CSS样式的书写规范

　　　　1. 去掉小数点前面的"0"，如font-size: .28rem;

　　　　2. 16进制颜色代码缩写 , 尽量不要出现英文，会与设计稿偏差。一般英文只用来测试。

　　　　3. 连字符CSS选择器命名规范，不建议使用"_"连接，推荐Camel命名，也可以用"-".

　　　　4. 不要随意使用id，因为id在js中是唯一的。这个之前就知道，但是现在包括结构，使用的都是class。而ID通常只是JS代码中需要，才会加上。

　　　　5. 在这之前，当需要用javascript改变css样式时，经常都是使用$().css()连缀，不仅麻烦、重复，而且代码看起来很乱。而现在的思路则是，在CSS中添加一个.selected类，再使用addClass(‘.selected‘)、removeClass(‘.selected‘)，不仅简单明了，还可复用。

　　3）对于设计稿的思考

　　　　到目前为止，被说的最多的就是以下两种情况：1.你不能什么都按照设计稿来，他有时候本身是有问题或者不合理的，包括有时候字体大小、padding，宽高值之类。2.这　　个是设计稿上的东西，不能随便乱改。

　　　　那么对于是否遵循设计稿，就不得不思考了。目前总结如下：

　　　　当拿到一个设计图的时候，首先是根据设计图布局。当你完成页面结构，也就代表了你对每块内容粗略的实现了一遍。那还有什么东西是需要PS从设计图里面获取的呢？

　　　　1. 色彩。2. li的行高，图片大小。3. 字体大小（大部分时候遵循设计稿，但当设计稿字体明显过小且在手机上实现效果也不好时，就需要大胆的修改了）。

　　　　然后就是一些注意点了。

　　　　Tip: 

　　　　I.  从他的每一个图标获取信息，一个箭头可能代表有下拉选项，而一个省略号，通常就是说明这个标题不显示完全，或者文章内容值显示2行。

　　　　II. 图片的圆角加在自身还是外面包裹的div则根据后台有没有默认图片。

　　　　III.然后就是表单的问题了，输入内容在右显示还是中间显示，布局都有差别。而两种情况下都需要注意输入框内容不能覆盖图标。

　　　　IV.节省流量，有些时候，一些简单的图标通常都可以用css来实现。

　　　　而目前我最大的问题就是，在设计图上的一些尺寸浪费了过多时间，不仅耗费时间想精细量，并且有时候还会计算，而不是通过代码直接实现效果，这点毫无疑问是要改　　　的。与其在那纠结几px的距离，还不如在完成之后多测试效果。！important

　　4）尾声，一些旁枝末节

　　　　1. line-height。

　　　　　　文本行高多是用倍数，当碰到一些字体过大的时候，比如标题，如果使用倍数那么每行间距就会太大（包括由于数字的特殊性），此时会使用固定数值。

　　　　2. 移动端的体验问题。

　　　　　　首先就是表单的输入与键盘的争夺，在某些机型上，可能键盘弹出后会完全遮盖输入框。所以，一般情况下，将输入框设计在上半部分。当然，如果设计图本身就是这　　　　样的时候，你也不能说不解决这个问题。第一种投机取巧的办法，如果下面有提交按钮，就将按钮的margin-bottom值设大一点。如果你处在一种无计可施的情形，那么　　　　就只能采用JS触发一个弹出窗口了。

　　　　　　其次， 在web前端上想必：hover用的很多，那么移动端：active给用户反馈，通常用在li/button上。此时，li里面的select、input则需将背景设置透明，以避免背景　　　　参差不齐。：active在ios上面是存在问题的，解决方法就是给该元素绑定一个touch系列的事件。

　　　　3. border-left, border-right, 在表单里面设置li，这样不仅不会减小li的宽度，而且可以起到文本偏移的作用。

　　　　4. 前缀问题。因为有一些属性需要兼容老版本，所以需要加上前缀。这里推荐书写顺序

.text {
    -webkit-transform: translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%); 
}

 

　　这只是到目前为止碰到的一些问题，可能还有很多问题没有考虑到，这里仅作总结加深印象。以后工作中努力做到不犯同样的错误，及时总结，希望自己越来越好。