標籤：媒體查詢 標準 nbsp 1.0 條目 渲染 end 布局 顯示
移動端頁面配置移動端app分類1、Native App 原生app手機應用程式
使用原生的語言開發的手機應用，Android系統用的是java，iOS系統用的是object-C
2、Hybrid App 混合型app手機應用程式
混合使用原生的程式和html5頁面開發的手機應用
3、Web App 基於Web的app手機應用程式
完全使用html5頁面加前端js架構開發的手機應用
視口是行動裝置上用來顯示網頁的地區，一般會比行動裝置可視地區大，寬度可能是980px或者1024px，目的是為了顯示下整個為PC端設計的網頁，這樣帶來的後果是移動端會出現橫向捲軸，為了避免這種情況，移動端會將視口縮放到移動端視窗的大小。這樣會讓網頁不容易觀看，可以用 meta 標籤，name=“viewport ” 來設定視口的大小，將視口的大小設定為和行動裝置可視區一樣的大小。
設定方法如下：
<head>......<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">......</head>pc端與移動端渲染網頁過程：
視網膜螢幕指的是螢幕的物理像素密度更高的螢幕，物理像素可以理解為螢幕上的一個發光點，無數發光的點組成的螢幕，視網膜螢幕比一般螢幕的物理像素點更小，常見有2倍的視網膜螢幕和3倍的視網膜螢幕，2倍的視網膜螢幕，它的物理像素點大小是一般螢幕的1/4,3倍的視網膜螢幕，它的物理像素點大小是一般螢幕的1/9。
映像在視網膜螢幕上顯示的大小和在一般螢幕上顯示的大小一樣，但是由於視網膜螢幕的物理像素點比一般的螢幕小，映像在上面好像是被放大了，映像會變得模糊，為瞭解決這個問題，可以使用比原來大一倍的映像，然後用css樣式強制把映像的尺寸設為原來映像尺寸的大小，就可以解決模糊的問題。
清晰度解決過程：
背景圖強制改變大小，可以使用background新屬性
background新屬性
background-size:
裝置螢幕有多種不同的解析度，頁面適配方案有如下幾種：
1、全適配：流體布局+響應式布局
2、移動端適配：
流體布局，就是使用百分比來設定元素的寬度，元素的高度按實際高度寫固定值，流體布局中，元素的邊線無法用百分比，可以使用樣式中的計算函數 calc() 來設定寬度，或者使用 box-sizing 屬性將盒子設定為從邊線計算盒子尺寸。
calc()
可以通過計算的方式給元素加尺寸，比如： width：calc(25% - 4px);
box-sizing
1、content-box 預設的盒子尺寸計算方式
2、border-box 置盒子的尺寸計算方式為從邊框開始，盒子的尺寸，邊框和內填充算在盒子尺寸內
響應式布局就是使用媒體查詢的方式，通過查詢瀏覽器寬度，不同的寬度應用不同的樣式塊，每個樣式塊對應的是該寬度下的布局方式，從而實現響應式布局。響應式布局的頁面可以適配多種終端螢幕（pc、平板、手機）。
相應布局的虛擬碼如下：
@media (max-width:960px){ .left_con{width:58%;} .right_con{width:38%;}}@media (max-width:768px){ .left_con{width:100%;} .right_con{width:100%;}}首先瞭解em單位，em單位是參照元素自身的文字大小來設定尺寸，rem指的是參照根節點的文字大小，根節點指的是html標籤，設定html標籤的文字大小，其他的元素相關尺寸設定用rem，這樣，所有元素都有了統一的參照標準，改變html文字的大小，就會改變所有元素用rem設定的尺寸大小。
cssrem安裝
cssrem外掛程式可以動態地將px尺寸換算成rem尺寸
下載本項目，比如：git clone https://github.com/flashlizi/cssrem 進入packages目錄：Sublime Text -> Preferences -> Browse Packages... 複製下載的cssrem目錄到剛才的packges目錄裡。 重啟Sublime Text。
配置參數 參數設定檔：Sublime Text -> Preferences -> Package Settings -> cssrem px_to_rem - px轉rem的單位比例，預設為40。 max_rem_fraction_length - px轉rem的小數部分的最大長度。預設為6。 available_file_types - 啟用此外掛程式的檔案類型。預設為：[".css", ".less", ".sass"]。
彈性盒模型布局1、容器屬性
display : flex
聲明使用彈性盒布局
flex-direction : row | row-reverse | column | column-reverse
確定子項目排列的方向
flex-wrap : nowrap | wrap | wrap-reverse
元素超過父容器尺寸時是否換行
flex-flow : flex-direction | flex-wrap
同時設定flex-direction 和 flex-wrap
justify-content : flex-start | flex-end | center | space-between | space-around
子項目的尺寸確定之後，用此屬性來設定flex-direction定義方向上的分布方式
align-items : flex-start | flex-end | center | baseline | stretch
子項目的尺寸確定之後，用此屬性來設定flex-direction定義方向上的垂直方向的分布方式
align-content : flex-start | flex-end | center | space-between | space-around | stretch
設定多行子項目在行方向上的對齊
2、條目屬性
flex : none | <‘ flex-grow ‘> <‘ flex-shrink >‘? || <‘ flex-basis ‘>
同時設定flex-grow 和 flex-shrink 以及 flex-basis
flex-grow ： number
表示的是當父元素有多餘的空間時，這些空間在不同子項目之間的分配比例
flex-shrink： number
當父元素的空間不足時，各個子項目的尺寸縮小的比例
flex-basis ：length | percentage | auto | content
用來確定彈性條目的初始主軸尺寸。
align-self ：auto | flex-start | flex-end | center | baseline | stretch
覆寫父元素指定的對齊
order : integer
改變條目在容器中的出現順序
移動端頁面配置
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
