首页
学习
活动
专区
圈层
工具
发布

Vue:移动端 UI 如何做适配?

导语 | 移动端做 UI 适配其实很简单。这里仅指手机端,iPad 及 PC 端需要另做打算。 目录 三类法 三规则 为什么选择 iPhone6 做基准 本文大约 1000 字,阅读 5 分钟。...每种尺寸都要单独做一套 UI 及样式吗,显然不现实。合理的做法是将设备尺寸分为三类,只处理三类尺寸。Android 适配亦是如此。 ?...这是淘宝团队使用的开发模式,大概分为四步: 一,视觉设计阶段,设计师按宽度750px(iPhone 6)做设计稿。设计定稿后在750px的设计稿上做标注,输出标注图。...上下调整三规则: 样式适配规则 在第四步做样式配置时,有三个规则: 文字流式,控件弹性,图片等比缩放。 图示: ? 如果所有尺寸下的图片资源,都使用3倍图,会不会有些浪费带宽?有没有办法改进。...设计师可以产出1倍、2倍、3倍图三种,然后在每种 media 内,根据需要分别做不同的引用。 选谁做基准: 为什么选择 iPhone 6 作为基准?

1.8K20

封装element-ui表格,我是这样做的

❞ 使用过element-ui的表格的同学应该都有这样的体会,做一个简单的表格还比较容易,但如果这个表格包含了顶部的按钮,还有分页,甚至再包含了行编辑,那开发工作量就成倍的增加,特别是在开发管理系统的时候...如果我们直接使用element-ui提供的组件的话,那么开发一个这样的表格就需要使用到以下内容 需要使用表格的插槽功能,开发每一行的按钮 需要通过样式调整顶部按钮,表格,分页条的布局样式 需要监听分页的事件然后去刷新表格数据...name' }, { label: '性别', prop: 'sex', // 格式化表格,与element-ui...default { data() { return { columns: Object.freeze([ { // 可以指定列的宽度,与element-ui...} }, { label: '性别', prop: 'sex', // 格式化表格,与element-ui

