手機視口
使用js來檢測螢幕視口的寬度
document.documentelement.clientwidth；
使用手機執行這段**，發現不管是什麼手機，大屏小屏，寬度都是980px
電腦：解析度 = 視口寬度
但是，手機的解析度遠遠大於980，比如iphone6p 解析度是：1240 * 2208
按道理說手機視口應該是1242才對
980是viewport的寬度，viewport就是視口
980是人為定的，這個是喬幫主（賈伯斯）定的980這個數字
總結：980是人為規定的寬度，叫做視口寬度，所有手機的缺省視口寬度都是980px，如果使用手機瀏覽沒有優化的電腦網頁，將會非常方便
但是：問題來了，如果我發布的頁面專門用於手機訪問，那麼980太寬了，裡邊裝的東西太多，我們希望使用手機螢幕真實寬度作為視口寬度
現在我們可以通過約束視口，打到我們的要求
width = device-width：視口寬度約束到手機裝置寬度
initial-scale：預設初始縮放比例
maximum-scale：最大可縮放比例
minimum-scale：最小可縮放比例
user-scaleable：使用者是否可縮放
這個meta標籤，就是做的視口約束，約束之後的視口寬度，和裝置寬度相同，其實這個數字也是人為設定的，每個裝置出廠都會制定乙個約束視口的寬度
約束之後的視口不是自己的解析度
當然作為前段工程開發工程師，我們不關心解析度，我們只關心視口寬度
視口越小，字越大，約束之後的視口一般在320 - 480之間，這個寬度字足夠小，看起來比較清晰，比較合適
流式布局
1，手機網頁沒有版心，兩邊沒有留白，站滿手機寬度
原因：1）手機視口比較小，如果再有留白非常難看
手機沒有版心，視口各不相同，所以做手機開發盡可能使用百分比布局，每乙個元素都會根據螢幕的寬度變化而變化
2，百分比布局
如果使用百分比width，那麼指的是父元素width的百分之幾，沒有父元素就參照body
如果使用百分比寫height，那麼指的是父元素的height的百分之幾
如果使用百分比寫padding，那麼指的是父元素的width的百分之幾，無論是水平的還是垂直的，都是以父元素的width為準
如果使用百分比寫margin，那麼指的是父元素的width為準，無論水平還是垂直，都是父元素的width為準
但是不能使用百分比寫border
百分比布局
1，相對於誰
思維線：
手機螢幕小
-->
不要留白
-->
撐滿頁面
-->
視口寬度不同
-->
不能使用px固定-->使用百分比布局
百分比布局也就做流式布局，彈性盒子布局
2，css3彈性盒子屬性 display：-webkit-box；
如果讓三個盒子按照1:2:3來設定寬度，name每個盒子應該給多少百分比？
16.666% 33.3333% 50%
css3,推出乙個新屬性display屬性有乙個新的值：box，相容還有一定問題，盡量加上-webkit-，加上這個屬性之後，這個元素的所有兒子就是彈性布局了，兒子們不需要設定float：left，能夠預設併排排列，通過設定-webkit-box-flex：num；來設定所佔比例
3，css3新的盒子模型box-sizing：border-box；
box-sizing屬性允許你以特定的方式定義匹配某個區域的特定元素
box-sizing就是盒子的尺寸，這是屬性定義了你設定的width，height值的是什麼寬度，高度
一般來說width，height指的是內容寬度和高度，但是加上 box-sizing：border-box；這時width和height值的是border外側構成的盒子的寬度和高度
在之前css3退=推出了乙個可以用於計算的屬性：calc，可以用於數字或者百分比的計算
width：calc（50% - 10px）；
（相當於裁剪）
calc 只能做加減運算，並且必須帶著單位，類似乙個函式
現在很少人使用，一般使用box-sizing：border-box；一招鮮，吃遍天
4，固比固
1）絕對定位方法進行固比固布局
2）display：box 屬性
5，min-width和max-width
按百分比布局的時候，進行乙個限制
移動端布局三種視口 移動端的三個視口
本文記錄學到的有關視口的內容，不足之處請指正。1 視口 有時會使用百分比來宣告寬度,如 html,body div假設div是body的子元素，這段css就表示該div佔body寬度的30 body沒有顯示宣告寬度，因此body占用了父包含塊html元素寬度的100 同樣的，html也沒顯示宣告寬度...
關於移動端rem 布局的一些總結
1.rem是什麼?rem font size of the root element 是指相對於根元素的字型大小的單位 第乙個例子 htmla10px 1rem 10px 第二個例子 htmla20px 1rem 20px 推算出 10px 1rem 在根元素 font size 10px的時候 2...
移動端開發視口的概念及作用
問題 移動端開發與傳統的pc端開發有什麼區別？螢幕尺寸不同 適配區別 真機除錯 使用真的手機進行訪問。模擬器除錯 開發 階段使用的。手機裝置五花八門，螢幕尺寸都大不一樣，尤其是安卓端，給我們的頁面預覽帶來了一些麻煩。在實際工作中，作為開發者不可能有足夠的裝置讓我們去測試 除了測試部門 即便有，效率也...