1.<meta>标签内容不同
bootstrap响应式: <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1,minimum-scale-1,user-scalable=no" >
(注解:viewport规定视口 content="width=device-width:屏幕宽度与设备一致 initial-scale=1:初始缩放比例 maximum-scale=1,minimum-scale-1:最大与最小缩放比例 user-scalable=no:禁止用户缩放)
其他:<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" id="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
2.@media不同
bootstrap响应式:@media screen and (max-width:900px) and (min-width:500px){ //满足条件执行.text{
}
}
其他:在link标签中规定
如:<link rel="stylesheet" type="text/css" href="../stylesheets/pad/*/*/.css" media="(min-width:768/992/1200px)">
3.css样式不同
bootstrap响应式:通过栅格系统适用不同适用场景
其他:控制css样式 不同适用场景不同的代码实现