1.移动端的相关适配目前探索中已经寻找了很多种的适配方案,
1)响应式布局。
2)640px/750px做一版移动端的设计图(em适配)。
3)640px/750px做一版移动端的设计图(rem适配)。
以上方案实际开发中本人都已经使用过,后来最终选择第三种方案。为什么呢?第一种响应式方案,看似简单,实际开发中其实加大了开发的工作量,各种屏幕的适配会让你抓狂。
第二种方案,也使用了一段时间,开发效率可以,一套下来适配多种屏幕,但是后期涉及到相关页面的调整简直会让你崩溃掉,改一处-处处都在变着(因为该种方案是根据字体来调整界面,父元素的字体改了,子元素跟着改-风不疯狂,我们配置了多少种大小的字体?),吓得直接不敢改了,最后放弃了em适配方案。
第三种rem适配方案在开发中开始采用后发现效率-适配都很好,根据html的根子体来确定大小,
看见以下方案了吧,其实都不能很好的适配多变的移动端屏幕。
也就是用CSS媒体查询来改变根字体的大小进行适配。该种方案也放弃了。
html {font-size: 625%; /*100 ÷ 16 × 100% = 625%*/}
@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
html { font-size: 703%; }
}
@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {
html { font-size: 732.4%; }
}
@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
html { font-size: 750%; }
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
html { font-size: 781.25%; }
}
2.有没有一种方案能够解决根子体大小去适配呢?答案是有,阿里巴巴强大的团队提出了解决方案
此处需要普及下,像素比,屏幕密度,像素等
详细查看http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
淘宝的解决方案是把屏幕分成了100份(bootstrap分成了12份),
我们常用的设计稿是640px,750px,
而淘宝的方案是 750px/100份=7.5px/份
我们得到的是 1份=7.5px
而把一份的宽度定义为10rem,那么750px的设计稿换算下就是,1rem=75px
OK方案基本已经确定了,但是用我们的css像素去解决单位转换,把px转换成rem,计算器敲着那效率也太低了吧,淘宝同样有该种工具可以供使用
https://github.com/flashlizi/cssrem
https://www.npmjs.com/package/px2rem
3.需要注意的是,淘宝方案中meta viewpoint,html根子体font-size都是设置好的
Flexible会自动设定每个屏幕宽度的根font-size、动态viewport、针对Retina屏做的dpr。
git上的详细介绍
https://github.com/chesscai/flexible-adaptive
4.关于移动端viewport的详细介绍
https://www.zybuluo.com/gongzhen/note/170557
5.项目的快速搭建
1)在所有文件加载之前引入(不要设置meta为固定的)
<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">
引入
http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js
2)确定根字体大小(不要在css中设置html根字体大小)
设计稿尺寸/10=html根字体大小
例如640px/10=64px,那么根字体就是64px。
3)单位换算
设计稿px/根字体大小
好了到此结束。