移動端開發和佈局

文章目錄

響應式開發

Bootstrap前端開發框架

移動端基礎

移動端主流瀏覽器，主要對Webkit內核進行兼容
針對手機端開發，用Chrome dev模擬手機界面以及調試

視口
瀏覽器顯示頁面內容的屏幕區域，視口可以分爲佈局視口，視覺視口和理想視口
移動佈局想要做到的是理想視口：手機屏幕有多寬，佈局視口就多寬
想要理想視口，需要給移動端頁面添加meta視口標籤

佈局視口layout viewport
視覺視口 visual viewport
理想視口 idea viewport

meta視口標籤

<meta name="viewport" content="width=device-width, user-scalable=no, 
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

meta標籤中常設置user-scalable=no也就是禁止用戶縮放，那用戶縮放到底會造成什麼影響呢？其實也就是顯示上的變化。縮放一倍，CSS像素(邏輯像素，開發像素)所代表的物理像素也就縮放了一倍，即設備物理像素和設備獨立像素的比例增大(減小)了一倍。

二倍圖

物理像素&物理像素比
物理像素：就是分辨率，iphone的物理像素是750
在iphone8裏，1px開發像素 = 2個物理像素

UI設計師要求的1px是指設備的物理像素1px，而CSS裏記錄的像素是邏輯像素（開發像素），它們之間存在一個比例關係，可以用javascript中的window.devicePixelRatio來獲取，也可以用媒體查詢的-webkit-min-device-pixel-ratio來獲取。當然，比例是多少與設備相關。
二倍圖
比如需要一個50*50像素（css像素）的圖片，直接放到iphone裏面會放大2倍 100*100
所以放一個100*100的圖片，手動把這個圖片縮小爲50*50（css像素）
準備的圖片比實際需要的大2倍，這種方式就是2倍圖
多倍圖切圖cutterman
背景縮放
background-size屬性規定背景圖像的尺寸：寬度，高度
單位：長度 |百分比 |cover |contains

長度：只寫寬度或只寫高度，會等比例縮放
百分比是相對於父盒子縮放
cover把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域（寬度和高度等比例拉伸，要完全覆蓋盒子，可能有部分背景圖片顯示不全）
contains把圖像擴展至最大尺寸，使其寬度和高度完全適應內容區域（寬度和高度等比例拉伸，當寬度或高度到達盒子，就不再進行拉伸了，可能有空白區域）

例子：有一個50*50盒子需要背景圖片，圖片要準備2倍的，100*100
手動把圖片縮放一半，也就是50*50
div：background-size：50px，50px

移動端項目需要注意的4個問題

1）meta中設置viewport
在 index.html中添加meta元素,設置viewport。

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

阻止用戶手滑放大或縮小頁面：user-scalable=no

2）CSS樣式統一問題
我們需要重置頁面樣式，因爲在不同的手機瀏覽器上，默認的css樣式不是統一的。
解決方法：使用reset.css重置所有元素的默認樣式

3）一像素邊框問題
viewport的設置和屏幕物理分辨率是按比例而不是相同的. 移動端window對象有個devicePixelRatio屬性, 它表示設備物理像素和css像素的比例, 在retina屏的iphone手機上, 這個值爲2或3, css裏寫的1px長度映射到物理像素上就有2px或3px那麼長。

有的手機分辨率比較高，是2倍屏或3倍屏，手機上的瀏覽器就會把CSS中的1像素值展示爲2個或3個物理寬度

在手機上border無法達到我們想要的效果，這是因爲devicePixelRatio特性導致，iPhone的devicePixelRatio==2，而border-width: 1px描述的是設備獨立像素，所以，border被放大到物理像素2px顯示，在iPhone上就顯得較粗。

解決方法：

添加一個border.css庫，將利用scroll縮放的原理將邊框重置。當我們需要使用一像素邊框時只需要在標籤上添加對應類名，如設置底部一像素邊框就在標籤上加入"border-bottom"的class名
transform: scale(0.5) 方案 - 推薦: 很靈活
一般做法：將1px縮小爲0.5px來展示，然而0.5px並不是所有的設備或瀏覽器都支持，就考慮用媒體查詢或viewport將其縮放比例。
其實1像素問題的產生基本發生在設置邊框或分割線的時候，場景並不覆蓋全局樣式，因此，直接縮放需要設置的元素，纔是我們真正需要的。tranform就能實現這個需求。

