bootstrap3.7or4.0-win10环境开发-手机-平板模拟输出调试

一、目标

       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 刘明