6.0 移動端頁面佈局

時間  2021-08-14 標籤 css html 前端 html5 java git github 瀏覽器 sass app

 

移動端app分類

一、Native App 原生app手機應用程序
使用原生的語言開發的手機應用，Android系統用的是java，iOS系統用的是object-Ccss

二、Hybrid App 混合型app手機應用程序
混合使用原生的程序和html5頁面開發的手機應用html

三、Web App 基於Web的app手機應用程序
徹底使用html5頁面加前端js框架開發的手機應用前端

Viewport 視口

視口是移動設備上用來顯示網頁的區域，通常會比移動設備可視區域大，寬度多是980px或者1024px，目的是爲了顯示下整個爲PC端設計的網頁，這樣帶來的後果是移動端會出現橫向滾動條，爲了不這種狀況，移動端會將視口縮放到移動端窗口的大小。這樣會讓網頁不容易觀看，能夠用 meta 標籤，name=「viewport 」 來設置視口的大小，將視口的大小設置爲和移動設備可視區同樣的大小。html5

設置方法以下：java

<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端與移動端渲染網頁過程：
git

 

 

視網膜屏幕（retina屏幕）清晰度解決方案

視網膜屏幕指的是屏幕的物理像素密度更高的屏幕，物理像素能夠理解爲屏幕上的一個發光點，無數發光的點組成的屏幕，視網膜屏幕比通常屏幕的物理像素點更小，常見有2倍的視網膜屏幕和3倍的視網膜屏幕，2倍的視網膜屏幕，它的物理像素點大小是通常屏幕的1/4,3倍的視網膜屏幕，它的物理像素點大小是通常屏幕的1/9。github

圖像在視網膜屏幕上顯示的大小和在通常屏幕上顯示的大小同樣，可是因爲視網膜屏幕的物理像素點比通常的屏幕小，圖像在上面好像是被放大了，圖像會變得模糊，爲了解決這個問題，可使用比原來大一倍的圖像，而後用css樣式強制把圖像的尺寸設爲原來圖像尺寸的大小，就能夠解決模糊的問題。瀏覽器

清晰度解決過程示意圖：
sass

 

 

 

 

背景圖強制改變大小，可使用background新屬性app

background新屬性
background-size:

  • length：用長度值指定背景圖像大小。不容許負值。
  • percentage：用百分比指定背景圖像大小。不容許負值。
  • auto：背景圖像的真實大小。
  • cover：將背景圖像等比縮放到徹底覆蓋容器，背景圖像有可能超出容器。
  • contain：將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等，背景圖像始終被包含在容器內。

PC及移動端頁面適配方法

設備屏幕有多種不一樣的分辨率，頁面適配方案有以下幾種：

一、全適配：流體佈局+響應式佈局
二、移動端適配：

  • 流體佈局+少許響應式
  • 基於rem的佈局
  • 彈性盒模型

流體佈局

流體佈局，就是使用百分比來設置元素的寬度，元素的高度按實際高度寫固定值，流體佈局中，元素的邊線沒法用百分比，可使用樣式中的計算函數 calc() 來設置寬度，或者使用 box-sizing 屬性將盒子設置爲從邊線計算盒子尺寸。

calc()
能夠經過計算的方式給元素加尺寸，好比： width：calc(25% - 4px);

box-sizing
一、content-box 默認的盒子尺寸計算方式
二、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%;}
}

基於rem的佈局

首先了解em單位，em單位是參照元素自身的文字大小來設置尺寸，rem指的是參照根節點的文字大小，根節點指的是html標籤，設置html標籤的文字大小，其餘的元素相關尺寸設置用rem，這樣，全部元素都有了統一的參照標準，改變html文字的大小，就會改變全部元素用rem設置的尺寸大小。

c***em安裝

c***em插件能夠動態地將px尺寸換算成rem尺寸

下載本項目，好比：git clone https://github.com/flashlizi/c***em 進入packages目錄：Sublime Text -> Preferences -> Browse Packages... 複製下載的c***em目錄到剛纔的packges目錄裏。 重啓Sublime Text。

配置參數 參數配置文件：Sublime Text -> Preferences -> Package Settings -> c***em px_to_rem - px轉rem的單位比例，默認爲40。 max_rem_fraction_length - px轉rem的小數部分的最大長度。默認爲6。 available_file_types - 啓用此插件的文件類型。默認爲：[".css", ".less", ".sass"]。

彈性盒模型佈局

一、容器屬性
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
設置多行子元素在行方向上的對齊方式

二、條目屬性
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改變條目在容器中的出現順序

联系我们 沪ICP备13005482号-10