/*設置height: 1px，根據媒體查詢結合transform縮放爲相應尺寸。*/
div {
    height:1px;
    background:#000;
    -webkit-transform: scaleY(0.5);
    -webkit-transform-origin:0 0;
    overflow: hidden;
}
/*2.用::after和::befor,設置border-bottom：1px solid #000,然後在縮放-webkit-transform: scaleY(0.5);可以實現兩根邊線的需求*/
div::after{
    content:'';width:100%;
    border-bottom:1px solid #000;
    transform: scaleY(0.5);
}
/*3.用::after設置border：1px solid #000; width:200%; height:200%,然後再縮放scaleY(0.5); 優點可以實現圓角，京東就是這麼實現的，缺點是按鈕添加active比較麻煩。*/
.div::after {
    content: '';
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
    -webkit-transform: scale(0.5,0.5);
    transform: scale(0.5,0.5);
    -webkit-transform-origin: top left;
}

4） 300毫秒點擊延遲問題

移動設備上的瀏覽器默認會在用戶點擊屏幕大約延遲300毫秒後纔會觸發點擊事件，這是爲了檢查用戶是否在做雙擊。
FastClick.js

移動端瀏覽器
移動端瀏覽器基本以webkit內核爲主，因此開發時考慮webkit兼容性問題
可以放心使用H5標籤和CSS3樣式
瀏覽器的私有前綴只需要考慮添加webkit即可
（瀏覽器私有前綴，是瀏覽器對於新CSS屬性的一個提前支持，-webkit-是webkit內核，-moz-是Firefox Gecko內核，moz代表的是Firefox的開發商Mozilla。）

CSS初始化 normalize.css
修復了瀏覽器的Bug
保護了有價值的默認值
是模塊化的，文檔詳細

CSS3盒子模型
傳統模式寬度計算（box-sizing: content - box）：盒子寬度 = CSS中設置的width + border + padding
CSS3盒子模型（box-sizing:border-box）：盒子寬度 = CSS中設置的寬度width
此時盒子設置多大就是多大，再設置padding和border也不會撐大盒子了

移動端可以全部CSS3盒子模型
PC端如果需要完全兼容，使用傳統；如果不考慮兼容性，使用CSS3盒子模型

移動端特殊樣式

移動開發選擇

單獨移動端頁面（主流）網址域名前加m(mobile)可以打開移動端 m.jd.com 通過判斷設備，如果是移動設備打開，則來到移動端頁面

流式佈局（百分比佈局）
flex彈性佈局（推薦）
less + rem + 媒體查詢佈局
混合佈局

響應式兼容PC移動端通過判斷屏幕寬度來改變樣式，以適應不同終端

媒體查詢
bootstrap

單獨移動端頁面

流式佈局

就是百分比佈局，也稱非固定像素佈局（常見）
通過把盒子的寬度設置成百分比，根據屏幕的寬度進行伸縮。不受固定像素的限制，內容向兩側填充
max-width 最大寬度（max-height）超過這個值就不縮放了
min-width最小寬度（min-height）

flex佈局

佈局原理
flexible Box 彈性佈局，爲盒狀模型提供最大的靈活度，任何一個容器都可以指定爲flex佈局。
通過給父盒子添加flex屬性，來控制子盒子的位置和排列方式

當爲父盒子設爲flex佈局以後，子元素的float，clear和vertical-align屬性將失效
伸縮佈局 = 彈性佈局 = 伸縮盒佈局 = 彈性盒佈局 = flex佈局
採用Flex佈局的元素，稱爲Flex容器（flex container）。它的所有子元素自動成爲容器成員，稱爲Flex 項目（flex item）

常見父項屬性

