首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何打造一个高效适配的H5

以往拿到一份视觉稿要做页面适配,通常都是针对不同分辨率尺寸做断点写 media query,然后看效果再微调。开发过程中视觉稿要是做了修改,修改的地方就得再走一遍分辨率测试和微调,这时想屎的心都有了。...1、contain 模式:以内容中心为基点按照视觉稿的宽高比缩放以适配窗口显示全页面内容,窗口与内容的宽度比或高度比之间较小者缩放填满窗口,当窗口宽高比和视觉稿不同时,另一方向的两侧出现留空部分。...3、fill 模式:以内容中心为基点页面拉伸填充满整个窗口以适配窗口,当窗口宽高比和视觉稿不同时,内容一定程度上被拉伸 ?...在做适配之前,首先要和设计师定义好页面的宽高比,即设计稿的分辨率大小,因为活动主要是通过微信进行传播推广,所以这里我使用的是 iphone5/5s 机型微信浏览窗口分辨率 640*1008。...同样尺寸比的 Android 平台分辨率 720*1280 和 1080*1920 占比数也是最多的。

1.3K50

Android底部弹窗的实现示例代码

注:这里使用的是填充窗口的方式,如果不这样做的话,就不能看出遮住后面的效果,看下图更容易理解,左图为填充父布局的方式,右图为 自适应的方式 ?...注:因为采用填充父布局的方式,这里弹出窗口都是PopupWindow,所以点击左图中的阴影弹窗不会消失,因为阴影也是PopupWindow呀!...LinearLayout.LayoutParams.MATCH_PARENT); popupWindow.setBackgroundDrawable(new BitmapDrawable()); //点击外部消失,这里因为PopupWindow填充了整个窗口...Gravity.BOTTOM, 0, 0); } 重点看一下这句代码 popupWindow.showAtLocation(rootview, Gravity.BOTTOM, 0, 0); 这句代码是设置弹出窗口从哪里弹出...解决PopupWindow弹出窗口不能覆盖状态栏问题 想要覆盖到状态栏还需要添以下代码 //弹出窗口是否覆盖状态栏 public void fitPopupWindowOverStatusBar(

4.3K31
您找到你想要的搜索结果了吗?
是的
没有找到

android studio 的下拉菜单Spinner使用详解

不过Android的列表选择框并不需要显示下拉列表,而是相当于弹出一个菜单供用户选择。...,有两个可选: dialog:对话框风格的窗口 dropdown:下拉菜单风格的窗口(默认) 可选属性:android:entries:使用数组资源设置下拉列表框的列表项目 如果开发者使用Spinner...新建SpinnerActivity.java文件,加载上面新建的布局文件,具体代码如下: ? ? 上面的程序比较简单,主要为Spinner 设置了选中设置监听。...点击第一个Spinner ,弹出选择对话框, 如下图所示。选择其中一项回到主界面,发现Spinner 的会改变为所选择的内容。 ? 同理点击第二个Spinner ,打开下拉列表选项框,如下图所示。...它们之间的区别在于,Spinner显示的是一个垂直的列表选择框,而Gallery显示的是一个水平的列表选择框。

5.8K21

IntelliJ IDEA 2023.1 最新变化

编辑 1. 指定粘贴内容的位置的选项 在 v2023.1 中,我们微调了粘贴复制或剪切时未选择内容的行时的用户体验。 新增了一个允许您控制粘贴内容位置的特殊设置。...Markdown 文件的 Fill Paragraph(填充段落) Markdown 文件现在支持 Fill Paragraph(填充段落)编辑操作,您可以将长文本分成几个长度相等的行。...改进了 Branches(分支)弹出窗口 我们改进了 Branches(分支)弹出窗口的实用性。 例如,分支被分组并存储在可扩展列表中,导航更加轻松。 4....Create New Branch(创建新分支)弹出窗口中的自动补全 IntelliJ IDEA 2023.1 在 Create New Branch(创建新分支)弹出窗口中提供了自动补全。...选择 New Kubernetes Resource(新建 Kubernetes 资源)选项后,显示弹出窗口将列出最流行的资源类型,例如 Pod、Deployment、ConfigMap 等。

