移動web中的流式布局和viewport知識介紹

標籤：

1   流式布局

其實  流式布局  就是百分比布局，通過盒子的寬度設定成百分比來根據螢幕的寬度來進行伸縮，不受固定像素的限制，內容向兩側填充。

這樣的布局方式  就是移動web開發使用的常用布局方式

2    Viewport

1. 我們猜想下pc頁面在行動裝置上顯示情況。

放不下，縮放？

1. 我們測試下pc頁面在行動裝置上顯示。

預設的縮放的顯示的

1. 認識viewport

在移動端用來承載網頁的這個地區，就是我們的視覺視窗，viewport（視口）,這個地區可是設定高度寬度，可是按比例放大縮小，而且能設定是否允許使用者自行縮放。

width：寬度設定的是viewport寬度，可以設定device-width特殊值

initial-scale：初始縮放比，大於0的數字

maximum-scale：最大縮放比，大於0的數字

minimum-scale：最小縮放比，大於0的數字

user-scalable：使用者是否可以縮放，yes或no（1或0）；

用meta標籤把viewport的寬度設為device-width，同時initial-scale=1，user-scalable = 0就構建了一個標準的移動web頁面

移動web中的流式布局和viewport知識介紹