flex-direction：設置主軸的方向（即項目的排列方向）
row （默認是從左到右） | row-reverse | column | column-reverse;
主軸和側軸是會變化的，就看flex-direaction設置誰爲主軸，另一個就是側軸。
而我們的子元素是跟着主軸來排列的
justify-content：設置主軸上子元素的排列方式（使用這個屬性之前，先確定好主軸是哪個）
flex-start （默認是左對齊）| flex-end右對齊 | center居中 | space-between先兩端貼邊，再平分剩餘空間 | space-around平分剩餘空間，每個項目的margin-left，margin-right都相等
flex-wrap：設置子元素是否換行
nowrap（默認是不換行） | wrap | wrap-reverse;
flex佈局中，子元素默認是不換行。如果裝不下，會自動縮小子元素的寬度，放在父元素裏面
align-items：設置側軸上的子元素排列方式（單行）
flex-start（默認是從上到下） | flex-end | center（擠在一起居中，垂直居中） | baseline | stretch（拉伸，但子元素不要給高度）;
align-content：設置側軸上的子元素的排列方式（多行）子項出現換行的情況下
flex-start（默認在側軸的頭部開始排列） | flex-end | center（在側軸中間） | space-between（子項在側軸平分剩餘空間） | space-around （子項在側軸先分佈在兩頭，再平分剩餘空間）| stretch（子項元素高度是平分父元素高度的）;
flex-flow：複合屬性，相當於同時設置了flex-direction和flex-wrap
< flex-direction > || < flex-wrap >;

常見子項屬性

flex：子項目分配剩餘空間所佔的份數
flex：< number >，默認0
align-self：控制子項自己在側軸上的排列方式（可覆蓋align-items屬性，如果沒有父元素，則等同於stretch）
auto（默認繼承父元素的align-items屬性） | flex-start | flex-end | center | baseline | stretch;
order：定義項目的排列順序
數值越小越靠前（和z-index相反），默認0

Grid網格佈局

傳統佈局方式：利用position + display + float屬性（兼容性好，但麻煩）
Flex 佈局是軸線佈局，只能指定"項目"針對軸線的位置，可以看作是一維佈局（效率高，兼容性強）
Grid 佈局則是將容器劃分成"行"和"列"，產生單元格，然後指定"項目所在"的單元格，可以看作是二維佈局（目前兼容性不如flex，但Grid 佈局遠比 Flex 佈局強大）

（待續）

rem適配佈局

rem單位

em是父元素字體大小
rem（root em）是一個相對單位，基準是相對於html元素的字體大小
比如根元素（html）設置font-size=12px，非根元素設置width:2rem，則換算成px就是24px

rem的優點：可以通過修改html{}裏面的文字大小，來改變頁面中元素的大小，實現整體控制

媒體查詢

Media Query是CSS3新語法

使用@meida查詢，可以針對不同的媒體類型，定義不同的樣式
@media可以針對不同的屏幕尺寸設置不同的樣式
當重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面
爲了防止混亂，媒體查詢要按照從小到大（推薦）或從大到小的順序來寫，存在CSS重疊

語法規範

@media mediatype and | not | only (media feature) {
    CSS-Code;
}

<style>
/*在屏幕上，並且最大寬度是800像素（<=800px），設置樣式*/
	@media screen and (max-width: 800px){}
</style>

mediatype 查詢類型
將不同的終端設備劃分成不同的類型
all 用於所有設備；print用於打印機和打印預覽；screen用於電腦屏幕，平板電腦，智能手機
關鍵字
將媒體類型或多個媒體特性連接到一起，作爲媒體查詢的條件
and 將多個媒體特性連接到一起 “且”
not 排除某個媒體類型 “非”
noly 指定某個特定的媒體類型
媒體特性
width
min-width
max-width

引入資源
當樣式比較繁多的時候，可以針對不同的屏幕尺寸，使用不同的樣式表
原理：直接在link中判斷設備的尺寸，引用不同的css文件

<link rel="stylesheet" href="mystylesheet.css" media="mediatype and|not|only (media feature)" >

less基礎

CSS是一門非程序式語言，沒有變量，函數，作用域
Less（Leaner Style Sheets）是一門CSS擴展語言，也稱CSS預處理器

