当前位置：首页 > news >正文

开发技术.前端开发相关问题

news 来源：原创 2025/5/16 14:30:04

第一部分响应式布局

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值变为 16px62.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. 固定布局、流式布局、弹性布局、自适应布局、响应式布局

固定布局/静态布局	用像素（绝对单位）作为单位 -确定：小屏幕显示不全，大屏幕有无意义空白
流式布局	流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系）。网页中主要的划分区域的尺寸使用百分数（搭配min-、max-属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。布局特点：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。【这就导致如果屏幕太大或者太小都会导致元素无法正常显示】设计方法：使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。
弹性布局	弹性布局 -用em和rem作为单位（根据字体百分比强制放大缩小页面）
自适应布局	只响应几个预设的分辨率模板，只有重新刷新才会根据根据当前切换不同的模板预设了一些布局样式，根据用户机型判断展示样式 -可通过媒体查询是否一镜到底判断是自适应布局（有分域名）还是响应式布局自适应布局，预设几个分辨率模板，但其实都把这几个布局都做了的很少，毕竟还有几个布局，增加了开发工作量，大部分只做2-3个布局。
响应式布局	一个页面，根据宽度自动更改布局和样式 ---根据宽度无缝衔接；总结：希望页面的内容可以完美的适应任何尺寸的屏幕 2010年CSS发布了响应式布局（苹果发布了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.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 版本和支付宝小程序版本。

特性