响应式布局与Bootstrap

最新推荐文章于 2022-10-09 17:42:01 发布

原创最新推荐文章于 2022-10-09 17:42:01 发布 · 601 阅读

3 ·

CC 4.0 BY-SA版权

响应式布局专栏收录该内容

1 篇文章

订阅专栏

本文介绍了响应式布局的概念及其优缺点，详细阐述了设计原则，并提供了实现方法，包括CSS3 Media Queries的应用及Bootstrap框架的简介。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

- - 响应式布局的介绍
  - Bootstrap的介绍
    - bootstrap的基本介绍（bootstrap.com）

响应式布局的介绍

什么是响应式布局

让一个网站兼容不同分辨率的设备；
给用户更好的视觉使用体验。

响应式布局的优缺点

  优点：解决了设备之间的差异化展示（让不同的设备达到最优的体验）
  缺点：对开发者来说，兼容性代码多，工作量大，对浏览器来说，加载速度受影响；
       对原有的网站布局会产生影响，浏览器的用户判断未必精准，比如：在pc端浏览网站时，chorme浏览器缩小窗口,这个网站可能会突然变移动端的样式。

响应式布局设计原则

    移动优先
   在设计的初期就要考虑的页面如何在多终端显示
    渐进增强
   充分发挥硬件设备的最大功能（ie678,不能用css3）

实现方法介绍

CSS3-Media Query(最简单的方式)
借助原生js (成本高，不推荐)
第三方开源框架（可以很好的支持浏览器响应式布局设计）

CSS3-Media Query简单案例

常见的属性：
device-width，device-height —-根据屏幕的宽高来做不同的展示
width,height —-渲染窗口宽高
orientation —–设备方向
resolution ——设备分辨率（由dpi决定）
eg：
@media screen and (min-width:480px){//当屏幕大于等于480px的时候
//body{background: yellowgreen;}
}

Bootstrap的介绍

bootstrap的基本介绍（bootstrap.com）

是一款可以做响应式布局的框架，它可以让开发者写非常少的代码实现多终端的页面适配，不仅可以为我们解决低端浏览器的不兼容css3的问题，还可以为我们解决不同分辨率的设备上面网页布局的展示。
若IE8浏览器，需要用respond.js来做media query的兼容，respond.js必须部署在webserve的域名下面，不能部署到静态资源域下面，否则会有跨域的问题
对于跨域的解决方案：链接：respond.js doc(respond.js and cross-domain CSS)

    初始化框架使用的是Normalize.css；
    栅格结构(grid system)（核心）https://www.cnblogs.com/JerryTao/p/5476027.html；
    通过一系列的行（row）与列（column）的组合来创建页面布局, 自动分为最多12列,内容在列中，而只有列可以作为行的直接子元素。

bootstrap自带一些漂亮的css样式，eg：表格，按钮，表单等
可以复用的布局组件，eg：导航，分页，标签，按钮组等等
bootstrap中的自带的js插件，eg：轮播，折叠，滚动监听等等
定制bootstrap