【59】移动WEB开发(6)——布局技术选型概要

★文章内容学习来源:拉勾教育大前端就业集训营


本篇学习目标:了解移动端布局技术选型


目录:
一、单独制作页面(主流)
二、响应式页面兼容移动端(其次)


一、单独制作页面(主流)

1.流式布局(百分比布局)
  • 流式布局(百分比布局),也称非固定像素布局;
  • 通过将盒子的宽度设置成百分比,从而根据屏幕宽度来进行伸缩,不受固定像素的限制,内容向两侧填充;
  • 是移动web开发使用的比较常见的布局方式;
  • 具体查看链接:
2.flex弹性布局(强烈推荐)
  • 传统布局:兼容性好,当布局繁琐且布局有局限性,不能在移动端很好地布局;
  • 而 flex弹性布局:操作方便,布局简单,移动端应用广泛;只不过PC端浏览器支持情况较差,IE11或更低版本不支持或仅仅部分支持。
  • 具体查看链接:
3.less+rem+媒体查询
  • 具体查看链接:
4.混合布局
  • 以上几种方式综合。

二、响应式页面兼容移动端(其次)

1.媒体查询
  • 具体查看链接:
2. bootstrap
  • Bootstrap来自 Twitter(推特),是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS和 JavaScript的,它简洁灵活,使得 Web 开发更加快捷。
  • 中文官网∶http://www.bootcss.com/
  • 官网∶http://getbootstrap.com/
  • 框架∶顾名思义就是一套架构,它有一套比较完整的网页功能解决方案,而且控制权在框架本身,有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。(装修公司即相当于框架,不用自己装修,装修公司有一整套方案)
  • 具体查看链接:

下篇继续:【60】移动WEB开发(7)——布局方式常见方案①流式布局

你可能感兴趣的:(前端学习中,html,css,移动web开发布局技术选择)