对于移动端页面适配，应该有很多种方案，rem，em，百分比，还有vw，vh，一眼看上去有点眼花缭乱不知道用哪个单位哪个方案好，网上也有很多很多着适配的文章我就总结一下我移动端适配的是怎么做的吧。
首先我没有考虑em，em用着是让人很头疼的一件事，em是根据本身元素字体大小适配，有点牵一发而动全身，很难用得好，例如：外层span的字号是16px（浏览器默认值），所以1.5em之后是24px。由于字号是继承的，导致内层span的字号继承过来是24px，再经过1.5em之后就成了36px。
我用的移动端布局分四个部分：
一个部分是字体部分，用rem
一个部分是宽度设定，宽度视情况而定，不用适配ipad就用rem，需要适配就用百分比
第三部分是图片或者高度设定，从设计稿拿到的图片都是等比例的，rem也可以用，但我觉得padding百分比更合适，这个是从张鑫旭大大那里学到的方法，这样图片永远就不会变形啦，就算没有图片的情况下，布局也不会乱o(^_^)o
第四部分，1px线条的问题，在有的手机上1px用rem会消失，所以还是用1px，如果设计师有特殊要求感觉线条过粗可以用transform:scale(.5)缩放看起来精致一点
大概就是这些，后面有新的发现会继续补充
网友评论