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

移动webapp前端开发小结

:721px) { /*窗口宽度大于等于721px时,应用这些样式*/ } 方法二、满足查询条件的设备匹配不同的样式表 在head标签内,添加类似这样的代码 <link rel="stylesheet...虽然以前就听说过单位em<em>与</em>px的不同,之前在修改wordpress官方主题时,<em>也</em>奇怪为啥国外的代码会常用到em呢?这次尝试算是真正体会了em的妙处。...webkit-box-flex:2; } .box2 { -webkit-box-flex:1; } .box3 { -webkit-box-flex:1; } <em>将</em><em>父</em>元素<em>设置</em><em>为</em>弹性盒子布局...如下,<em>将</em><em>父</em>元素<em>宽度</em>分为4份,分别占2份、1份、1份。...,这样box1还是正常显示,box2则<em>为</em>水平排列,且<em>宽度</em><em>为</em><em>父</em>元素的值-box1的<em>宽度</em>*/ } 3、背景渐变 background-image: -webkit-linear-gradient(top,#

1.3K20

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

利用PopWindow实现底部弹窗 因为本文主要是介绍实现底部弹窗的方式,所以,不会对PopupWindow进行具体的讲解,大家可以到这里了解PopupWindow。...注:因为采用填充布局的方式,这里弹出的窗口都是PopupWindow,所以点击左图中的阴影弹窗不会消失,因为阴影也是PopupWindow呀!..., void showAtLocation (View parent,int gravity,int x,int y) 方法有四个参数,第一个参数是布局,第二个从父布局的哪里弹出,x和y是相对于布局弹出位置的偏移量...由于,我们要将mPopWindow放在整个屏幕的最低部,所以我们R.layout.activity_main做为它的容器,将其显示在BOTTOM的位置。...再仔细看下上图,利用PopupWindow实现从底部的弹窗并不能覆盖到状态,下面就来解决这个问题。

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

前端面试(1)H5+css

css 两布局、三布局 两布局,已知左侧宽度,右边自适应 1> 双 inline-block 左右盒子均设置 display:inline-block; 左盒子设置固定高,右盒子使用 calc...BFC,左盒子设置右外边距,右盒子设置左外边距(不设置可),右盒子不需要设置 width; 三布局,已知左右侧宽度,中间自适应 1.使用定位 三个盒子外侧设置大盒子,大盒子使用相对定位,下面一层三个盒子均采用绝对定位...不同点: 双飞翼布局给主面板添加了一个标签用来通过 margin 给子面板腾出空间。 圣杯采用的是 padding,而双飞翼采用的 margin,解决了圣杯布局的问题。...结构伪类选择器: 选择符号 含义 相同点 E:first-child 匹配元素的第一个子元素 E 带有 child,以 E 元素的元素参考 E:last-child 匹配元素的最后一个子元素...使外部应用可以直接浏览器内部的数据直接相连, 6.连接特性,更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。

1.3K20

iPhone X 适配指南 (官方翻译版)

屏幕尺寸 在纵向方向上,iPhone X上的显示屏的宽度iPhone 6,iPhone 7和iPhone 8的4.7 寸显示屏的宽度匹配。...请注意,当背景任务(如录音和位置跟踪)处于活动状态时,iPhone X上的状态不会改变高度。 如果您的应用程序目前隐藏状态,请重新考虑iPhone X上的决定。...iPhone上的显示高度4.7 寸iPhone的显示屏提供了更多的内容垂直空间,状态占据您应用程序可能赢得的屏幕区域状态还显示人们发现有用的信息,只能隐藏以交换附加值。...避免交互式控件明确放置在屏幕底部和角落。人们使用显示屏底部的滑动手势访问主屏幕和应用程序切换器,这些手势可能会取消您在此区域中实现的自定义手势。屏幕的两个角落可能是困难的地方让人们舒适地到达。...在iPhone X上,即使使用自定义键盘,Emoji / Globe按钮和Dictation按钮自动显示在键盘的下方。您的应用程序不能影响这些按钮,因此避免在键盘中重复这些按钮造成混乱。

2.4K50

探索 Android Design Support Library v28 新增内容

