? ? ? ?今天均牢，我們學(xué)習(xí)移動端的布局和頁面的設(shè)計玄叠。webapp的頁面的架構(gòu)。在原生的Webapp的軟件，移動部門把安裝包打包好逗抑，在安裝包的里面藤肢，我們前端的人員把頁面掛載在服務(wù)器里面骗卜，這樣挺峡，用戶打開app的時候，就可以在app里面看到頁面的實時更新內(nèi)容泉粉。這樣连霉，我們的app比較完美。移動端的網(wǎng)頁設(shè)計是我們的前端人員的重要任務(wù)嗡靡。

在我們的移動端的網(wǎng)頁設(shè)計中跺撼，要求很高，1像素的差別就影響我們的整個頁面的設(shè)計美感讨彼。所以歉井，我們需要設(shè)配不同的手機屏幕的像素密度的頁面，這樣哈误，我們就要用到viewport方法哩至。viewport方法就是幫助我們來適配不同手機的屏幕像素密度頁面。為了保證我們設(shè)計的尺寸不是真蜜自，一般會在平米密度可選擇性較多的移動設(shè)備中菩貌，使用viewport技術(shù)。這是重荠，我們viewport方法就是幫助我們的來適配不同密度的手機屏幕像素密度箭阶。這樣，我們可以更好的體現(xiàn)我們的頁面的設(shè)計美感戈鲁。

我們設(shè)計移動端的頁面的時候仇参，調(diào)用viewport的方法來進行試配。那么婆殿，viewport運行的環(huán)境是什么的诈乒？就是我們在head標(biāo)簽中元信息標(biāo)簽meta：來實現(xiàn)viewport技術(shù)的環(huán)境配置∑怕可以這樣的說怕磨，viewport是當(dāng)前頁面工作的視口喂饥。所以，我們在移動端的頁面設(shè)計的時候肠鲫，不可避免在通過meta元信息標(biāo)簽中引進viewport方法仰泻。具體的屬性：1：是

<meta name="viewport" ?content="width=device-width,maximum-scale=1,minimum-scale=1,initial-scale=1,user-scalable=no">

這是，我們經(jīng)常寫法滩届，來設(shè)配不同的手機屏幕像素密度。這個寫法是用戶不能縮放的頁面設(shè)計被啼。因為帜消，如果頁面能縮放的話，就會影響用戶的體驗浓体，在手機端泡挺，我們都可以找到點擊的按鈕或者自己感興趣的菜單進行操作。其二：就是我們?nèi)绻岉撁婵s放的話命浴，就完全暴露了我們手機app的程序是html的架構(gòu)了娄猫。所以，我們專為移動端的設(shè)計頁面的時候生闲，就不需要用戶進行縮放了媳溺。

width=device-width: 是自適應(yīng)手機屏幕的尺寸寬度。

maximum-scale:是縮放比例的最大值碍讯。

minimum-scale:是縮放比例的最小值悬蔽。

inital-scale:是縮放的初始化。

user-scalable:是用戶的可以縮放的操作捉兴。

在pc端和移動端的兼顧的情況下蝎困，我們可以讓用戶的縮放操作為可以（user-scalable=yes）,這樣，就可以通過縮放的操作在pc端自由縮放倍啥。適應(yīng)不同的屏幕分辯率禾乘。

我們的minimum-scale是最小值的縮放比例不能小于inital-scale的，小于1的時候虽缕，可以和inital-scale的縮放的初始化設(shè)置為同樣的值（小于1的值）始藕。這樣，minimum-scale設(shè)值有效果彼宠。但是鳄虱，我們經(jīng)常不會設(shè)置小于1的值，minimum-scale的值和inital-scale的值都是為1單位凭峡。這樣拙已，符合主流設(shè)置的大小。太小了摧冀，不利于用戶的操作倍踪。在電商網(wǎng)站里系宫，社交網(wǎng)站里，我們還是會根據(jù)用戶的習(xí)慣來進行操作的建车。

總結(jié)：1：viewport方法和屬性是在元信息標(biāo)簽meta的環(huán)境中引入扩借。

2：所有的屬性的一般寫法。

響應(yīng)式布局：

為了不同的頁面分辨率而創(chuàng)建不同的布局方式缤至，其底層原理是頁面根據(jù)瀏覽器的寬度來進行不同的布局方式潮罪，是為了用戶的體驗。但是不利于電商網(wǎng)站的领斥。所以嫉到，響應(yīng)式布局現(xiàn)在也歸于平靜了。而頁面的元素寬度隨著屏幕的調(diào)整而自動分配月洛。實現(xiàn)的核心技術(shù)是媒體查詢的技術(shù)何恶。是可以通過@media screen and (max-width:px) ,媒體的大部分媒介特性是接受max-width和min-width 來進行的表達式。媒體屬性是max和min嚼黔。我們可以通過and符號來進行連接细层。進行判斷的范圍進入不同的瀏覽器的不同寬度的設(shè)置樣式。里面唬涧，就是我們要設(shè)置的具體元素的選擇器的樣式疫赎。

在我們的布局當(dāng)中，我們經(jīng)常用float布局碎节，在float布局當(dāng)中虚缎，我們首先是要清浮動.清浮動的方法是：emlent:after{

? ? ? ? ? ? display:block;

? ? ? ? ? ? ? content:"",

? ? ? ? ? ? width:0px;

? ? ? ? ? height:0px;

? ? ? ? ? clear:all;

? ?}

這樣，我們不必設(shè)置父級的高度钓株。高度可以由內(nèi)容決定的实牡，就不用設(shè)置高度。在背景圖的設(shè)置中轴合，由于縮放的需求创坞，我們要在大盒子的設(shè)置百分百布局，和margin：0 auto 的布局受葛。