15310

如何打造一个高效适配的H5

以往拿到一份视觉稿要做页面适配,通常都是针对不同分辨率尺寸做断点写 media query,然后看效果再微调。开发过程中视觉稿要是做了修改,修改的地方就得再走一遍分辨率测试和微调,这时想屎的心都有了。...1、contain 模式:以内容中心为基点按照视觉稿的宽高比缩放以适配窗口显示全页面内容,窗口与内容的宽度比或高度比之间较小者缩放填满窗口,当窗口宽高比和视觉稿不同时,另一方向的两侧出现留空部分。...3、fill 模式:以内容中心为基点页面拉伸填充满整个窗口以适配窗口,当窗口宽高比和视觉稿不同时,内容一定程度上被拉伸。 ?...在做适配之前,首先要和设计师定义好页面的宽高比,即设计稿的分辨率大小,因为活动主要是通过微信进行传播推广,所以这里我使用的是 iphone5/5s 机型微信浏览窗口分辨率 640*1008。...同样尺寸比的 Android 平台分辨率 720*1280 和 1080*1920 占比数也是最多的。

98040

史上最全webview详解

打开网页时不调用系统浏览, 而是在本WebView中显示: mWebView.setWebViewClient(new WebViewClient(){ @Override...clearHistory () //清除当前webview访问的历史记录,只会webview访问历史记录里的所有记录除了当前访问记录. clearFormData () //这个api仅仅清除自动完成填充的表单数据...clearHistory () //清除当前webview访问的历史记录,只会webview访问历史记录里的所有记录除了当前访问记录. clearFormData () //这个api仅仅清除自动完成填充的表单数据...打开网页时不调用系统浏览, 而是在本WebView中显示: mWebView.setWebViewClient(new WebViewClient(){ @Override...clearHistory () //清除当前webview访问的历史记录,只会webview访问历史记录里的所有记录除了当前访问记录. clearFormData () //这个api仅仅清除自动完成填充的表单数据

6.5K90

安卓Chrome使用技巧合辑

想快速复制当前页面的网址,你只需要点击Chrome菜单中上方的"信息"图标(位于刷新按钮左边),在弹出的网页信息窗口中长按网址区域即可快速将当前页面的网址复制到剪贴板。   9....三.实验室特性:   在这里小苏只列出一些实用且安全的"功能性特性",考虑到数据安全和设备差异,一些可能引起浏览不稳定的实验性特性小苏暂未列出,大家可以在:   chrome://flags...  中自行体验,值得说明的是,一些实验性特性可能导致浏览不稳定,所以在更改实验室特性之前## 请仔细阅读实验室特性页面上方的警告并提前备份好数据## 。...后默认为开启。...,将在屏幕底部显示一个快速填充底栏,点击底栏中的快速填充项可以快速将此项填充到输入框。

9.5K30

办公技巧:分享12个实用的word小技巧,欢迎收藏!

1、 Word表格自动填充序号 在Word表格里选中要填入相同内容的单元格,单击“格式→项目符号和编号”,进入“编号”选项卡,选择任意一种样式,单击“自定义”按钮,在“自定义编号列表”窗口中“编号格式”...栏内输入要填充的内容,在“编号样式”栏内选择“无”,依次单击“确定”退出后即可。...9、打造整齐的Word公式 使用Word公式编辑创建公式后,你如果感到其中的公式不整齐(特别是矩阵形式的公式),那么你可以通过下列方式进行微调:单击该公式,右键进入“设置对象格式”,选择“版式”中任意一种形式...11、去除默认的输入法 打开选项窗口,点击其中的“编辑”选项卡,去除最下面的“输入法控制处于活动状态”的对号,点击确定。重新启动Word后,就会发现微软拼音不会一起启动了。...在“搜索”栏选择“翻译”,再在“翻译”栏选择“将”哪国语言“翻译为”哪国语言,结果马上就会显示出来。要快速翻译下一个词,可以按住Alt键不放,然后点选生词。

3K10

Android富文本开发

" (效果:软键盘不弹出,光标不显示,其他输入框也不获取焦点,ps非直接父布局没有效果) android:windowSoftInputMode="stateAlwaysHidden" (效果:软键盘不弹出...,光标显示在第一个输入框中) 需求2:editText不获取焦点,当然软键盘不会主动弹出(光标也不显示) 在第一个输入框的最直接父布局加入:android:focusable="true";android...android定义了一个属性,名字为windowSoftInputMode, 这个属性用于设置Activity主窗口与软键盘的交互模式,用于避免软键盘遮挡内容的问题。...json数据提交给服务; 19.2 编辑富文本 服务返回html给客户端加载 涉及到富文本的加载,后台管理端编辑生成的一段html 代码要渲染到移动端上面,一种方法是前端做成html页面,放到服务上...ok,需要服务把之前传递给它的json返回给客户端,然后解析填充到富文本中。

8.4K20

JavaScript中window.open()和Window Location href的区别「建议收藏」

如果没有指定URL,打开一个新的空白窗口 name 可选。指定target属性或窗口的名称。支持以下: _blank – URL加载到一个新的窗口。...|no|1|0 是否显示浏览工具栏.默认是yes top=pixels 窗口顶部的位置.仅限IE浏览 width=pixels 窗口的宽度.最小.为100 channelmode=yes...|no|1|0 是否显示浏览工具栏.默认是yes top=pixels 窗口顶部的位置.仅限IE浏览 width=pixels 窗口的宽度.最小.为100 replace Optional.Specifies...这一段代码可以加入HTML的任意位置,和之间可以,间也可以,越越早执行,尤其是页面代码长,又想使页面早点弹出就尽量往前放。...;   ’page.html’ 弹出窗口的文件名;   ’newwindow’ 弹出窗口的名字(不是文件名),非必须,可用”代替;   height=100 窗口高度;   width

4.2K20

Android Studio preview 不固定及常见问题的解决办法

阵子用 AndroidStudio,不知道点错了什么按钮,preview 视图窗口不是固定在一侧。只要点击 xml 界面,就隐藏了 preview 窗口,根本开发不了。...办法如下: 点击preview,显示视图窗口; 点击菜单栏的window; 选中Active Tool Window; 选中Docked Mode; ?...操作 这里是最常见的关于Preview的问题列表和解决方案(图片请右键用新标签放大查看): 问题1:Preview看起来为 假设你有一个布局,其内容将从后端获得的数据填充…你很快意识到,由于内容是动态的...当创建使用任何后端数据相关视图的布局时,一个好的做法是仅在预览时填充它。通过使用tools命名空间而不是android来声明xml属性,这将允许您指定只在预览时使用的属性。...这将模拟在Android设备上的工作原理,你应该假设你不能访问任何数量的不在View框架内的依赖。使用例如Glide的图像加载将是不可能的。

3.6K30

JavaScript中window.open()和Window Location href的区别

如果没有指定URL,打开一个新的空白窗口 name 可选。指定target属性或窗口的名称。支持以下: _blank - URL加载到一个新的窗口。...最小.为100 left=pixels 该窗口的左侧位置 location=yes|no|1|0 是否显示地址字段.默认是yes menubar=yes|no|1|0 是否显示菜单栏...=yes|no|1|0 是否显示浏览工具栏.默认是yes top=pixels 窗口顶部的位置.仅限IE浏览 width=pixels 窗口的宽度.最小.为100 replace...;   'page.html' 弹出窗口的文件名;   'newwindow' 弹出窗口的名字(不是文件名),非必须,可用''代替;   height=100 窗口高度;   width=400...窗口宽度;   top=0 窗口距离屏幕上方的象素;   left=0 窗口距离屏幕左侧的象素;   toolbar=no 是否显示工具栏,yes为显示;   menubar,scrollbars

2.1K51

Excel 常用的九十九个技巧 Office 自学教程快速掌握办公技巧

Microsoft Excel 是微软为 Windows、macOS、Android 和 iOS 开发的电子表格软件,可以用来制作电子表格、完成许多复杂的数据运算,进行数据的分析和预测,并且具有强大的制作图表的功能...16、查找重复选取查找数据的区域,依次点击【开始】-【条件格式】-【突出显示单元格规则】-【重复】设置选择重复格式为【浅红填充色深红色文本】。...25、快速删除空行当表格区域内需要删除空行时,可直接选中表格内某列,按组合键【Ctrl+G】导出定位对话框,定位条件勾选【】后点击【确定】再删除整行即可。...67、固定长度编号录入选中编号单元格区域,按【Ctrl+1】打【设置单元格格式】窗口,选择【自定义】;,在类型文本框内输入【00000】,点击【确定】,编号在用 0 补齐了。...72、快速对比两列数据选中两列数据→【Ctrl+\】→【开始】→【填充色】填充一个颜色突出显示差异数据

7K21

下拉框Spinner就这么简单

不过Android的列表选择框并不需要显示下拉列表,而是相当于弹出一个菜单供用户选择。...: dialog:对话框风格的窗口 dropdown:下拉菜单风格的窗口 如果开发者使用Spinner时己经可以确定列表选择框里的列表项,则完全不需要编写代码,只要为Spinner指定android...新建SpinnerActivity.java文件,加载上面新建的布局文件,具体代码如下: package com.jinyu.cqkxzsxy.android.listviewsample; import...点击第一个Spinner ,弹出选择对话框,如下图所示。选择其中一项回到主界面,发现Spinner 的会改变为所选择的内容。 ?...它们之间的区别在于,Spinner显示的是一个垂直的列表选择框,而Gallery显示的是一个水平的列表选择框。

2.1K60

jQuery基础(五)一Ajax应用与常用插件-imooc

方式从服务获取数据  1-5 使用post()方法以POST方式从服务发送数据  1-6 使用serialize()方法序列化表单元素  1-7 使用ajax()方法加载服务数据  1-8 使用...参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数 例如,点击“加载”按钮时,向服务请求加载一个指定页面的内容,加载成功后,将数据内容显示在元素中,并将加载按钮变为不可用...在浏览显示的效果: 使用getJSON()方法异步加载JSON格式数据 使用getJSON()方法可以通过Ajax异步请求的方式,获取服务中的数据,并对获取的数据进行解析,显示在页面中,它的调用格式为...例如,当点击“提交”按钮时,如果文本框中的内容为,则通过dialog插件弹出提示框,提示输入内容不能为,如下图所示: 在浏览显示的效果: 3-7菜单工具插件——menu 菜单工具插件可以通过...3-8微调按钮插件——spinner 微调按钮插件不仅能在文本框中直接输入数值,还可以通过点击输入框右侧的上下按钮修改输入框的,还支持键盘的上下方向键改变输入,调用格式如下: $(selector)

16.5K20

Android窗口管理分析(3):窗口分组及Z-order的确定总结

Android系统中,窗口是有分组概念的,例如,Activity中弹出的所有PopupWindow会随着Activity的隐藏而隐藏,可以说这些都附属于Actvity的子窗口分组,对于Dialog也同样如此...=1004 媒体信息,显示在媒体层和程序窗口之间,需要实现半透明效果 LAST_SUB_WINDOW=1999 结束子窗口 最后看几个系统窗口类型, 窗口TYPE 窗口类型 FIRST_SYSTEM_WINDOW...+ mLayer 来标志窗口所处的位置,两个主要是根据窗口类型确定窗口位置,mLayer才是真正的,定义如下: final class WindowState implements WindowManagerPolicy.WindowState...,对两者来说越大,窗口越靠前,从此final属性知道,两者的是不能修改的,而mLayer可以修改,对于系统窗口,一般不会同时显示两个,因此,可以用主序决定,比较特殊的就是Activity与子窗口,首先子窗口的主序肯定是父窗口决定的...,因此mBaseLayer与mSubLayer所能选择的只有固定几个,很明显这两个参数不能精确的确定Z-order,还会有其他微调的手段,也仅限微调,在系统层面,决定了不同类型窗口所处的位置,比如系统

2.5K50

Android 8.0 “奥利奥”正式发布

播放 VLC 也抢在正式版发布就适配了画中画模式,升级 Android 8.0 正式版以后别忘了试一试。...浏览就会出现在弹出的浮动工具条中,方便我们快速跳转至该 URL 所指向的网页。...更丰富的色彩管理功能:应用开发者只需为应用嵌入广色域配置文件,即可在支持广色域色彩显示的新设备上开启广色域显示模式。 多显示支持:Android 8.0 将提供更好的原生多显示支持。...如果某个应用或活动(Activity) 支持多窗口模式,并且可以在具有多个显示的设备上运行(例如 Samsung DeX),那么用户可以在两个显示设备间自由操作和移动窗口内容。...可声明应用类别:开发者还可以为面向 Android 8.0 所开发的应用声明应用类别,方便用户和其他第三方应用(例如启动)根据类别进行分类显示。 还一些新的表情: ?

1.4K40

Android O 新特性和行为变更总结

Android O 新特性 前段时间解决了几个 QQ 音乐多窗口屏幕显示的 bug,虽然这个问题最终不是 Android O 版本的问题,多窗口Android 7.1 之后引入的(关于多窗口适配需要注意的地方...,这个小窗口在播放视频,而此时点击这个小窗口区域会弹出几个操作按钮,可以选择关闭,或者是重新打开 youtube 视频播放页,而且底部的几个按钮也是可以自定义的,非常方便。...1.4 自动填充框架 Android O 还引入了自动填充框架,简化了用户在账号创建、登录和信用卡表单之类的填写工作,在用户选择自动填充框架之后,新老用户都可以使用自动填充框架,我们使用 Chrome...窗口类型显示应用的提醒窗口时,也增加了一下限制: 应用的提醒窗口始终显示在状态栏和输入法等关键系统窗口的下面; 系统可以移动使用 TYPE_APPLICATION_OVERLAY 窗口类型的窗口或调整其大小...,以改善屏幕显示效果; 通过打开通知栏,用户可以访问设置来阻止应用显示使用 TYPE_APPLICATION_OVERLAY 窗口类型显示的提醒窗口

3K20

Android O 新特性和行为变更总结

Android O 新特性 前段时间解决了几个 QQ 音乐多窗口屏幕显示的 bug,虽然这个问题最终不是 Android O 版本的问题,多窗口Android 7.1 之后引入的,但是趁此机会了解一下...: 我们可以看到在当从 youtube 视频切换出去之后会回到桌面,这时候会有一个视频播放的窗口悬浮在所有的应用之上,这个小窗口在播放视频,而此时点击这个小窗口区域会弹出几个操作按钮,可以选择关闭,...1.4 自动填充框架 Android O 还引入了自动填充框架,简化了用户在账号创建、登录和信用卡表单之类的填写工作,在用户选择自动填充框架之后,新老用户都可以使用自动填充框架,我们使用 Chrome...窗口类型显示应用的提醒窗口时,也增加了一下限制: 应用的提醒窗口始终显示在状态栏和输入法等关键系统窗口的下面; 系统可以移动使用 TYPE_APPLICATION_OVERLAY 窗口类型的窗口或调整其大小...,以改善屏幕显示效果; 通过打开通知栏,用户可以访问设置来阻止应用显示使用 TYPE_APPLICATION_OVERLAY 窗口类型显示的提醒窗口

1.2K30
领券