1.7K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    手把手带你做UI自动化测试

    界面级自动化测试更多的用于客户端 3) 协议自动化测试用于测试客户端和服务端之间的通信,弥补代码级和界面级的不足 4) 协议级自动化测试更适合于可靠性、安全性、性能等测试 本文将为您介绍基于界面的自动化测试 1、web UI...: ▪ QTP ▪ 按键精灵 ▪ AutoIT 等等 APP: 1、Android: ▪ UIAutomator 谷歌官方提供,只能做原生APP的自动化测试,语言java ▪ Monkey 理论上不算UI...Eclipse跨平台, 可以在Mac上和Windows运行 ▪ 安装Python 下载地址:http://www.python.org/ Python 有 Python 2 和 Python 3 两个版本...或执行"python *.py"运行python脚本了。...Run ​ ​ 好了,大功告成, 如果你看到火狐浏览器自动打开了,并成功登录了监控宝,那么,你已经迈出了UI自动化的第一步了,恭喜!

    5.3K10

    ui自动化Python版本

    将固定不变的信息集中在固定的文件中 conf.py 项目中都应该有一个文件对整体的目录进行管理,我也在这个python项目中设置了此文件。...对整合的searchpage进行测试用例编写 通过上图我们可以看出,通过POM模型思想,我们把: selenium方法 页面元素 页面对象 测试用例 以上四种代码主体进行了拆分,虽然在用例很少的情况下做会增加代码...By from selenium.webdriver.support import expected_conditions as EC from selenium.webdriver.support.ui...pytest.ini pytest项目中的配置文件,可以对pytest执行过程中操作做全局控制。 在项目根目录新建pytest.ini文件。...-c 生成报告前删除上一次生成的报告 -o 指定生成的报告目录 allure open report-path 持续集成: 在jekins上新建一个自由风格项目,然后进入项目配置页面: 1.设置工作做目录

    1.9K240

    Python UI开发用哪个好?

    toutiao_ios&utm_campaign=client_share 开发小型GUI应用程序的话,用Tkinter,wxPython这2个库就行了,如果开发稍微大一点的应用的话,可以考虑PyQt(Qt提供给python...的接口),借助Qt Designer(直接拖拽控件),可以快速的开发出比较整洁、美观的界面,下面我简单介绍一下如何使用Qt Designer这个设计工具,以及将它设计的界面打包成我们需要的python代码...,以供后面程序使用,实验环境win10+python3.6+pycharm5.0,主要内容如下: 1.安装Qt Designer设计工具,这里需要下载PyQt5Designer这个包,地址http://...3.上面2个包安装完成后,我们就可以进行测试了,首先使用Qt Designer设计UI界面,直接双击designer.exe就行(默认地址在python的安装目录下面的\Lib\site-packages...Window,如下,也可以选择其他类型的: 接下里就可以直接拖拽控件,快速布局界面,如下: 设计完成后,点击“文件”->“保存”,随命名一个文件名称,如下: 4.界面设计完成后,我们就可以将上面设计的ui

    12.7K10

    做 UI 自动化一定要跨过这些坑

    其实在笔者看来,UI自动化是一个ROI较低的测试项(ROI即return on investment,中文意思是投资回报率)。但UI自动化相比接口自动化、白盒测试等,它更贴近手工业务测试行为。...笔者接触UI自动化一年多,兼顾业务测试的同时断断续续地投入,曾经无数次的想放弃: “才刚写完用例,怎么开发大哥又改了UI了?” “维护这些破用例的时间,都够我手工测三遍了,真的有意义么?”...图一 UI自动化常见问题 填掉这三类坑,基本上就获得了一套低成本高产出、少量维护、稳定可靠的UI自动化用例集。 三、 设计类问题分析与解决 “才刚写完用例,怎么开发大哥又改了UI了?”...笔者是如何做的?分层设计和PageObjects模式。这两个方法,基本解决了笔者遇到的图一中所有的设计类问题。 图三 框架设计建议 按照图三进行分层设计后,得到如图四的测试代码包。...所以笔者认为,使用更原生的uiautomator会是更好的选择;同时,测试过程中的日志、截图等,也尽量在测试手机上做持久化。 2 弹框问题的解决 权限弹框,是手管UI自动化中的一个大坑。

    4.8K11

    做UI自动化一定要跨过这些坑

    笔者接触UI自动化一年多,兼顾业务测试的同时断断续续地投入,曾经无数次的想放弃: “才刚写完用例,怎么开发大哥又改了UI了?”...图一UI自动化常见问题 填掉这三类坑,基本上就获得了一套低成本高产出、少量维护、稳定可靠的UI自动化用例集。 三、设计类问题分析与解决 “才刚写完用例,怎么开发大哥又改了UI了?”...笔者是如何做的呢? 分层设计和PageObjects模式。这两个方法,基本解决了笔者遇到的图一中所有的设计类问题。 ? 图三 框架设计建议 按照图三进行分层设计后,得到如图四的测试代码包。...所以笔者认为,使用更原生的uiautomator会是更好的选择;同时,测试过程中的日志、截图等,也尽量在测试手机上做持久化。 2、弹框问题的解决 权限弹框,是手管UI自动化中的一个大坑。...七、最后 不知您是否也曾在UI自动化过程中遇到过难以解决的问题呢? 欢迎大家留言讨论。 也祝愿大家在UI自动化的道路上越走越顺!

    1.3K91

    自动化测试到底是先做UI还是接口测试?

    今天跟大家介绍UI测试、接口测试、单元测试主要内容,以及每种测试花费时间的讨论; 01 测试类型 UI测试【Selenium】 UI测试是最接近软件真实用户使用行为的测试类型。...02 测试的优缺点 1、UI自动化测试 大家所在公司都属于互联网公司,最大的特点就是快——产品需要不停的迭代,迭代时间基本在15天左右。...另外,UI自动化测试的稳定性问题,是长期以来阻碍GUI测试发展的重要原因。 在快速迭代的情况下,页面的改动可能会很频繁,而UI自动化测试本身基于页面元素,前端小小的改动可能需要测试的大大改。...实用性 UI自动化测试验证的主要是页面显示,而接口测试验证的主要是数据。...在当前开发水平下,功能测试基本可以完全验证页面显示的问题,所以UI测试有点类似于“这些没问题了,为了保证一直没问题,所以要写UI自动化,每天去执行”。

    2.5K20

    UI一直做下去比较理想的结果是什么?

    首先想说的是,在美国UI Designer这个职位已经越来越少见了,取而代之的是Interaction Designer(交互设计师)、UX Designer(用户体验设计师)、Product Designer...这三个职称实际应用上没有太大区别,而且不同公司的用法也不大一样,但是总的来讲美国设计界走过了一个从只注重视觉(UI)到更加注重完整的产品体验(UX)的过程。...(在很多有些历史的公司,比如鄙厂,设计师在系统里的正式职称仍然是UI Designer,但是实际工作中已经没有人这么说了。)...在这样的环境下,只是听产品经理的话做界面效果图的纯UI设计师已经完全是过时的概念了。在鄙厂以及大部分我所知道的硅谷科技公司,UX-PM-工程师是平起平坐的、支撑一个产品的三大梁。...个人贡献者 (individual contributor) 指的是你没有下属,在这个领域特指一直做技术(或者说做设计)。如果你不想做管理,作为一个个人贡献者的设计师也可以走得很远。

    1.3K70

    做中国人自己的视频编辑UI框架,WebCut正式开源

    没有合适的视频编辑UI框架 过去半年,我连续发布了多款与视频相关的产品,这些产品或多或少都需要用户参与视频编辑操作,比如给视频添加字幕、对视频进行裁剪、给视频配音等等,这些在视频编辑器中常见的视频处理工具...然而回望开源市场,能够支持这种编辑能力的项目少之又少,虽然有一些项目呈现了视频编辑的能力,然而,要么项目太大,一个完整的视频编辑器甩在开发者脸上,要么过于底层,没有UI界面。...上面是我用AI做的一张示意图,大概就是这个意思,把一个编辑器拆的细碎,然后要什么功能就把对应的组件拿来拼凑一下。比如要对视频进行静音裁剪,就只要把预览区和轨道区拿出来,然后自己再增加一些能力上去。...而规范性则是强制性规则比较多,只能暴露少量接口,避免开发者破坏这种规范,例如很多前端UI组件库就是这样。这两者之间的矛盾,是每一个库或框架开发者最难平衡的。...同时,为了方便开发者在某些情况下快捷接入,我会设计一些自己看到的不错的编辑器UI,然后用上诉的工具把它们搭出来,这样,开发者如果在产品需求中发现仓库里已经有功能一致的组件,就不需要自己去组合,直接使用对应组件即可

    20710

    Python做机器学习之路

    导语:Python 可以说是现在最流行的机器学习语言,而且你也能在网上找到大量的资源。你现在也在考虑从 Python 入门机器学习吗?...基础篇 第一步:基本 Python 技能 如果我们打算利用 Python 来执行机器学习,那么对 Python 有一些基本的了解就是至关重要的。...第四步:使用 Python 学习机器学习 首先检查一下准备情况 Python:就绪 机器学习基本材料:就绪 Numpy:就绪 Pandas:就绪 Matplotlib:就绪 现在是时候使用 Python...我保证这样做是值得的。快速回顾之后,本篇文章会更明确地集中于几个机器学习相关的任务集上。...Python 基础技能 2. 机器学习基础技能 3. Python 包概述 4. 运用 Python 开始机器学习:介绍&模型评估 5.

    2.5K70
    领券