1.響應式布局原理:通過**查詢針對不同寬度裝置進行布局和樣式的設定
裝置螢幕劃分:
<768px,超小螢幕,手機
768-992 px,小螢幕,平板
992-1200 px,pc端中等螢幕
,>=1200px,pc端大螢幕
2.bootstrap框架
1.gulp壓縮**小工具
2.柵格系統:把container內容區域分成12份,柵格系統用於通過一系列的行row和列column的組合來建立布局頁面,內容放入布局好的列裡
超小螢幕<768px .container最大寬度 100% .con-xs-列數
小平裝置(平板)>=768px, .container最大寬度750px .col-sm-份數
中等螢幕》=992px, .container最大寬度970px .col-md-份數
大螢幕》=1200px, .container最大寬度1170px .col-lg-份數
注意事項:
(1) 行row必須放到container布局容器裡面;
(2) 實現平均劃分需新增類字首;
(3) xs-extra small:超小;sm-small:小;md-medium:中等;lg-large:大;
(4) 列和column大於12,多餘的列所在的元素會被做為乙個整體另起一行排列;列合column小於12,不足的部分會留下空白;
(5) 每一列缺省右左右15px的padding;
(6) 可以同時為一列指定多個裝置的類名,以便在不同的裝置尺寸劃分不同的分數 eg:class=「col-sm-6 col-md-9」
3.bootstrap列巢狀:在要巢狀的列裡面寫row,巢狀在列裡,這樣可以取消父元素的padding值,並且高度自動和父級高度一致
4.bootstrap列偏移:使用.col-md-offset-類可以將列向右側偏移. 這些類實際上是通過使用選擇器為當前元素增加了左側的 邊距(margin) 兩邊浮動效果: 偏移的份數=12-兩個盒子的分數 居中效果:偏移的份數=12-中間盒子的分數-右側空餘分數
5.列排序 通過使用col-md-puah-*和col-md-pull-*類可以改變列的順序
6.響應式工具:
hidden-xs(超小屏隱藏)|sm(小屏隱藏)|md(中屏隱藏)|lg(大屏隱藏)
與之相反的是visible-xs|sm|md|lg 顯示某個頁面內容
Web Bootstrap柵格布局系統設計原理
這個布局提供了一套響應式布局解決方案。一.前提 被定義的元素內邊距和邊框不再會增加它的寬度。padding right 15px padding left 15px margin right auto margin left auto media min width 768px media min ...
（8）發布話題控制移動小車
1 小車開機，連線wifi，ssh遠端登入 登入密碼 dongguan ssh wheeltec 192.168.0.1002 要控制小車，必須啟動初始化節點命令 wheeltec終端 roslaunch turn on wheeltec robot turn on wheeltec robot.l...
利用rem實現web移動端螢幕適配 彈性布局
具體詳情請看tat.tennylv的文章 1.rem單位根據html根元素的字型大小 px為單位 進行設定，html預設的字型大小為16px，這時候1 rem 16 px。設定html字型為35px,則1 rem 35 px 2.我們可以對螢幕中的各元素使用rem設定大小。如div 1 rem 此時...