1.Bootstrap
Bootstrap为页面内容和栅格系统包裹了一个.container容器,框架预先定义类
1.1container类
响应式布局容器的宽度
手机-小于768px 宽度设置100%;
平板-大于等于768px 设置宽度为750px
桌面显示器-大于等于992px 设置宽度 970px
大屏幕显示器-大于等于1200px 宽度设置为 1170px;
设置宽度比屏幕尺寸小,留取左右空白居中对齐;
在只需在引入class对应的类即可实现屏幕媒体查询
1.2container-fluid类
流式布局容器百分百宽度,占据全部视口容器,适合单独的移动开发;
1.3栅格系统
视口宽度平均分为12列,不同的内容在不同的列区域内。等比列缩放效果实现。通过累加对应的类名来进行实现不同屏幕下占列内容多少。
具体参考Bootstrap来进行实现。
使用框架来快捷的实现媒体查询,、-响应式布局