响应式设计

用户7579419949705 小时前
vue.js·响应式设计
Vue响应式原理推导过程最初的响应式模型非常简单,就是手动实现函数与对象的绑定关系:存在的问题:优势:改进方向是使用数组收集需要响应的函数,方便统一管理和调用:
断竿散人15 天前
前端·css·响应式设计
📏CSS尺寸单位终极手册:从px到fr的完全征服指南摘要:你以为px和%就是全部?90%的开发者用错rem和vw!本文将系统拆解七大类型、27种单位,揭秘移动端适配的黄金比例,深入ch、lh等小众但致命的单位,附带REM计算器+视口调试工具,让你彻底告别布局失控!
charlee4418 天前
css·markdown·响应式设计·flexbox·粘性定位
给Markdown渲染网页增加一个目录组件(Vite+Vditor+Handlebars)(下)在上一篇文章《给Markdown渲染网页增加一个目录组件(Vite+Vditor+Handlebars)(上)》中笔者介绍了如何实现在Markdown渲染网页中加一个目录组件。不过,上一篇文章中只是介绍了一下功能也就是JavaScript部分的具体实现。其实要实现这个功能,另外一个关键就是样式也就是CSS部分的设计。
孤鸿玉2 个月前
android·前端·响应式设计
[Flutter小试牛刀] 低配版signals,添加多层监听链本文续接上篇文章: #[Flutter小试牛刀] 写一个低配版的signals在上篇文章里,我们已经写了一个减配版的signals,但它仍然有很多缺陷:
callmeSoon3 个月前
vue.js·响应式设计
Vue Signals 进化论(v3.6):Alien Signals 终局之战?文章首发于个人博客。✨ AI 摘要Vue 3.6 响应式系统将引入 Alien Signals 进一步优化性能。文章深入分析了响应式传播算法模型(Push、Pull、Push-pull),对比了 Preact Signals(Vue 3.5)与 Alien Signals 的实现差异。Alien Signals 延续优化的双向链表结构,实现了类似 Reactively 的 push-pull-push 混合模型。这种设计大幅提升了性能,使其在信号框架性能测试中登顶榜首,为 Vue 响应式系统带来新的突破。
海石3 个月前
前端·vue.js·响应式设计
vue2升级vue3踩坑——【依赖注入】可能成功了,但【依赖注入】成功了不太可能博主最近做一些页面迁移的工作,即将某些页面以子应用的方式嵌入到其他系统的基座应用中(基于micro-app这一微前端方案实现)。
逾明3 个月前
前端·响应式设计·postcss
使用postcss-px-to-viewport-8-plugin将页面转响应式公司最近接了个项目,其中要求部分页面在移动端正常显示,第一方案是使用响应式,但是设计稿最后出的和Web端差别较大同时两端的功能不是完全对齐的,所以决定使用两个模块去实现,通过路由来控制显示的页面。
callmeSoon3 个月前
vue.js·响应式设计
Vue Signals 进化论(v3.5):Preact 重构启示录文章首发于个人博客。✨ AI 摘要Vue 3.5 的响应式系统通过借鉴 Preact Signals 的双向链表结构与版本计数机制实现突破性重构。新架构以 Link 节点为桥梁,解耦订阅者(Sub)与依赖项(Dep),通过双向链表实现高效依赖收集与触发,内存占用减少 56%。版本计数机制优化计算属性(computed)的惰性计算与缓存策略,仅在依赖变更时重新计算。此次重构还引入惰性订阅特性,计算属性仅在首次被引用时建立依赖关系,减少冗余性能消耗。Vue 3.5 的革新不仅延续了 Preact 的“信号哲学
answerball4 个月前
前端·响应式设计·响应式编程
🔥 Vue3响应式源码深度解剖:从Proxy魔法到依赖收集,手把手教你造轮子!🚀大家好,我是某大三前端预备役选手🐶,最近闭关修炼Vue3响应式源码,不仅手撕了reactive、shallowReactive、ref等核心API,还顺带偷师了尤大团队的代码设计哲学!今天就用大长文+灵魂图解,带大家深入Vue3响应式的灵魂腹地!(文末有手写代码GitHub仓库哦~)
aoi4 个月前
前端·vue.js·响应式设计
Vue2的响应式原理解析,看了都懂的流程图Vue 2响应式原理时序图与部分源码记录如下:图很直观!官网对响应式的说明: v2.cn.vuejs.org/v2/guide/re…
木亦Sam4 个月前
前端·响应式设计
响应式网页设计中媒体查询的进阶运用你好,我是木亦,对于一名前端开发工程师而言,响应式网页开发是不可或缺的核心技能。它可以确保网页在各类屏幕尺寸与设备上完美呈现的重任,致力于为用户打造始终如一且优质的浏览体验。以淘宝为例,无论用户是在电脑端精挑细选商品,还是用手机便捷下单,页面都会智能适配屏幕,清晰展示商品图片,同时提供便捷的操作按钮,让购物流程无缝衔接。而媒体查询作为实现响应式设计的关键技术,我们不仅要掌握其基础用法,更要深入探索它的进阶应用,从而让网页设计跃上新的台阶。
我能熬又能学5 个月前
vue.js·前端框架·响应式设计
一文打通VUE3响应式原理及其简易实现主要源码在 packages/reactivity/src 目录下定义响应式副作用的核心逻辑,包括 watchEffect、watch 的底层实现
三天不学习6 个月前
前端·css·响应式设计·响应式布局
CSS 之 响应式设计 前世今生早年设计 Web 时,页面是以适配特定的屏幕大小为考量创建的。如果用户正在使用比设计者考虑到的更小或者更大的屏幕,那么结果从多余的滚动条,到过长的行和没有被合理利用的空间,不一而足。随着人们使用的屏幕尺寸的种类越来越多,出现了响应式网页设计的概念(responsive web design,RWD),RWD 指的是允许 Web 页面适应不同屏幕宽度因素等,进行布局和外观的调整的一系列实践。这是改变我们设计多设备网页的方式的思想,在这篇文章里,我们将会帮你理解掌握它时所需知道的主要技能。
我码玄黄7 个月前
flutter·响应式设计·dart
Flutter响应式设计在 Flutter 中,响应式设计是指构建能够自适应不同屏幕尺寸、分辨率和方向的用户界面。这涉及到使用各种布局 Widget 和媒体查询来确保应用在各种设备上都能提供良好用户体验。
wswmsword8 个月前
前端·响应式设计·postcss·移动端适配·浏览器适配
增强 vw/rem 移动端适配,适配宽屏、桌面端、三折屏vw 和 rem 是两个神奇的 CSS 长度单位,认识它们之前,我一度认为招聘广告上的“像素级还原”是一种超能力,我想具备这种能力的人,一定专业过硬、有一双高分辨率的深邃大眼睛。
安冬的码畜日常9 个月前
前端·css·css3·html5·响应式设计·meta标签
【CSS in Depth 2 精译_046】7.1 CSS 响应式设计中的移动端优先设计原则(下)当前内容所在位置(可进入专栏查看其他译好的章节内容)《CSS in Depth》新版封面译者按 何谓经典著作?大概就是在阅读过程中,可以深切感受到作者对所讲内容的如数家珍、倾囊相授;通过把每个细节掰开了揉碎了演示出来,手把手地教你怎么去理解某个知识点,生怕读者看不懂。就比如这本再版的《CSS in Depth》。
安冬的码畜日常9 个月前
前端·css·css3·html5·响应式设计·响应式
【CSS in Depth 2 精译_044】第七章 响应式设计概述当前内容所在位置(可进入专栏查看其他译好的章节内容)《CSS in Depth》新版封面译者按 继上一章学完 CSS 定位与堆叠上下文相关的知识后,本章来到全书第二篇(涵盖第 4 ~ 7 章内容)的最后一章——响应式设计。由于篇幅原因,开篇概述并没有和 7.1 节合并到一起。下一篇将重点展开响应式设计三大原则的第一大原则:移动端优先设计原则。本节先来看看响应式设计的相关背景知识,也算是给大家预热预热。前面知识点还有薄弱环节的,也可以利用我上面给出的各章节完整目录,对照梳理一下,及时查漏补缺。一切准备就绪后
zxhnext9 个月前
前端·vue.js·响应式设计
如何实现一个动态表单在开发表单时常见的有两种做法:一种是通过配置代码的方式,而另一种则是通过组件组合的方式。通过配置代码生成的表单,我们称之为动态表单(Dynamic Form),而通过组件组合生成的表单,我们称之为普通表单。
一条晒干的咸魚9 个月前
前端·css·html·css3·响应式设计·媒体查询
响应式CSS 媒体查询——WEB开发系列39CSS媒体查询(Media Queries)是响应式设计中的核心技术之一,帮助我们在不同设备上展示不同的样式。通过媒体查询,开发者可以检测用户设备的特性,如屏幕宽度、高度、分辨率、方向等,针对性地调整网页布局。
秋窗71 年前
前端·bootstrap·html·响应式设计·响应式布局
关于使用Bootstrap实现响应式设计的一些感想最近在写一个项目,要求使用响应式设计,这可让我十分头疼,又要临时学一下bootstrap,一路学下来,不能说是收获满满,但也是有一些心得体会,于是在此记录。