? ? ? ?今天，我們學習移動端的布局和頁面的設計。webapp的頁面的架構。在原生的Webapp的軟件，移動部門把安裝包打包好，在安裝包的里面，我們前端的人員把頁面掛載在服務器里面，這樣，用戶打開app的時候，就可以在app里面看到頁面的實時更新內(nèi)容。這樣，我們的app比較完美。移動端的網(wǎng)頁設計是我們的前端人員的重要任務。
在我們的移動端的網(wǎng)頁設計中，要求很高，1像素的差別就影響我們的整個頁面的設計美感。所以，我們需要設配不同的手機屏幕的像素密度的頁面，這樣，我們就要用到viewport方法。viewport方法就是幫助我們來適配不同手機的屏幕像素密度頁面。為了保證我們設計的尺寸不是真，一般會在平米密度可選擇性較多的移動設備中，使用viewport技術。這是，我們viewport方法就是幫助我們的來適配不同密度的手機屏幕像素密度。這樣，我們可以更好的體現(xiàn)我們的頁面的設計美感。
我們設計移動端的頁面的時候，調用viewport的方法來進行試配。那么，viewport運行的環(huán)境是什么的？就是我們在head標簽中元信息標簽meta：來實現(xiàn)viewport技術的環(huán)境配置。可以這樣的說，viewport是當前頁面工作的視口。所以，我們在移動端的頁面設計的時候，不可避免在通過meta元信息標簽中引進viewport方法。具體的屬性：1：是
<meta name="viewport" ?content="width=device-width,maximum-scale=1,minimum-scale=1,initial-scale=1,user-scalable=no">
這是，我們經(jīng)常寫法，來設配不同的手機屏幕像素密度。這個寫法是用戶不能縮放的頁面設計。因為，如果頁面能縮放的話，就會影響用戶的體驗，在手機端，我們都可以找到點擊的按鈕或者自己感興趣的菜單進行操作。其二：就是我們?nèi)绻岉撁婵s放的話，就完全暴露了我們手機app的程序是html的架構了。所以，我們專為移動端的設計頁面的時候，就不需要用戶進行縮放了。
width=device-width: 是自適應手機屏幕的尺寸寬度。
maximum-scale:是縮放比例的最大值。
minimum-scale:是縮放比例的最小值。
inital-scale:是縮放的初始化。
user-scalable:是用戶的可以縮放的操作。
在pc端和移動端的兼顧的情況下，我們可以讓用戶的縮放操作為可以（user-scalable=yes）,這樣，就可以通過縮放的操作在pc端自由縮放。適應不同的屏幕分辯率。
我們的minimum-scale是最小值的縮放比例不能小于inital-scale的，小于1的時候，可以和inital-scale的縮放的初始化設置為同樣的值（小于1的值）。這樣，minimum-scale設值有效果。但是，我們經(jīng)常不會設置小于1的值，minimum-scale的值和inital-scale的值都是為1單位。這樣，符合主流設置的大小。太小了，不利于用戶的操作。在電商網(wǎng)站里，社交網(wǎng)站里，我們還是會根據(jù)用戶的習慣來進行操作的。
總結：1：viewport方法和屬性是在元信息標簽meta的環(huán)境中引入。
2：所有的屬性的一般寫法。
響應式布局：
為了不同的頁面分辨率而創(chuàng)建不同的布局方式，其底層原理是頁面根據(jù)瀏覽器的寬度來進行不同的布局方式，是為了用戶的體驗。但是不利于電商網(wǎng)站的。所以，響應式布局現(xiàn)在也歸于平靜了。而頁面的元素寬度隨著屏幕的調整而自動分配。實現(xiàn)的核心技術是媒體查詢的技術。是可以通過@media screen and (max-width:px) ,媒體的大部分媒介特性是接受max-width和min-width 來進行的表達式。媒體屬性是max和min。我們可以通過and符號來進行連接。進行判斷的范圍進入不同的瀏覽器的不同寬度的設置樣式。里面，就是我們要設置的具體元素的選擇器的樣式。
在我們的布局當中，我們經(jīng)常用float布局，在float布局當中，我們首先是要清浮動.清浮動的方法是：emlent:after{
? ? ? ? ? ? display:block;
? ? ? ? ? ? ? content:"",
? ? ? ? ? ? width:0px;
? ? ? ? ? height:0px;
? ? ? ? ? clear:all;
? ?}
這樣，我們不必設置父級的高度。高度可以由內(nèi)容決定的，就不用設置高度。在背景圖的設置中，由于縮放的需求，我們要在大盒子的設置百分百布局，和margin：0 auto 的布局。
