rem+@media+less是我們移動端布局的第一種方案。
移動端頁面設計稿尺寸：
– 安卓手機尺寸：320px 360px 375px 384px 400px 414px 500px 720px
– 蘋果手機尺寸：640px 750px
通過less+rem+@media 技術完成頁面在各個手機尺寸上的顯示
手機頁面的準備工作：
–ui設計師會先給移動端頁面設計乙個尺寸 如：蘇寧的尺寸是 750px
–前端開發人員再人為的把設計稿分為若干份 如：蘇寧分為 15等份
–(劃分頁面的份數的目的，只是為了求乙個基數值，在寫元素大小的時候可以進行換算)
–分完若干等份後，就可以算出不同尺寸頁面下 html裡面的font-size 字型大小大小
–如：750/15=50 750畫素的手機上的html
–如：720/15=48 720畫素的手機上的html
手機上元素的寬高就可以通過除以html裡面的字型大小大小，得到乙個rem相對單位的值
工作當中的研發流程：
–立專案 （專案的研發的時間）
–產品經理 去寫專案策劃書，專案說明書（對專案的介紹）
–產品經理/ui 做產品的原型圖 （原型圖出來後，前端就會開始研發）
–ui/ue 做專案的完稿 。
–前端研發 後端開發資料
–專案測試
–專案上線（專案完工）
flexible.js+rem是我們移動端布局的第二種方案。
所以現在在750尺寸的手機設計稿的字型大小大小是75px ，頁面中元素的寬高設定如： 320/75
@media screen and (
min-width
:750px)
}
vue 移動端適配 兩種方案
vue中實現移動端的適配 使用 團隊的 flexible實現手淘h5頁面的終端適配 使用vw結合rem實現適配 1.首先 適配的meta標籤少不了 2.設定 html 使用 設計稿 100px 100px 1rem 1rem 原理 a vw 表示螢幕 1 的寬度 b 設計稿 750px c 計算 1...
移動端布局方式 flex布局
1 justify content屬性 左右居中 justify content屬性定義了專案在主軸上的對齊方式。justify content flex start flex end center space between space around flex start 預設值 左對齊 flex...
HTML網頁布局的兩種方式
網頁布局兩種方式 浮動布局 定位布局 1.浮動布局 float left right none 注意 設定浮動之後，元素會脫離文件流，飄起來。塊級元素設定浮動，失去獨佔一行的特性。浮動元素會受 父級 元素的擠壓，可能擠到下一行去。自動擴充套件大盒子高度 1.盒子塌陷 大盒子不設定高度，小盒子又全部浮...