移動端web開發

視口 viewport

瀏覽器顯示頁面內容的螢幕區域。可分為 布局視口、視覺視口、理想視口。

布局視口 layout viewport

ios、android將這個布局視口解析度一般設定為980px

視覺視口 visual viewport

使用者正在看到的**區域 

理想視口 ideal viewport

<

meta 
name
="viewport"
content
="width=device-width,user-scalable=no,initial-scale=1.0,maxium-scale=1.0,minium-scale=1.0"
/>

pc端1px等於1物理畫素，但移動端並不一定。

乙個px能顯示的物理畫素點的個數，稱為物理畫素比或螢幕畫素比。

retina視網膜螢幕是一種顯示技術，可以將更多的物理畫素點壓縮到一塊螢幕裡，從而達到更高的解析度，並提高螢幕顯示的細膩程度。

二倍圖

背景縮放

background-size:長度 | 百分比 | cover | contain;

移動端開發解決方案

單獨製作移動端頁面（主流）: 網域名稱前面加m,通過判斷裝置，如果是移動裝置則跳轉到移動端。

流式布局(百分比布局)、flex彈性布局(推薦)、less+rem+**查詢布局、混合布局

響應式頁面相容移動端（其次）

**查詢、bootstarp

移動端瀏覽器

基本以webkit為主，可放心使用html5標籤和css3樣式，瀏覽器私有字首只需要考慮新增-webkit-

移動端css初始化

normalize.css   

css3盒子模型  box-sizing

box-sizing: border-box;    css3盒子的寬度 =  css樣式設定的width(包含boder和padding)  ,  盒子不會被邊框和內邊距撐開。

box-sizing: content-box; 傳統css盒子寬度 =  css樣式設定的width + border + padding ， 盒子被邊框和內邊距撐開。

特殊樣式

/*

css3盒子模型
*/box-sizing:border-box;
-webkit-box-sizing:border-box;
/*清除點選高亮效果
*/-webkit-tap-highlight-color:transparent;
/*移動端瀏覽器預設外觀在ios上加此屬性才能給按鈕和輸入框自定義樣式
*//*
禁止長按頁面時彈出選單
*/img,a 

盒子的寬度設定成百分比來根據螢幕寬度進行伸縮，不受固定畫素的限制。max-width、min-width、max-height、min-height

彈性布局(flex)

通過給父盒子新增flex屬性來控制子盒子的位置和排列方式。將父盒子設定為彈性布局後，子元素的float/clear/vertical-align屬性將失效。flex-container 容器、flex-item 專案。

常見父元素屬性: flex-direction 設定主軸方向、justify-content 設定主軸上子元素排列方式、flex-wrap、align-content、align-items、flex-flow

常見子元素屬性：flex、align-self、order

rem適配布局

rem是乙個相對單位，基準是相對於html元素的字型大小。

em也是乙個相對單位，基準是相對于父元素字型大小。

**查詢(media query) css3新語法 : 可以根據不同的裝置寬度來修改樣式。

/*

**型別 all|print|screen
**特性 width|min-width|max-width
*/@media **型別 and|not|only (**特性) 

<

link 
rel="stylesheet"
media
="**型別 and|not|only (**特性)"
href
="樣式檔案"
/>

1、less + **查詢 + rem  

頁面元素的rem值 = 頁面元素值 px / （螢幕寬度 / 劃分的份數）

螢幕寬度 / 劃分的份數 就是 html元素的 font-size大小

2、flexible.js + rem 

flexible.js  手機**團隊出的移動端適配庫，有了此庫可以不用再寫不同螢幕的**查詢，js裡面做了相應的處理，它預設將螢幕劃分為10等份，不同裝置下，比例仍會一致。

只需要確定當前裝置的html元素文字大小即可，剩餘的flexible.js會處理。

vscode外掛程式： px 轉 rem    =>   cssrem   該外掛程式預設html字型大小為16px 。

自定義html字型大小方法：首選項 > 設定 > 搜尋：cssrootfontsize > 修改完成後重啟vscode生效

響應式布局

響應式開發原理：使用**查詢根據不同裝置的寬度進行布局和樣式設定，從而適配不同的裝置。 

響應式需要乙個父級作為容器來配合子元素實現變化效果。

bootstrap 前端框架,來自twitter(推特)     中文網  

布局容器

.container  預設左右內邊距為15px  大屏(>=1200px) 寬度1170px  中屏(>=992px)  寬度970px  小屏(>=768px) 寬度750px  超小屏(100%)    

.container-fluid  流式布局容器，百分比寬度，佔據全部視口的容器

柵格系統 .col-螢幕型別-份數

將頁面布局劃分為等寬的列,   12列

列巢狀 .row   可去除.container左右內邊距

列偏移 .col-螢幕型別-offset-份數

列排序  .col-螢幕型別-push-份數  .col-螢幕型別-pull-份數

響應式工具:顯示與隱藏   .hidden-螢幕型別  .visible-螢幕型別

移動端web開發

viewport content width device width,user scalable no,initial scale 1.0,maximum scale 1.0,minimum scale 1.0 width 設定視口寬度 initial scale 初始化縮放比，大於0的數字 ma...

移動端Web開發

移動端web開發與pc端的web開發有尺寸上的不同，手機螢幕大小有很多種，因此尺寸方面有些要注意的。1.字型 採用js動態設定字型大小的方法 思路如下 螢幕寬度 640px,則font size 100px 螢幕寬度 640px,則font size 100 寬度 640px 字型單位為rem 在b...

移動端web開發

互動優化 1px dpr dpr dp viewport使手機瀏覽器先排版正確再縮放 移動web最佳設定 viewport content width device width,initial scale 1,user scalable no 相容性問題根據html的font size，基值設dev...