一、目标
bootstrap前端工作最大的价值之一,是能兼容不同的浏览器,及不同设备展示效果的一致性。
在win10环境用boostrap3.7,或4.0作前端开发,模拟安卓/ios手机或平板输出,这样不必在真的手机或平板上进行测试了。
本文不介绍bootstrap开发,仅仅说明在win10如何模拟手机或平板输出调试。
本文不放bootstrap的代码,不是本文主题。
二、开发工具
1、 win10
2、 webstorm2016
3、 浏览器
chrome-64.0.3-64bit
fireFox-58.02-64bit
三、基本思路
1、 用bootstrap3.7,或4.0编写12栅格布局,可以自动适应不同的设备
2、 都是打开各自浏览器调试窗口
3、 不要试图用edge,或ie12调试,没有chrome或fireFox方便
fireFox最方便调试。
也可以用真手机,或平板做客户端调试试输出,将webstorm的调试输出端口改为8080即可。
四、自适应移动设备
<meta name=”viewport” width=”device-width,initial-scale=1”/>
五、bootstrap的12栅格系统,这里选用col-md-*即可
class=”col-md-*”, *=1--12,所有格子的和为12,超过后,自动进入下一行,可以行列嵌套 class=”col-sm-*” class=”col-lg-*” class=”col-xs-*”
|
六、fireFox测试效果
找到fireFox调试窗口,ctrl+shift+k
七、chrome浏览器输出调试
找到chrome的调试窗口,ctrl+shift+i
created by 刘明