開發技術.前端開發相關問題

第一部分? 響應式布局

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.?固定布局、流式布局、彈性布局、自適應布局、響應式布局

固定布局/靜態布局

用像素(絕對單位)作為單位 -確定:小屏幕顯示不全,大屏幕有無意義空白

流式布局
  1. 流式布局(Liquid)的特點(也叫"Fluid") 是頁面元素的寬度按照屏幕分辨率進行適配調整,但整體布局不變。代表作柵欄系統(網格系)。

  2. 網頁中主要的劃分區域的尺寸使用百分數(搭配min-*max-*屬性使用),例如,設置網頁主體的寬度為80%min-width960px。圖片也作類似處理(width:100%, max-width一般設定為圖片本身的尺寸,防止被拉伸而失真)。

  3. 布局特點:屏幕分辨率變化時,頁面里元素的大小會變化而但布局不變。【這就導致如果屏幕太大或者太小都會導致元素無法正常顯示】

  4. 設計方法:使用%百分比定義寬度,高度大都是用px來固定住,可以根據可視區域 (viewport) 和父元素的實時尺寸進行調整,盡可能的適應各種分辨率。往往配合 max-width/min-width 等屬性控制尺寸流動范圍以免過大或者過小影響閱讀。

  5. 這種布局方式在Web前端開發的早期歷史上,用來應對不同尺寸的PC屏幕(那時屏幕尺寸的差異不會太大),在當今的移動端開發也是常用布局方式缺點明顯主要的問題是如果屏幕尺度跨度太大,那么在相對其原始設計而言過小或過大的屏幕上不能正常顯示。因為寬度使用%百分比定義,但是高度和文字大小等大都是用px來固定,所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長,但是高度、文字大小還是和原來一樣(即,這些東西無法變得流式”),顯示非常不協調。

彈性布局
  1. 彈性布局 -emrem作為單位(根據字體百分比強制放大縮小頁面)
自適應布局

?只響應幾個預設的分辨率模板,只有重新刷新才會根據根據當前切換不同的模板

預設了一些布局樣式,根據用戶機型判斷展示樣式 -可通過媒體查詢是否一鏡到底判斷是自適應布局(有分域名)還是響應式布局

自適應布局,預設幾個分辨率模板,但其實都把這幾個布局都做了的很少,畢竟還有幾個布局,增加了開發工作量,大部分只做2-3個布局。

響應式布局

一個頁面,根據寬度自動更改布局和樣式 ---根據寬度無縫銜接;

總結:希望頁面的內容可以完美的適應任何尺寸的屏幕

2010CSS發布了響應式布局(蘋果發布了iphone4,出現了高清屏,之前只有像素屏)

響應式網站:Starbucks Coffee Company

響應式 Vue 頁面布局組件-Element Plus

https://zhuanlan.zhihu.com/p/18434713883