其本质上一些文字被赋予一个圆形背景 -- 这样做的目的是向用户显示某种形式的文本集合, 可能被选择可能不被选择. 例如, Chip 可用于根据应用程序中的当前上下文向用户显示可选建议的列表. ?..., 如果要展示边框的话, 此属性必须设置 app:strokeWidth: 要应用于视图边框的宽度 ?...Bottom App Bar 底部应用是一个新的组件, 它允许我们在布局的底部显示一个类似工具的组件. 这使我们能够以比标准工具更容易交互的方式向用户显示组件. ?...如果附加了 FAB, 它将插入底部应用, 否则 FAB 保持在底部应用上方. ? app:fabAlignmentMode: 声明已附加到底部应用的FAB的位置....我很高兴能够找到一个可以使用底部应用的用例, 但我确信在 Support Library 版本稳定之前还有一段时间才能实现. 按照惯例, 我很乐意听到您对这些新组件的想法或评论!

1.8K20

AndroidMainifest标签说明2——<activity>

android:excludeFromRecents 默认true 任务发起这个Activity是否应该被排除在近期使用的应用程序的列表。...“true”意味着activity不会离开历史的痕迹。 它不会留在任务的活动堆栈,因此用户无法返回。 android:parentActivityName 逻辑类的名字。...系统读取这个属性,以确定哪些活动时应開始使用按下button在操作。该系统还能够使用此信息来综合TaskStackBuilder回堆栈的活动。...“splitActionBarWhenNarrow”加入栏位于屏幕的底部。在动作条显示操作项,当约束的水平空间。而不是少数出如今屏幕上方操作中的行动项目。操作被分成顶部导航部分和操作项的底部。...这保证了空间的合理量可供不仅为行动项目,同一时候在顶部导航和标题元素。 菜单项不会在两个分裂;他们总是一起出现。 android:windowSoftInputMode 窗体软键盘模式。

1.5K00

Flutter学习

Container:view,高、背景色、圆角、margin Padding:EdgeInsets.fromLTRB Center:居中 TextField:输入框(TextEditingController...Scaffold提供了大多数应用程序都应该具备的功能,例如顶部的appBar,底部的bottomNavigationBar,隐藏的侧边drawer等。...还有这么一种场景可以使用SizeBox,就是可以代替padding和container,然后 用来设置两个控件之间的间距,比如在行或列中就可以设置两个控件之间的间距 主要是可以比使用一个padding...在Flutter中,导航器管理应用程序的路由栈。路由推入(push)到导航器的栈中,将会显示更新该路由页面。 从导航器的栈中弹出(pop)路由,显示返回到前一个路由。...MethodChannel原生交互 Flutter 集成到现有应用 Flutter Android 的相互通信 File > New > New Module > flutter 新建到自己项目目录下

2.6K20

移动端兼容的flexbox速成班

”其实包含“元素”,“子元素”2个部分,元素”定义一个flexbox,则在”元素”里的“子元素们”就被赋予了可以自由伸缩的能力。...子元素的宽度不会根据内容的长短而发生改变。如下图所示,前台同学增加或删减tab数量,只需要增减DOM结构即可,无需样式的修改。...沿着主轴对齐方式+沿着侧轴对齐的方式”设置居中,无论子元素是什么形态,都可以随时随地的“水平垂直居中”了。...【Demo Link】:https://jsfiddle.net/tikizzz/zq8cdkfg/ 7.用flex做垂直弹性布局 顶部底部fixed,中间的元素支持滚动条,这是移动端常见的页面结构模型...另,附赠 > 已测机型 备注: 1.以上机型是根据友盟,应用宝,微信及腾讯云运营活动数据统计整合得出的Top7机型。

1.7K90

移动端兼容的flexbox速成班 - 腾讯ISUX

”其实包含“元素”,“子元素”2个部分,元素”定义一个flexbox,则在”元素”里的“子元素们”就被赋予了可以自由伸缩的能力。...一句属性设置,就可以完成顶部对齐,居中对齐或是底部对齐的切换,简单方便值得拥有。...子元素的宽度不会根据内容的长短而发生改变。如下图所示,前台同学增加或删减tab数量,只需要增减DOM结构即可,无需样式的修改。 ?...【Demo Link】 https://jsfiddle.net/tikizzz/zq8cdkfg/ 7.用flex做垂直弹性布局 顶部底部fixed,中间的元素支持滚动条,这是移动端常见的页面结构模型...另,附赠  > 已测机型 ? 备注: 1.以上机型是根据友盟,应用宝,微信及腾讯云运营活动数据统计整合得出的Top7机型。

1.2K30

Flutter常用的布局和事件示例详解

10), child: Text( model.title, style: TextStyle( fontSize: 14, color: Colors.white, ), ), ) 设置宽度...,//设置1 则宽度撑满布局 this.heightFactor,//设置1 则高度撑满布局 Widget child,//包裹的子Widget }) Expanded撑满整个界面 Expanded...({ Key key, int flex = 1, @required Widget child, }) Stack 可以理解栈布局,先放入的显示在最下面,后放入的显示在上面,跟Android...this.alignment: AlignmentDirectional.topStart,//对齐方式 this.textDirection, this.fit: StackFit.loose,//是否按照高处理自己大小...PageView 类似Android中的ViewPage组件,他还可以实现底部导航的效果 Flutter官网PageView 首先看一下PageView有哪些属性,代码如下: PageView({

