web前端怎樣做響應式
web前端響應式的布局在應用的越來越多，下面介紹web前端是怎樣做響應式。
工具/原料
- 編輯器sublime
方法/步驟
- 1
所謂的響應式就是使網站在電腦，平板，手機登不同分辨率的終端上有正常的訪問體驗，相信有人體驗過有些pc端網頁在移動設備上訪問的尷尬，下面介紹一下web實現響應式。
- 2
首先需要添加meta標簽
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
設置設備按照一比一的尺寸進行顯示，并且禁止用戶縮放頁面
- 3
我們利用媒體查詢來實現不同分辨率下的顯示正常
@media screen and (max-width: 375px) {
//分辨率在375下的樣式
......
}
也可以設置最小的寬度
@media only screen and (min-width: 320px) and (max-width: 767px) {
//分辨率在320~767px內的樣式
......
}
正常顯示如圖一顯示，然后修改為手機模式為如圖二顯示
- 4
響應式網頁的單位選用：目前rem使用的比較廣泛。
rem是根據頁面根節點的font-size的值進行設置，這就給我們設置響應的數值大小帶來了可能,如圖所示；
這塊需要說明一下：網頁初始化默認的字體大小是16px，所以為了方便計算，一般設置根節點的font-size為62.5%，也就是16px*62.5%=10px，如果不想設置10為基數，想設置其他的數值X為基數，那么根節點的font-size為X/16=百分數。
- 5
柵格化布局，本例利用bootstarp的柵格系統
下圖是利用.col-xs-* 和 .col-md-*，看下圖2和圖3可以很清楚的看到，根據窗口的改變，模塊的位置也進行了改變。
注：bootstrap柵格參數說明
.col-xs-：手機 <768px
.col-sm-：平板 ≥768px
.col-md-：桌面顯示器 ≥992px
.col-lg-：大桌面顯示器 ≥1200px
- 6
做響應式布局在設置樣式上一定要注意：
1：width盡量使用百分數
2：圖片的響應上需要多加注意
3：單位選擇上建議使用rem
注意事項
- 部分圖片來源于網絡
- 發表于 2018-01-31 00:00
- 閱讀 ( 807 )
- 分類：其他類型
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章