第一部分? 響應式布局
1. 幾個布局單位概念
PX: px像素(Pixel) | 相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。PX特點 1. IE無法調整那些使用px作為單位的字體大小; 2. 國外的大部分網站能夠調整的原因在于其使用了em或rem作為字體單位; 3. Firefox能夠調整px和em,rem,但是96%以上的中國網民使用IE瀏覽器(或內核)。 | |
EM:em是相對長度單位。 | 相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置,則相對于瀏覽器的默認字體尺寸。 EM特點 :1. em的值并不是固定的;2. em會繼承父級元素的字體大小。注意:任意瀏覽器的默認字體高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。為了簡化font-size的換算,需要在css中的body選擇器中聲明Font-size=62.5%,這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10,然后換上em作為單位就行了。 所以我們在寫CSS的時候,需要注意兩點: 1. body選擇器中聲明Font-size=62.5%; 2. 將你的原來的px數值除以10,然后換上em作為單位; 3. 重新計算那些被放大的字體的em數值。避免字體大小的重復聲明。 也就是避免1.2 * 1.2= 1.44的現象。比如說你在#content中聲明了字體大小為1.2em,那么在聲明p的字體大小時就只能是1em,而不是1.2em, 因為此em非彼em,它因繼承#content的字體高而變為了1em=12px。 | |
REM | rem是CSS3新增的一個相對單位(root em,根em),這個單位引起了廣泛關注。這個單位與em有什么區別呢?區別在于使用rem為元素設定字體大小時,仍然是相對大小,但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優點于一身,通過它既可以做到只修改根元素就成比例地調整所有字體大小,又可以避免字體大小逐層復合的連鎖反應。目前,除了IE8及更早版本外,所有瀏覽器均已支持rem。對于不支持它的瀏覽器,應對方法也很簡單,就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。下面就是一個例子: p {font-size:14px; font-size:.875rem;} | |
注意:?選擇使用什么字體單位主要由你的項目來決定,如果你的用戶群都使用最新版的瀏覽器,那推薦使用rem,如果要考慮兼容性,那就使用px,或者兩者同時使用。 px 與 rem 的選擇? 對于只需要適配少部分手機設備,且分辨率對頁面影響不大的,使用px即可 。 對于需要適配各種移動設備,使用rem,例如只需要適配iPhone和iPad等分辨率差別比較挺大的設備。 | ||
![]() | ||
2. 移動端開發現狀-webkit
WebKit 是一個跨平臺的 Web 瀏覽器引擎,蘋果的 Safari、谷歌的 Chrome 瀏覽器都是基于這個框架來開發的。WebKit 還支持移動設備和手機,包括 iPhone 和 Android 手機都是使用 WebKit 做為瀏覽器的核心。
WebKit 是一個開源項目,其起源可追溯到 K Desktop Environment (KDE)。WebKit 項目催生了面向移動設備的現代 Web 應用程序。雖然設備本身的能力和形態因素都相當重要,但移動用戶最熱衷的仍然是內容。如果移動用戶可用的內容只是 Internet 用戶可用內容的一個很小的子集,那么用戶體驗充其量也只能劃分為二等。
WebKit 還應用在了桌面的 Safari 瀏覽器內,該瀏覽器是 Mac OS X 平臺默認的瀏覽器。不管我們討論的是桌面版本還是 iPhone 或 Android 上的瀏覽器引擎,WebKit 均優先支持 HTML 和 CSS 特性。實際上,WebKit 還支持尚未被其他瀏覽器采納的一些 CSS 樣式 — 這些特性正在得到 HTML5 規范的考慮。
3. 移動端屏幕現狀
4.?固定布局、流式布局、彈性布局、自適應布局、響應式布局
固定布局/靜態布局 | 用像素(絕對單位)作為單位 -確定:小屏幕顯示不全,大屏幕有無意義空白 |
流式布局 |
|
彈性布局 |
|
自適應布局 | ?只響應幾個預設的分辨率模板,只有重新刷新才會根據根據當前切換不同的模板 預設了一些布局樣式,根據用戶機型判斷展示樣式 -可通過媒體查詢是否一鏡到底判斷是自適應布局(有分域名)還是響應式布局 自適應布局,預設幾個分辨率模板,但其實都把這幾個布局都做了的很少,畢竟還有幾個布局,增加了開發工作量,大部分只做2-3個布局。 |
響應式布局 | 一個頁面,根據寬度自動更改布局和樣式 ---根據寬度無縫銜接; 總結:希望頁面的內容可以完美的適應任何尺寸的屏幕 2010年CSS發布了響應式布局(蘋果發布了iphone4,出現了高清屏,之前只有像素屏) 響應式網站:Starbucks Coffee Company 響應式 Vue 頁面布局組件-Element Plus https://zhuanlan.zhihu.com/p/18434713883 Vue 3 的響應式系統基于 JavaScript 的?
響應式設計中,為不同設備設置“斷點”是常見做法。以下是常見設備的屏幕寬度斷點: 設備類型? ? ? ? ? ? ? ? ? 常用斷點范圍 前端Vue3項目響應式布局實戰——基于Flex布局和媒體查詢的響應式布局設計_vue3響應式布局-CSDN博客 |
|
第二部分? Vue及基于vue的前端UI框架
1. vue3
Vue(讀? /vju?/,類似于 view),不要讀錯。是一套用于構建用戶界面的漸進式 MVVM 模型框架。與其它大型框架不同的是,Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層,不僅易于上手,還便于與第三方庫或既有項目整合。另一方面,當與現代化的工具鏈以及各種支持類庫結合使用時,Vue 也完全能夠為復雜的單頁應用提供驅動。
Vue 是?個漸進式的前端框架,什么是漸進式的呢?
簡單來說可以理解為輕量級,Vue.js 核?庫只提供了基礎功能,讓你在使用 Vue 作為開發框架時,不需要?次性引入過重的依賴,可以先使用核?功能,如果應用再進?步升級變得更復雜以后,可以逐漸的引入 Vue 生態的其他組件,例如 vue-router、vuex、 Axios 等,而不是?股腦的?次性全塞進來。
單頁 Web 應用(single page web application,SPA),就是只有一張 Web 頁面的應用。單頁應用程序(SPA)是加載單個 HTML 頁面并在用戶與應用程序交互時動態更新該頁面的 Web 應用程序。瀏覽器一開始會加載必需的 HTML、CSS 和 JavaScript,所有的操作都在這張頁面上完成,都由 JavaScript 來控制。
2. 基于vue的UI框架
3. UView UI ---unapp的ui組件-
uView UI---uView 2.0 - 全面兼容 nvue 的 uni-app 生態框架 - uni-app UI 框架
uView UI,是全面兼容nvue(native vue)的uni-app生態框架,全面的組件和便捷的工具會讓您信手拈來,如魚得水.
nvue介紹 | uni-app官網
介紹 | uView 2.0 - 全面兼容 nvue 的 uni-app 生態框架 - uni-app UI 框架
uView2.0是繼
1.0
以來的一次重大更新,2.0
已全面兼容nvue
,為了這個最初的夢想,我們曾日以夜繼,挑燈夜戰,聞雞起舞。您能看到屏幕上的字,卻看不到我們灑在鍵盤上的淚。uView來源于社區,也回歸到社區,正是有一群熱愛
uni-app
生態的同學推著它前行,而我們也一如既往的承諾,uView永久開源,永遠免費。關于uView的取名來由,首字母
u
來自于uni-app
首字母,uni-app
是基于Vue.js
,Vue
和View
(延伸為UI、視圖之意)同音,同時view
組件是uni-app
中 最基礎,最重要的組件,故取名uView,表達源于uni-app
和Vue
之意,同時在此也對它們表示感謝。#適用領域
uView是uni-app生態專用的UI框架,uni-app 是一個使用 Vue.js 開發所有前端應用的框架,開發者編寫一套代碼, 可發布到iOS、Android、H5、以及各種小程序(微信/支付寶/百度/頭條/QQ/釘釘)等多個平臺(引言自uni-app網)。但目前除微信小程序,其它小程序平臺的兼容可能存在一些問題,后續會針對這方面持續優化。
4. Element Plus
一個 Vue 3 UI 框架 | Element Plus
Overview 組件總覽 | Element Plus
5. Vant3.0 --https://www.bookstack.cn/read/vant-3.0-zh/%E4%B8%9A%E5%8A%A1%E7%BB%84%E4%BB%B6.md
開發指南 - 介紹 - 《Vant 3.0 移動組件庫文檔(Vue 3版)》 - 書棧網 · BookStack
業務組件 - 《Vant 3.0 移動組件庫文檔(Vue 3版)》 - 書棧網 · BookStack
Vant,輕量、可靠的移動端 Vue 組件庫;
Vant 是有贊前端團隊開源的移動端組件庫,于 2017 年開源,已持續維護 4 年時間。Vant 對內承載了有贊所有核心業務,對外服務十多萬開發者,是業界主流的移動端組件庫之一。目前 Vant 官方提供了?Vue 2 版本、Vue 3 版本和微信小程序版本,并由社區團隊維護?React 版本和支付寶小程序版本。
- 提供 60 多個高質量組件,覆蓋移動端各類場景
- 性能極佳,組件平均體積不到 1kb(min+gzip)
- 單元測試覆蓋率 90%+,提供穩定性保障
- 完善的中英文文檔和示例
- 支持 Vue 2 & Vue 3
- 支持按需引入
- 支持主題定制
- 支持國際化
- 支持 TypeScript
- 支持 SSR