移动web开发---第三天

2019-10-22 16:56:51 阅读：183 来源： 互联网

一、响应式开发
1、响应式布局，就是一个网站能够兼容多个终端。

2、响应式开发的原理

CSS3中的Media Query（媒介查询，and之后一定要加空格@media screen and (min-width: 768px) and (max-width: 992px) {}; 通过查询screen的宽度来指定某个宽度区间的网页布局。

超小屏幕（移动设备）768px以下

小屏设备 768px-992px

中等屏幕 992px-1200px

大屏设备 1200px以上

3、响应式开发和移动web开发的区别
移动web开发---第三天
bootStrap

bootStrap框架----当前最流行的前端UI框架（有预制界面组件）

特点：组件简洁大方，代码规范精简，界面自定义性强

优点：

有自己的生态圈，不断的更新迭代

提供了一套简洁、直观、强悍的组件

标配准化的html+css编码规范

让开发更简单，提高了开发的效率。

3、布局容器

.container固定宽度并且支持响应式布局的容器

默认margin:55px; padding:15px;

.container-fluid类用于 100% 宽度，占据全部视口（viewport）的容器。

4、删格系统

行：row 通过自身的拉伸来填充父容器的内边距

删格参数：
移动web开发---第三天

标签：web,768px,容器,992px,第三天,响应,开发,宽度,移动
来源： https://blog.51cto.com/14473726/2444501

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

移动web开发---第三天