江蘇移動端頁面與PC端頁面開發的布局區別

網站建設 2022-03-02 次

移動端與PC端頁面布局區別

視口

視口是移動設備上用來顯示網頁的區域，一般會比移動設備可視區域大，寬度可能是980px或者1024px，目的是為了顯示下整個為PC端設計的網頁，這樣帶來的后果是移動端會出現橫向滾動條，為了避免這種情況，移動端會將視口縮放到移動端窗口的大小。這樣會讓網頁不容易觀看，可以用 meta 標簽，name=“viewport ” 來設置視口的大小，將視口的大小設置為和移動設備可視區一樣的大小。

設置方法如下( 快捷方式：meta:vp + tab )：


......

......

pc端與移動端渲染網頁過程：

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

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

圖像在視網膜屏幕上顯示的大小和在一般屏幕上顯示的大小一樣，但是由于視網膜屏幕的物理像素點比一般的屏幕小，圖像在上面好像是被放大了，圖像會變得模糊，為了解決這個問題，可以使用比原來大一倍的圖像，然后用css樣式強制把圖像的尺寸設為原來圖像尺寸的大小，就可以解決模糊的問題。

清晰度解決過程示意圖：

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

background新屬性

background-size:

length：用長度值指定背景圖像大小。不允許負值。

percentage：用百分比指定背景圖像大小。不允許負值。

auto：背景圖像的真實大小。

cover：將背景圖像等比縮放到完全覆蓋容器，背景圖像有可能超出容器。

contain：將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等，背景圖像始終被包含在容器內。

適配布局類型

PC及移動端頁面適配方法

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

1、全適配：響應式布局+流體布局

2、移動端適配：

流體布局+少量響應式

基于rem的布局

流體布局

流體布局，就是使用百分比來設置元素的寬度，元素的高度按實際高度寫固定值，流體布局中，元素的邊線無法用百分比，可以使用樣式中的計算函數 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:;}
 .right_con{width:;}
}

基于rem的布局

首先了解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”]。