屏幕适配bootstrap

最近在做手机屏幕的适配工作，进行以下总结

项目中引入bootstrap

1. 首先设置meta标签，为了确保适当的绘制和触屏缩放，需要在之中添加viewport元数据标签

<meta name="viewport" content="width=device-width, initial-scale=1">

2. 在移动设备浏览器上，通过为视口设置meta属性为user-scalable=no可以禁用其缩放功能，这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原声应用的感觉。注意这种方式并不推荐所有网站使用，还是要看你自己
   <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"`>

媒体查询

在栅格系统中我们在less或者css文件中使用以下媒体查询来创建关键的分界点值

@media(min-width:@screen-sm-min){...}小屏幕（平板，大于等于768px）
@media(min-width:@screen-md-min){...}中等屏幕（桌面显示器，大于等于992px）
@media(min-width:@screen-lg-min){...}大屏幕（大桌面显示器，大于等于