Vue 3 的響應式系統基于 JavaScript 的?Proxy?對象實現(Vue 2 使?Object.defineProperty)。
Proxy 的優勢

  • 支持動態新增屬性(無需?Vue.set
  • 支持數組索引和長度變化
  • 性能更好(無需遞歸遍歷對象)

響應式設計中,為不同設備設置“斷點”是常見做法。以下是常見設備的屏幕寬度斷點:

設備類型? ? ? ? ? ? ? ? ? 常用斷點范圍
超小屏幕? ? (手機)? ? ? ?max-width: 576px
小屏幕? ? ? (?平板)? ? ? ?min-width: 577px 和 max-width: 768px
中等屏幕? ? ?(桌面)? ? ? ? min-width: 769px 和 max-width: 992px
大屏幕? ? ? ? (大桌面)?? ?min-width: 993px 和 max-width: 1200px
超大屏幕? ? ? ?min-width:? ? 1201px

前端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.jsVueView(延伸為UI、視圖之意)同音,同時view組件是uni-app中 最基礎,最重要的組件,故取名uView,表達源于uni-appVue之意,同時在此也對它們表示感謝。

#適用領域

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

6. vue腳手架

第三部分? 富文本編輯工具

秀米編輯器官網_微信公眾號排版和H5制作

第四部分? 微信開發

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/905709.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/905709.shtml
英文地址,請注明出處:http://en.pswp.cn/news/905709.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

1. Go 語言環境安裝

👑 博主簡介:高級開發工程師 👣 出沒地點:北京 💊 人生目標:自由 ——————————————————————————————————————————— 版權聲明:本文為原創文章&#xf…

WPF自定義控件開發全指南:多內容切換與動畫集成

WPF自定義控件開發全指南:多內容切換與動畫集成 一、控件基礎架構設計1.1 選擇控件基類1.2 定義關鍵屬性 二、動畫系統集成2.1 淡入淡出動畫實現2.2 滑動動畫實現 三、視覺狀態管理四、完整使用示例4.1 XAML聲明4.2 動畫觸發邏輯 五、擴展與優化5.1 性能優化建議5.2…

數據結構 -- 順序查找和折半查找

查找的基本概念 基本概念 查找:在數據集合中尋找滿足某種條件的數據元素的過程 查找表(查找結構):用于查找的數據集合稱為查找表,它由同一類型的數據結構元素(或記錄)組成 關鍵字&#xff1…

汽車功能安全--TC3xx MBIST設計要點

英飛凌針對硬件故障的自測,提供了四種機制:PBIST、LBIST、MONBIST和MBIST。 LBIST和MONBIST我們已經聊過了,今天就快速介紹下MBIST。 MBIST,全程Memory Built-in Self Test,用于檢測SRAM數據單元的完整性。 在26262…

openpi 入門教程

系列文章目錄 目錄 系列文章目錄 前言 一、運行要求 二、安裝 三、模型檢查點 3.1 基礎模型 3.2 微調模型 四、運行預訓練模型的推理 五、在自己的數據上微調基礎模型 5.1. 將數據轉換為 LeRobot 數據集 5.3. 啟動策略服務器并運行推理 5.4 更多示例 六、故障排除…

java加強 -Collection集合

集合是一種容器,類似于數組,但集合的大小可變,開發中也非常常用。Collection代表單列集合,每個元素(數據)只包含1個值。Collection集合分為兩類,List集合與set集合。 特點 List系列集合&#…

深入理解ThingsBoard的Actor模型

1、ThingsBoard系統中定義了哪些Actor ? ThingsBoard Actor 創建機制與作用對照表: Actor 類型 何時創建 由誰創建 是否緩存 作用描述 SystemActor 系統啟動時 DefaultActorService / ActorSystem ? 是 ★ ThingsBoard 平臺服務級別管理器:負責創建所有的Actor AppActor

WPS一旦打開,就會修改默認打開方式,怎么解?

目錄 前言 解決方法 結語 前言 電腦上同時存在WPS和微軟的Office全家桶,但是我更喜歡用Office全家桶。前幾天剛在設置改過來,忘記更改pdf文件打開默認應用。結果沒過幾天,不小心用WPS打開pdf文件時候,給我把默認設置全改回去了…

深度學習中--模型調試與可視化

第一部分:損失函數與準確率的監控(Loss / Accuracy Curve) 1. 為什么要監控 Loss 與 Accuracy? Loss 是模型優化的依據,但它可能下降了 Accuracy 反而沒變(過擬合信號) Accuracy 才是評估效果的…

中間件-RocketMQ

RocketMQ 基本架構消息模型消費者消費消息模式順序消息機制延遲消息批量消息事務消息消息重試最佳實踐 基本架構 nameServer: 維護broker列表信息,客戶端連接時只需要連接nameServer。可配置成集群。 broker:broker分為master和slave,master負…

anaconda3如何切換虛擬環境

在 Anaconda3 中切換虛擬環境可以通過 命令行 或 Anaconda Navigator 圖形界面實現。以下是詳細步驟: 方法1:通過命令行切換(推薦) 1. 查看所有虛擬環境 conda env list # 或 conda info --envs 輸出示例: base …

【vue】axios網絡請求介紹

一、基礎使用 1.引入js文件 2.在methods中的函數里寫 axios.get(路徑) .then((res))>{ console.log(res.data);//控制臺打印結果數據 this.listArrres.data//定義數組來接收返回來的數據 }) 二、參數傳遞 參數傳遞一般在路徑后面使用 params:{ num:2,…

機器學習 --- KNN算法

機器學習 — KNN算法 文章目錄 機器學習 --- KNN算法一,sklearn機器學習概述二,KNN算法---分類2.1樣本距離判斷2.2 KNN算法原理2.3 KNN缺點2.4 API2.5 使用sklearn中鳶尾花數據集實現KNN 一,sklearn機器學習概述 獲取數據、數據處理、特征工…

Spring Boot 中的重試機制

Retryable 注解簡介 Retryable 注解是 Spring Retry 模塊提供的,用于自動重試可能會失敗的方法。在微服務架構和分布式系統中,服務之間的調用可能會因為網絡問題、服務繁忙等原因失敗。使用 Retryable 可以提高應用的穩定性和容錯能力 1。 使用步驟 &…

FPGA生成隨機數的方法

FPGA生成隨機數的方法,目前有以下幾種: 1、震蕩采樣法 實現方式一:通過低頻時鐘作為D觸發器的時鐘輸入端,高頻時鐘作為D觸發器的數據輸入端,使用高頻采樣低頻,利用亞穩態輸出隨機數。 實現方式二:使用三個…

(五)毛子整潔架構(分布式日志/Redis緩存/OutBox Pattern)

文章目錄 項目地址一、結構化日志1.1 使用Serilog1. 安裝所需要的包2. 注冊服務和配置3. 安裝Seq服務 1.2 添加分布式id中間件1. 添加中間件2. 注冊服務3. 修改Application的LoggingBehavior 二、Redis緩存2.1 添加緩存1. 創建接口ICaching接口2. 實現ICaching接口3. 注冊Cachi…

Vue.js 全局導航守衛:深度解析與應用

在 Vue.js 開發中,導航守衛是一項極為重要的功能,它為開發者提供了對路由導航過程進行控制的能力。其中,全局導航守衛更是在整個應用的路由切換過程中發揮著關鍵作用。本文將深入探討全局導航守衛的分類、作用以及參數等方面內容。 一、全局…

使用FastAPI和React以及MongoDB構建全棧Web應用05 FastAPI快速入門

一、FastAPI概述 1.1 什么是FastAPI FastAPI is a modern, high-performance Python web framework designed for building APIs. It’s rapidly gaining popularity due to its ease of use, speed, and powerful features. Built on top of Starlette, FastAPI leverages a…

如何查看打開的 git bash 窗口是否是管理員權限打開

在 git bash 中輸入: net session >nul 2>&1 && (echo Ok) || (echo Failed) 顯示 OK 》是管理員權限; 顯示 Failed 》不是管理員權限。 如何刪除此步生成的垃圾文件: 新建一個 .txt 文件,輸入以下代碼…

得物0509面試手撕題目解答

題目 使用兩個棧(一個無序棧和一個空棧)將無序棧中的元素轉移到空棧,使其有序,不允許使用其他數據結構。 示例:輸入:[3, 1, 6, 4, 2, 5],輸出:[6, 5, 4, 3, 2, 1] 思路與代碼 如…