文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

【HarmonyOS NEXT】一次开发多端部署（以轮播图、Tab栏、列表为例，配合栅格布局与媒体查询，进行 UI 的一多开发）

关键词：一多、响应式、媒体查询、栅格布局、断点、UI随着设备形态的逐渐增多，应用界面适配也面临着很大问题，在以往的安卓应用开发过程中，往往需要重新开发一套适用于大屏展示的应用，耗时又耗力，而鸿蒙提供响应式开发的解决方案...了解断点、媒体查询、栅格布局断点媒体查询栅格布局2. 封装媒体查询监听断点工具类3. 配合媒体查询做 Swiper() 轮播图分割效果4. 配合媒体查询做 Tab 栏 UI 展示位置变动5....断点名称取值范围（vp）xs[0, 320）sm[320, 600)md[600, 840)lg[840, +∞)媒体查询媒体查询支持监听窗口宽度、横竖屏、深浅色、设备类型等多种媒体特征，当媒体特征发生改变时同步调整页面布局...我们可以借助媒体查询能力，监听断点的变化。...... } TabContent() { // 标签页 ... } TabContent() { // 标签页 ... } }

42810

vue-next-admin后台管理系统

iconfont icon-shouye', // 自行再添加 ... }, } 2.布局配置 /src/stores/themeConfig.ts 包含：菜单栏，顶栏，tagsView标签页，...(全局主题样式，用于全局改变样式) │ ├── media (媒体查询) │ ├── chart.scss (大数据图表) │ ├── cityLinkage.scss (Cascader 级联选择器城市选择...│ ├── index.scss (媒体查询定义主样式) │ ├── layout.scss (框架布局) │ ├── login.scss (登录界面) │ ├── media.scss (媒体查询主出口...(tagsView 标签页) │ ├── mixins (scss混入) │ ├── element-mixins.scss (定义重置的element plus混入复用样式) │ ├── function.scs....侧边栏logo /@/layout/logo 8.面包屑 Breadcrumb /@/layout/navBars/Breadcrumb/breadcrumb.vue 9.Tagsview标签页

3.1K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Bootstrap笔记

    引导指令,引导程序Bootstrap 是当下最流行的前端框架（界面工具集）；特点就是灵活简洁，代码优雅，美观大方；其目的是为了让 Web 开发更敏捷；是 Twitter 公司的两名前端工程师 Mark...jQueryBootstrap框架中的所有JS组件都依赖于jQuery实现html5shiv让低版本浏览器可以识别HTML5的新标签，如header、footer、section等respond让低版本浏览器可以支持CSS媒体查询功能基础...CSS样式概要预置排版样式统一预制标签样式按钮样式表格样式表单样式图片样式辅助工具类代码样式栅格系统响应式工具类预置界面组件导航导航条面包屑导航下拉菜单按钮式下拉菜单按钮组输入框组警告框页头分页列表组面板媒体对象进度条...jQuery实现 html5shiv 让低版本浏览器可以识别HTML5的新标签，如header、footer、section等 respond 让低版本浏览器可以支持CSS媒体查询功能...输入框组 警告框 页头 分页 列表组 面板 媒体对象 进度条 Glyphicons 标签 徽章 缩略图 大屏幕 嵌入内容 内嵌 JavaScript插件 JavaScript插件的依赖情况 如何使用

    4.5K90

    uni-app（优医咨询）项目实战 - 第2天

    创建一个查询实例（查询器），进而调用该实例的方法来查询页面中的节点元素。...1.2.2 custom-tabs 标签页（tabs）的切换在开发中是经常会使用到的一种交互方式，【优医咨询】项目就用到这种交互方式，接下来我们自已封装一个标签页组件，按着 easycom 的规范创建组件目录及文件...1.4.2 多色图标 多色图标目通过 svg 来支持的，然而微信小程序目前还不支持 svg 格式图片，所以在 uni-app 中多色图标只能用普通的图片来代替。...iconfont-tools 根据引导生成支持多色图标的文件，每个步骤中指定的名称自已可任意指定。...@import '@/static/fonts/iconfont.scss'; // 多色图标 @import 'color-fonts.scss'; <!

    62110

    干货 | 响应式设计在携程火车票的应用

    1）业务代码中充斥着大量的媒体查询代码，两个端样式的分开书写不利于阅读和维护。...这样就把移动端和桌面端的样式写在了一起，样式中减少了大量的媒体查询的代码，并且.pc、.h5的名字不比媒体查询的代码更容易看懂吗？ 当然isMobile可以通过屏幕尺寸甚至可以通过UA来实现。...pc会从.box的祖先元素中去寻找，在scss中可以使用@at-root实现相同的效果。 2）size的增加 桌面端和移动端的屏幕大小和操作方式的差异决定了两者的设计一定存在着根本性的区别。...由于我们用的是携程公司内部的nfes ssr 框架，nfes是这样去定义一个路由的： javascript { reg: '/xxx', pageName: 'xxx.html', } 基于此，我们向框架组提出了...目前在trip中铁项目中的订单详情页和订单完成页，用了响应式设计来开发，其他页面也在陆续跟进中。

    78410

    推荐10个不错的React开源项目

    项目链接：https://github.com/thedevs-network/kutt 2，Win11 in React Win11 in React是一个使用 React、CSS (SCSS) 和...该应用支持搜索笔记、多光标编辑、链接笔记、语法高亮、键盘快捷键、拖放操作、Markdown 预览等功能。...除此之外，还使用 SCSS (CSS) 并遵循 BEM 命名方法来设置应用程序的样式，是一款不错的学习React知识的技术库。...功能上，该项目实现了登录/登出、发现页、每日歌曲推荐页、全部歌单页、最新音乐页、歌单详情页、音乐播放详情页、播放记录、搜索、创建和收藏的歌单列表等功能。...项目链接：https://github.com/salihozdemir/stackoverflow-clone 10，spotify-clone-client Spotify是国外的一个正版流媒体音乐服务平台

    16.3K30

    《Discuz! X3.5深度开发与商业实践》终极指南优雅草卓伊凡

    4K超清视频 | 直播答疑+工程文件分享 || 纸质书 | 精装印刷版 | 附赠企业开发合同模板 |二、终极增强版目录第一部分：筑基篇（200页）...，上限10天付费查看内容插件（集成支付宝沙箱）AI内容审核插件（对接腾讯云内容安全API）直播推流插件（RTMP协议实现）微信小程序同步插件（uni-app桥接方案）第3章 数据库高级应用3.1 分表查询优化...：// 大数据量表查询示例$posts = C::t('forum_post')->fetch_all_by_author( $uid, $page, 20, 'dateline...DESC');第三部分：模板开发精要（300页）第4章 PC端模板开发4.1 企业风格模板开发：使用Sass重构CSS架构// _variables.scss$primary-color: #3c8dbc...;$breakpoints: (mobile: 768px);4.2 开发案例：技术论坛模板（深色模式+代码高亮）电商社区模板（商品瀑布流布局）第5章 移动端专项5.1 响应式设计原则：媒体查询断点优化方案

    29200

    KDD24 | MMBee：多模态融合和行为兴趣扩展在快手直播礼物推荐中的应用

    本文提出了基于实时多模态融合和行为扩展的MMBee方法。 首先提出了一个具有可学习查询的多模式融合模块（MFQ），用于感知流媒体片段的动态内容，并处理复杂的多模式交互，包括图像、文本评论和语音。...为了缓解送礼行为的稀疏性问题，提出了一种新的graph引导的兴趣扩展（GIE）方法，该方法学习具有多模态属性的大规模送礼graph上的用户和流媒体表征。...为了解决这个问题，引入了几个可学习的查询token来提取流媒体感知的内容模式。每个作者都保留了一组随机初始化的可学习查询emb。N表示每个作者的查询token数。...可学习查询首先通过cross attention与融合的多模态特征交互然后输入自注意力层 2.2 graph引导的兴趣扩展 2.2.1 user-to-author graph和author-to-author...为了将相似的节点聚类在一起，同时推开不相似的节点，循环遍历图G1中的所有节点，通过元路径引导的邻居得到正样本节点，负样本节点是随机采样的。

    76610

    2015-2016前端架构体系技术精简版

    点击查看github高清图 点击查看完整版 一、框架与组件 **bootstrap等UI框架设计与实现 伸缩布局：grid网格布局 基础UI样式：元素reset、按钮、图片、菜单、表单 组件UI样式：按钮组、...字体图标、下拉菜单、输入框组、导航组、面包屑、分页、标签、轮播、弹出框、列表、多媒体、警告 响应式布局：布局、结构、样式、媒体、javascript响应式 第三方插件：插件管理 **jQuery、zepto...二、构建生态 **grunt/gulp开发环境任务编写 文件处理插件：html、scss、js、image、font、其它 优化插件：雪碧图、图片压缩、iconfont构建 发布替换插件 打包、压缩包插件...compass/less/postcss常用语法与使用 常用语法功能 组件化UI设计管理 构建工具实现方案 雪碧图自动合成 iconfont自动接入等等 **media query与常见页面尺寸了解 媒体类型引入和媒体特性引入...device-width适应 retina屏幕适应 **em,rem原理与实现 **code4ui、code4app、初页、maka等 前端dom操作即使刷新前端页面 根据dom操作生成组件config

    4.7K50

    国产开源一套开源办公套件,为企业团队搭建OFFICE在线协同办公平台

    主要体现的功能是支持企业部门的组织架构建立共享目录，也支持组的方式灵活建立共享目录。支持文件标签，多版本，评论，详细的目录权限等协作功能。 文档 : 在线 Word 文档协作工具。...新闻 : 文章系统，可用于企业新闻，通知等用途 通讯录 : 企业人员联系方式查询 文集 : 通过树形目录有序管理文档。...除了以上自己开发了一些工具，套件里还集成了大量的其他开源工具，如网盘里用到的在线压缩、解压，各类媒体文件预览，各类文档预览与编辑的支持，是各类开源程序的综合利用。...增加伪静态支持，可以通过应用 “伪静态管理” 灵活配置各个页面的伪静态规则； 5.机构和用户管理 优化添加部门管理员的体验； 6.导入导出用户功能优化调整； 7.部分页面移动端适配； 8.增加首次安装引导页...，引导管理员首次能正确配置系统； 9.开放讨论板应用（可在应用市场内在线安装）； 10.开放任务板应用（可在应用市场内在线安装）； 11.其他功能完善、及 beta 版反馈问题的修复； DzzOffice

    4.8K12

    x390拆机图解_Thinkpadx390详细拆机图解

    广告：指为了某种特定的需要，通过一定形式的媒体，公开且广泛地向公众传递信息的宣传手段；本白皮书中的广告泛指所有在落地页中出现的面向用户的传播行为。需要注意的是，对网站自有产品的推广也视作广告。...APP引导：引导用户下载安装或激活调起APP的行为，包括大段文字、图片、弹窗浮窗等形式。...百度移动搜索为了降低用户获取内容的成本，要求凡可在H5端观看、操作的内容及功能，均不可引导甚至强制用户下载APP来解决。 一跳页面：从百度搜索结果点击进入落地页时，进行第一次跳转后到达的页面。...多跳页面：从百度搜索结果点击进入落地页后，进行二次或多次跳转所到达的页面。 页面加载速度是影响用户搜索体验的一个重要因素。...从搜索结果页进入站点落地页的一跳以及多跳页面都应有加载动效。

    1.2K10

    React组件设计实践总结03 - 样式的管理

    内联 CSS 不支持复杂的样式配置, 例如伪元素, 伪类, 动画定义, 媒体查询和媒体回退(对象不允许同名属性, 例如display: -webkit-flex; display: flex;) 内联样式通过...… 所以 内联 CSS 适合用于设置动态且比较简单的样式属性 社区上有许多 CSS-in-js 方案是基于内联 CSS 的, 例如 Radium, 它使用 JS 添加事件处理器来模拟伪类, 另外也媒体查询和动画...important; } // 支持媒体查询 @media (max-width: 600px) { background: tomato; // 嵌套规则 &:...JS 带来的动态性 媒体查询帮助方法: // utils/styled.ts const sizes = { giant: 1170, desktop: 992, tablet: 768,...转换为普通 JS 文件, 方便代码分割和异步加载 相比 svg-sprite 和 iconfont 方案更容易管理 svg 可以通过 CSS/JS 配置, 可操作性更强; 相比 iconfont 支持多色

    8.1K20

    Bulma 现代CSS框架入门指南

    你有多种选择：方法1：使用NPM（推荐开发环境）bashnpm install bulma然后在你的Sass文件中导入：scss@import 'bulma/bulma';方法2：使用CDN（快速原型）...响应式辅助类Bulma提供了一系列响应式辅助类，让你的设计在不同设备上表现最佳：```html```这些辅助类让响应式设计变得超级简单，不需要写复杂的媒体查询！...如果你使用Sass，可以这样覆盖默认变量：```scss// 导入自定义变量@import "my-variables";// 导入Bulma@import "bulma/bulma";```在my-variables.scss...中，你可以覆盖Bulma的默认变量：```scss// 修改主色调$primary: #8A4D76;$info: #3B5D80;// 修改字体$family-sans-serif: "Nunito"...实战案例：构建一个产品展示页让我们用Bulma构建一个简单但美观的产品展示页面：```html 一个令人惊叹的产品 解决你所有问题的完美解决方案 产品特性易于使用我们的产品设计直观

    29710

    scss,less,stylus这些css处理器该怎么选择

    Sass与SCSS Sass是预处理器的鼻祖，它诞生于2006年，很多后来的预处理器都从它这里借鉴了大量思想。 到目前为止，它具有两种单独的语法：Sass和SCSS。...是的，Sass和SCSS只是Sass的两种语法，其中SCSS是在Sass第三个版本中引入的，它采用了和之前不一样的语法。 Sass和SCSS之间的主要区别在于，SCSS与CSS一样使用分号和方括号。...尽管现在SCSS已经正式成为Sass CSS预处理程序的主要语法，但是还没有计划弃用原始版本的计划。 Less Less最早出现在2009年。它受Sass的影响，但对后来引入的SCSS格式有影响。...但是，在CSS中，@也可以用于关键帧和媒体查询。在阅读代码时，这可能会引起一些混乱。 Stylus Stylus诞生于2010年。尽管它的用户群明显少于Sass或Less，但仍然值得研究。...总结 虽然我们说了这么多预处理器的好处，但是它也并不是没有缺点，比如css的调试，需要编译，文件过大都是它的缺点。

    1.1K10

    2015-2016前端架构体系技术精简版

    点击查看github高清图 点击查看完整版 一、框架与组件  **bootstrap等UI框架设计与实现 伸缩布局：grid网格布局 基础UI样式：元素reset、按钮、图片、菜单、表单 组件UI样式：按钮组、...字体图标、下拉菜单、输入框组、导航组、面包屑、分页、标签、轮播、弹出框、列表、多媒体、警告 响应式布局：布局、结构、样式、媒体、javascript响应式 第三方插件：插件管理  **jQuery、zepto...二、构建生态  **grunt/gulp开发环境任务编写 文件处理插件：html、scss、js、image、font、其它 优化插件：雪碧图、图片压缩、iconfont构建 发布替换插件 打包、压缩包插件...compass/less/postcss常用语法与使用 常用语法功能 组件化UI设计管理 构建工具实现方案 雪碧图自动合成 iconfont自动接入等等  **media query与常见页面尺寸了解 媒体类型引入和媒体特性引入...device-width适应 retina屏幕适应  **em,rem原理与实现  **code4ui、code4app、初页、maka等 前端dom操作即使刷新前端页面 根据dom操作生成组件config

    3.7K20

    LinkedIn 钓鱼新套路：假“联邦投资基金”专盯高管，Microsoft 账号成重灾区

    近日，印度主流媒体 Times Now 引述网络安全公司 Push Security 的报告，曝光了一种正在 LinkedIn 上快速蔓延的高级钓鱼攻击。...点击后，用户会被引导至一个与微软官方登录界面几乎一模一样的伪造页面。“页面做得太像了，连字体、Logo、错误提示都完全一致。”...一旦用户输入账号密码并完成 MFA（多因素认证），攻击者便通过“中间人代理”实时将凭证提交给真正的 Microsoft 服务器，获取有效的会话 Cookie。...使用 WHOIS 工具查询链接域名注册信息，若为近期注册或隐私保护，则高度可疑。2. 永远不在站外页面输入工作账号微软、谷歌等平台绝不会通过第三方链接索要登录凭证。...建议在浏览器中安装企业级扩展（如 Microsoft Defender for Office），自动拦截仿冒登录页。3.

    22310

    使用Angular8和百度地图api开发《旅游清单》

    我的大陆页面主要展示的你去过的和即将要去的路线，可以进行相关操作。...官方提供的架构图： 我们知道，一个完整的angular应该包括： 模块 Angular 定义了 NgModule，NgModule 为一个组件集声明了编译的上下文环境，它专注于某个应用领域、某个工作流或一组紧密相关的能力...根模块提供了用来启动应用的引导机制。一个应用通常会包含很多功能模块。 组件 每个 Angular 应用都至少有一个组件，也就是根组件，它会把组件树和页面中的 DOM 连接起来。...router-outlet> 复制代码 app-bar,app-footer为我们定义好的页头页尾组件...接下来看看我的大陆页面，其实涉及的难点不是很多，主要是根据hasDone为true或false去显示不同的样式。

    7.1K30

    用 webpack 4.0 撸单页多页脚手架 (jquery, react, vue, typescript)

    在开始正文之前，首先先来看看我们要实现的成果： 支持ES6+JQuery+Less/Scss的单页/多页脚手架 支持ES6+React+Less/Scss+Typescript的单页/多页脚手架 支持ES6...+Vue+Less/Scss+Typescript的单页/多页脚手架 github地址： 基于webpack4.0搭建的脚手架（支持react/vue/typescript/es6+/jquery+less...的单页/多页脚手架 在实现脚手架之前，假设我们已经创建了目录和package.json文件，接下来先安装webpack相关依赖： // 此处建议安装局部依赖，安装全局依赖可能会出现版本问题 npm install...到此，我们基本的一个支持ES6+Less/css+JQuery的单页应用打包工具已经做好了，当然这只是基础，后面的多页应用，vue/react/typescript都是在这个基础上构建的，让我们拭目以待...至此，我们关于开发基于ES6+JQuery+Less/Scss的单页/多页脚手架就告于段落了，下面我们来集成对react/vue/typescript的支持。

    2.7K21
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券