2.2K40

实践 | Google IO 应用是如何适配大尺寸屏幕 UI 的?

同时,由于有了额外的横向空间,导航元素从底部移至侧边显得更加自然。...资源限定符的局限 搜索应用在不同屏幕内容下显示不同内容。...△ 平板横屏时的搜索应用 (窄模式) △ 平板竖屏时的搜索应用 (模式) 此前,我们通过在搜索 Fragment 的视图层次中的应用部分使用 标签,并提供两种不同版本的布局来实现此功能...如今此方法行不通了,因为在那种情况下,带有这些限定符的布局或是其他资源文件都会被按照整屏幕宽度解析,但事实上我们只关心那个特定窗格的宽度。 要实现这一特性,请参阅搜索 布局 的应用部分代码。... RecyclerView 自身的内边距设置相同的值,会使得元素同 RecyclerView 边界的距离元素间的空隙保持相同的大小,在元素周围形成统一的留白。

2K20

【CSS】1287- 一行 CSS 实现 10 种强大的布局

我们在这里做的是最小侧边大小设置 150px ,但在更大的屏幕上,让它伸展出 25% 。侧边始终占据其父级水平空间的 25%,直到 25% 变得小于 150px 。...通常称为粘性页脚,这种布局通常用于网站和应用程序,跨多个移动应用程序(页脚通常是工具)和网站(单页应用程序通常使用这种全局布局)。...要使页脚粘在底部,请添加: .parent { display: grid; grid-template-rows: auto 1fr auto; } 1fr页眉和页脚内容设置自动采用其子项的大小...字符宽度单位基于元素的字体大小(特别是 0 字形的宽度)。“实际”尺寸 50%,代表此元素宽度的 50%。...您可以看到,当我拉伸和收缩尺寸时,这张卡片的宽度会增加到其最大限制点并减小到其限制最小点。然后它保持在级的中心,因为我们已经应用了其他的属性来将它居中。

4.5K20

Carson带你学Android:最全面、最易懂的屏幕适配解决方案

(其最小宽度 600 dp),在手机(较小的屏幕上)匹配单面板布局 解决方案:您可以使用上文中所述的单面板和双面板这两种布局,但您应使用 sw600dp 指明双面板布局仅适用于最小宽度 600 dp...10 英寸平板电脑,纵向:双面板,窄,带操作 10 英寸平板电脑,横向:双面板,,带操作 电视,横向:双面板,,带操作 方法是: 先定义类别:单/双面板、是否带操作/窄 定义在 res...finish(); return; } ... } 通过上面一系列步骤,我们就完全可以建立一个可以根据用户界面配置进行自适应的应用程序...根据UI设计师给出设计图上的尺寸,找到对应像素数的单位,然后设置给控件即可 步骤1:以某一分辨率基准,生成所有分辨率对应像素数列表 现在我们以320x480的分辨率基准: 屏幕的宽度分为320份...,取值x1~x320 屏幕的高度分为480份,取值y1~y480 然后生成该分辨率对应像素数的列表,如下图: lay_x.xml() <?