npm install -g less
lessc -v 查看版本

myless.less
@變量名：值；適用於顏色和數值
把less文件編譯成css文件，html才能使用
less嵌套：不用選擇器

.header{
	a{ //1. 子元素的樣式直接寫到父元素的樣式裏面
		color: red;
		&：hover{ //2.如果有僞類選擇器，僞元素選擇器，交集選擇器，內層選擇器的前面需要加&，a：hover{ }
			color: blue;
		}
	}
}

Less運算
任何數字，顏色或變量都可以參與運算
運算符中間左右有個空格隔開：1px + 5
對於不同單位的值之間的運算，運算結果取第一個值的單位
如果兩個值之間只有一個值有單位，運算結果就取該單位

rem適配方案

讓一些不能等比自適應的元素，達到當設備尺寸改變的時候，等比例適配當前設備
使用媒體查詢，根據不同設備按比例設置html的字體大小；然後頁面元素使用rem做尺寸單位，當html字體大小變化，元素尺寸也會發生變化，從而達到等比縮放的適配

可以按照設計稿與設備寬度的比例，動態計算並設置html根標籤的font-size大小（媒體查詢）
CSS中，設計稿元素的寬高，相對位置等取值，按照同等比例換算以rem爲單位的值

less + 媒體查詢 + rem
flexible.js + rem

響應式開發

需要一個父級作爲佈局容器，來配合子元素實現效果
原理：在不同屏幕下，通過媒體查詢來改變這個佈局容器的大小，再改變裏面子元素的排列方式和大小，從而實現在不同屏幕下，看到不同的頁面佈局和樣式變化，做到適配不同的設備

Bootstrap前端開發框架

http://bootstrap.css88.com/，推薦3.x.x
控制權在框架本身，使用者要按照框架所規定的某種規範進行開發

佈局容器
Bootstrap需要爲頁面內容和柵格系統包裹一個.container容器，.contain是Bootstrap預先定義好的類

container類
響應式佈局的容器，固定寬度（不同屏幕尺寸下使用不同寬度，不用使用媒體查詢了）
大屏（>=120px）寬度定爲1170px
中屏（>=992px）寬度定爲970px
小屏（>=768px）寬度定爲750px
超小屏（100%）
container-fluid類
流式佈局容器，百分百寬度
佔據全部視口（viewport）的容器
適合單獨做移動端開發

柵格系統
grid systems 將頁面佈局劃分爲等寬的列，通過列數的定義來模塊化頁面的佈局

Bootstrap提供了一套響應式，移動設備優先的流式柵格系統，隨着屏幕或視口尺寸的增加，系統會自動分爲最多12列
Bootstrap裏面container寬度是固定的，但在不同屏幕下，container寬度不同，我們再把container劃分爲12等份

已經包含了Normalize.css

柵格選項參數

如果孩子的份數相加
等於12，則孩子能佔滿整個的 container的寬度
小於12，則孩子佔不滿整個的 container的寬度，會有空白
大於12，則多餘的那一列會另起一行顯示

列嵌套
再把一個列看成12等份

不能加margin值，內部實現是width平分，float=left

列偏移
操作右側元素
偏移的份數= 12 - 兩個盒子的份數
當只有一個盒子，想做居中效果，那就偏移12 - 盒子份數 / 2

列排序
把右側盒子往左邊拉pull，把左側盒子往右邊推push

響應式工具
visible-xs，visible-sm，visible-lg是顯示某個頁面內容

移動端開發和佈局

文章目錄

移動端基礎

移動端項目需要注意的4個問題

單獨移動端頁面

流式佈局

flex佈局

Grid網格佈局

rem適配佈局

媒體查詢

less基礎

rem適配方案

響應式開發

Bootstrap前端開發框架

公司剛入職了一名 Java 中級開發，短短 4 行代碼居然湊齊了 3 個 bug！我哭了~~

公衆號5月C#/.NET熱文一覽

git 下載大陸鏡像地址

js面試手寫+編程題

前端網絡考點

js面試題-畫圖看輸出是啥

移動端開發和佈局

前端工作經驗

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結