移动端响应式布局
2022年8月10日? 周三學習記錄。學習時長：3h，學習進度：響應式布局。
目錄
移動端WEB開發之響應式布局
1. 響應式開發
1.1 響應式開發原理
?1.2 響應式布局容器
Bootstrap前端開發框架簡介
2.1 Bootstrap 簡介
2.2 Bootstrap 使用
3. Bootstrap 柵格系統
3.1 柵格系統簡介
3.2 柵格選項參數
3.3 列嵌套
3.4 列偏移
3.5 列排序
移動端WEB開發之響應式布局
1. 響應式開發
1.1 響應式開發原理
就是使用媒體查詢針對不同寬度的設備進行布局和樣式的設置，從而適配不同設備的目的
?1.2 響應式布局容器
響應式需要一個父級做為布局容器，來配合子級元素來實現變化效果。
原理就是在不同屏幕下，通過媒體查詢來改變這個布局容器的大小，再改變里面子元素的排列方式和大小，從而實現不同屏幕下，看到不同的頁面布局和樣式變化。
平時我們的響應式尺寸劃分
- 超小屏幕（手機，小于 768px）：設置寬度為 100%
- 小屏幕（平板，大于等于 768px）：設置寬度為 750px
- 中等屏幕（桌面顯示器，大于等于 992px）：寬度設置為 970px
- 大屏幕（大桌面顯示器，大于等于 1200px）：寬度設置為 1170px
案例：響應式導航
//1.當我們屏幕大于等于800像素，我們給nav寬度為800px，因為里面子盒子需要浮動，所以nav需要清除浮動。 //2.nav里面包含8個小li 盒子，每個盒子的寬度定為 100px， 高度為 30px，浮動一行顯示。 //3.當我們屏幕縮放，寬度小于800像素的時候， nav盒子寬度修改為 100% 寬度。 //4.nav里面的8個小li，寬度修改為 33.33%，這樣一行就只能顯示3個小li ，剩余下行顯示。 <body><div class="container"><ul><li>導航欄</li><li>導航欄</li><li>導航欄</li><li>導航欄</li><li>導航欄</li><li>導航欄</li><li>導航欄</li><li>導航欄</li></ul></div> </body><style>* {margin: 0;padding: 0;}ul {list-style: none;}.container {width: 750px;margin: 0 auto;}.container ul li {float: left;width: 93.75px;height: 30px;background-color: green;}@media screen and (max-width: 767px) {.container {width: 100%;}.container ul li {width: 33.33%;}} </style>Bootstrap前端開發框架簡介
2.1 Bootstrap 簡介
Bootstrap 來自 Twitter（推特），是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS 和 JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。
框架：顧名思義就是一套架構，它有一套比較完整的網頁功能解決方案，而且控制權在框架本身，有預制樣式庫、組件和插件。使用者要按照框架所規定的某種規范進行開發。 優點- 標準化的html+css編碼規范
- 提供了一套簡潔、直觀、強悍的組件
- 有自己的生態圈，不斷的更新迭代
- 讓開發更簡單，提高了開發的效率
2.2 Bootstrap 使用
Bootstrap 使用四步曲： 1. 創建文件夾結構 2. 創建 html 骨架結構 3. 引入相關樣式文件 4. 書寫內容。
1. 創建文件夾結構2. 創建html骨架結構
?
<!--要求當前網頁使用IE瀏覽器最高版本的內核來渲染--><meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--視口的設置：視口的寬度和設備一致，默認的縮放比例和PC端一致，用戶不能自行縮放--><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"><!--[if lt IE 9]><!--解決ie9以下瀏覽器對html5新增標簽的不識別，并導致CSS不起作用的問題--><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><!--解決ie9以下瀏覽器對 css3 Media Query 的不識別 --><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--> 3. 引入相關樣式文件 <!-- Bootstrap 核心樣式--> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">3. Bootstrap 柵格系統
3.1 柵格系統簡介
柵格系統英文為“grid systems”,也有人翻譯為“網格系統”，它是指將頁面布局劃分為等寬的列，然后通過列數的定義來模塊化頁面布局。 Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。3.2 柵格選項參數
柵格系統用于通過一系列的行（row）與列（column）的組合來創建頁面布局，你的內容就可以放入這些創建好的布局中。- 按照不同屏幕劃分為1~12 等份
- 行（row） 可以去除父容器作用15px的邊距
- xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大；
- 列（column）大于 12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列
- 每一列默認有左右15像素的 padding
- 可以同時為一列指定多個設備的類名，以便劃分不同份數 例如 class="col-md-4 col-sm-6"
3.3 列嵌套
柵格系統內置的柵格系統將內容再次嵌套。簡單理解就是一個列內再分成若干份小列。我們可以通過添加一個新的 .row 元素和一系列 .col-sm-* 元素到已經存在的 .col-sm-* 元素內。
<!-- 列嵌套 --><div class="col-sm-4"><div class="row"><div class="col-sm-6">小列</div><div class="col-sm-6">小列</div></div> </div>3.4 列偏移
使用 .col-md-offset-* 類可以將列向右側偏移。這些類實際是通過使用 * 選擇器為當前元素增加了左側的邊距（margin）?
<!-- 列偏移 --><div class="row"><div class="col-lg-4">1</div><div class="col-lg-4 col-lg-offset-4">2</div></div>3.5 列排序
?
通過使用 .col-md-push-* 和 .col-md-pull-* 類就可以很容易的改變列（column）的順序 ?
<!-- 列排序 --><div class="row"><div class="col-lg-4 col-lg-push-8">左側</div><div class="col-lg-8 col-lg-pull-4">右側</div></div>總結
- 上一篇： 视频教程-SEM实战教程（五）-网络营销
- 下一篇： HTML菜单栏点击后变色,菜单怎么实现点