1.3K10

Android开发:最全面、最易懂的Android屏幕适配解决方案

(其最小宽度 600 dp),在手机(较小的屏幕上)匹配单面板布局 解决方案:您可以使用上文中所述的单面板和双面板这两种布局,但您应使用 sw600dp 指明双面板布局仅适用于最小宽度 600...10 英寸平板电脑,纵向:双面板,窄,带操作 10 英寸平板电脑,横向:双面板,,带操作 电视,横向:双面板,,带操作 方法是: - 先定义类别:单/双面板、是否带操作/窄 定义在...finish(); return; } ... } 通过上面一系列步骤,我们就完全可以建立一个可以根据用户界面配置进行自适应的应用程序...根据UI设计师给出设计图上的尺寸,找到对应像素数的单位,然后设置给控件即可 步骤1:以某一分辨率基准,生成所有分辨率对应像素数列表 现在我们以320x480的分辨率基准: 屏幕的宽度分为320份...,取值x1~x320 屏幕的高度分为480份,取值y1~y480 然后生成该分辨率对应像素数的列表,如下图: - lay_x.xml() <?

2.5K70

最新iOS设计规范七|10大视觉规范(Visual Design)

控件放在屏幕的顶部和底部时,请使用匹配的插图,并在“Home”指示器周围留出足够的空间,以便人们在尝试控件进行交互时不会意外地将其作为目标。...全屏iPhone型号的状态比其他型号高。如果你的APP采用固定的状态高度内容定位在状态下方,则必须更新APP以便于根据用户的设备来动态的定位内容。...动画设置可选。在辅助功能首选项中启用减少动画的选项时,你的APP应该最小化或消除动画。...即使你的APP在其他平台可以使用,也要避免通过过分关注一致的品牌却削弱了你的设计。 不要让品牌盖过内容。在屏幕顶部显示一个固定的,除了显示品牌资产外什么不做,这意味着查看内容的空间较小。...与其尝试创建系统颜色匹配的自定义颜色,不如使用动态系统颜色。 色彩管理 颜色配置文件应用于图像。iOS上的默认颜色空间是标准RGB(sRGB)。

7.9K30

【最新】iPhone X 交互设计官方指南

屏幕尺寸 iPhone X 屏幕的宽度 iPhone6,iPhone 7 和 iPhone8 的 4.7 英寸的屏幕相同。...但是请注意,当背景任务(例如录音和位置跟踪)处于活动状态时,iPhoneX 上的状态不会改变高度。 如果你的应用程序对隐藏状态进行了隐藏,那么请重新考虑在 iPhone X 上的设计。...iPhone 上的显示高度 4.7 英寸,并且它的屏幕上提供了更多的垂直空间内容,状态占据了你的应用程序本来可以使用的屏幕区域,状态还显示了对人们有用的信息,只有在交换附加值时候才能被隐藏。...避免交互式控件放置在屏幕最底部和角落里。人们可以使用显示屏底部的滑动手势来访问主屏幕和对应用程序进行切换,这些手势可能会覆盖掉你在此区域中设定的自定义手势。另外屏幕的两个角落令人很难进行有效操作。...使用色彩的照片和视频更加逼真,使用色的视觉数据和状态指示器能够是你的应用程序更具有影响力。 请参阅 颜色管理。 ?

1.9K20

图片或视频充当网页背景+过渡动画

background-size: contain;恰好包含在容器中。不会被裁剪。 为什么已经指定了background-size: contain;还要设置height: 100%;?...为什么还要设置宽度? 可以加一个background-color辅助调试。 目前logo是块级元素,会导致导航的剩余内容没有地方存放,因此需要指定宽度。...但在视频背景中,不能直接video标签作为最外层标签。 原因包括: 作为视频背景,需要设置100%。但视频100%可能会溢出元素,而且是相对窗口大小的溢出。...如果对象的宽高比内容框不相匹配,该对象将被剪裁以适应内容框。 fill:被替换的内容正好填充元素的内容框。整个对象完全填充此框。如果对象的宽高比内容框不相匹配,那么该对象将被拉伸以适应内容框。...即使是拖动窗口大小,如果元素采用了相对定位,会有一个过渡的动画。

9310
领券