首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    移动端web开发笔记

    ) 当网站添加到主屏幕后再点击进行启动时,可隐藏地址栏(从浏览器跳转或输入链接进入并没有此效果) mobile-web-app-capable" content="yes...(IOS) 设置状态栏的背景颜色,只有在 "apple-mobile-web-app-capable" content="yes" 时生效 mobile-web-app-status-bar-style...所以启动图片需要减去状态栏区域所对应的方向上的20px大小,相应地在retina设备上要减去40px的大小 的滚动条,所以一般都借助 iScroll; Android 3.0/iOS解决了非body元素的滚动问题,但滚动条不可见,同时iOS上只能通过2个手指进行滚动; Android 4.0解决了滚动条不可见及增加了快速回弹滚动效果...,不过随后这个特性又被移除; iOS从5.0开始解决了滚动条不可见及增加了快速回弹滚动效果 在iOS上如果你想让一个元素拥有像 Native 的滚动效果,你可以这样做: .xxx { overflow

    3.7K20

    2023年即将推出的CSS特性对你影响大不大?

    ,尤其是在移动设备上。...作为开发人员,希望 100vh (视口高度的 100%)表示“与视口一样高”,但该 vh 单元不考虑移动设备上缩回导航栏之类的事情,因此有时它最终会太长并导致滚动。...这意味着当您向上或向下滚动时,动画会向前或向后滑动。此外,对于滚动驱动动画,您还可以根据元素在其滚动容器中的位置来控制动画。...这允许您创建有趣的效果,例如视差背景图像、滚动进度条和在进入视野时显示自己的图像。 此 API 支持一组 JavaScript 类和 CSS 属性,使您可以轻松创建声明性滚动驱动的动画。...即将推出新功能有20多个,这里只介绍了最有影响力最重要的八个,如果您想了解更多的,可以查看下面的谷歌开发者文章 https://developer.chrome.com/blog/whats-new-css-ui

    21330

    Vue项目中使用Tinymce

    /tinymce4.7.5/tinymce.min.js> 初始化 引入文件后,在html元素上初始化TinyMCE, 由于TinyMCE允许通过CSS选择器来标识可替换的元素,所以我们只需要将包含选择器的对象传递给...文件存的是TinyMCE初始化时加载的工具栏控件, 设置的顺序即代表着在编辑器工具栏上出现的顺序 const toolbar = [ "searchreplace bold italic underline...但是我却花费了一个小时来搞这个, 因为我咋也粘贴不上, 所以不得不提一下这个坑:就因为我用的chrome开发, chrome浏览器直接在文件中复制粘贴图片是无法粘贴上的, 但是可以从微信输入框等地方粘贴上...important }`, 于是模拟手机端预览也完事了, 但内容提交后, 手机上查看图片仍然很大, 原因是我忽略了官方文档说的:这些样式不会与内容一起保存的 所以我在提交代码时将这个style字符串拼接到内容上...由于这个函数没有没有提供回调函数,当异步从服务器取回新地址时,renturn回去的url是不等人的, 我试了使用await来解决,但是发现它不支持异步来处理,所有只好放弃,采用这种方式变向处理,让用户点击保存时再去匹配并替换内容

    4.8K20

    移动开发实用

    当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari mobile-web-app-capable" content="yes" /> 上已看不到效果 --> 将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式 mobile-web-app-status-bar-style...不管当前有多少只手指 touchmove 当手指在屏幕上滑动时连续触发。...通常我们再滑屏页面,会调用event的preventDefault()可以阻止默认情况的发生:阻止页面滚动 touchend 当手指离开屏幕时触发 touchcancel 系统停止跟踪触摸时候会触发。...通常我们再滑屏页面,会调用css的html{-ms-touch-action: none;}可以阻止默认情况的发生:阻止页面滚动MSPointerUp——当手指离开屏幕时触发 移动端click屏幕产生

    6.5K30

    打造便捷、人性化的macOS桌面使用环境

    macos好用吗,我觉得一般,当macos跟macbook结合到一起,并与iPhone、ipad、airpods组成生态时,他就很好用了。但macos完美吗?...这篇文章带来的是我在使用macos系统中不断积累和筛选的应用软件,让桌面使用更加便捷和人性化。 软件列表,排名不分先后,因App Store审核机制和开放的权限不同,部分软件推荐到官网下载全功能版。...任务栏图标隐藏工具 Hidden Bar macos的任务设计的令人相当无语,任务栏图标区不会自动折叠就算了,菜单竟然还会与图标重叠。。...窗口管理工具 Rectangle macos的窗口管理和那个任务栏图标管理一样的烂,rectangle可以设置桌面边框触发,用鼠标完成桌面布局,跟win10上的一样。...当你设置了平滑滚动你会发现游戏里鼠标滚轮你永远选不到你想要的那栏了。。。。 开机启动,平滑滚动,鼠标滚轮单独翻转,例外程序单独设置,一个软件,全部解决。

    71810

    CSS | 视差滚动 | 笔记

    通过调整 perspective 属性的值,可以改变透视效果的强度。 在视差滚动中,"向内移动"和"向外移动"是相对于观察者(即浏览器窗口)的视角来说的。...当一个层的 translateZ 值为负时,它会向内移动,也就是朝向观察者的方向。 这样的移动会使层看起来更接近观察者,产生较强的视差效果。 在视差滚动中,这种效果可以让层看起来更大、更突出。...相反,当一个层的 translateZ 值为正时,它会向外移动,也就是远离观察者的方向。 这样的移动会使层看起来更远离观察者,产生较弱的视差效果。在视差滚动中,这种效果可以让层看起来较小、较平面。...核心问题是移动浏览器(Chrome和Safari)有一个“帮助”功能,地址栏有时可见,有时隐藏,改变了视口的可见大小。...这些浏览器没有将 100vh 的高度调整为视口高度变化时屏幕的可见部分,而是将 100vh 设置为隐藏地址栏的浏览器高度。

    81821

    面试必备 css面试必考点

    *{margin:0;padding:0;} IE6双边距bug:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大。...与包含块 (BFC) border box的左边相接触 (子元素 absolute 除外) BFC 的区域不会与 float 的元素区域重叠 计算 BFC 的高度时,浮动子元素也参与计算 文字层不会被浮动层覆盖...jpg是一种针对相片使用的一种失真压缩方法,是一种破坏性的压缩,在色调及颜色平滑变化做的不错。在www上,被用来储存和传输照片的格式。 gif是一种位图文件格式,以8位色重现真色彩的图像。...参数是scroll时候,必会出现滚动条。 参数是auto时候,子元素内容大于父元素时出现滚动条。 参数是visible时候,溢出的内容出现在父元素之外。 参数是hidden时候,溢出隐藏。...实现三栏布局有哪些方法, 分别描述一下 三栏布局,顾名思义就是两边固定,中间自适应。三栏布局在开发十分常见,那么什么是三栏布局?

    1.1K10

    用APICloud如何开发出运行体验良好、高性能的 App

    列表滚动: 滚动效果要平滑流畅,不能使用 iscroll 等 JS 的方式来实现滚动 建议使用 Window+Frame 的 UI 结构,以 Native 的方式来实现列表页面的滚动。...在 iOS 上要支持点击状态栏能自动回到顶部的效果,可以通过在 openWin 或 openFrame 的时候配置 scrollToTop 参数来实现;此效果在 FrameGroup 中使用的时候要注意确保只有当前显示的...下拉刷新效果: 建议不要使用 APICloud 默认的下拉刷新效果(灰色箭头),要使用模块来实现 UE/UI 所设计的下拉刷新效果。...状态栏效果: Android 和 iOS 上都要求实现沉浸式状态栏效果的适配 可以通过在 config.xml 中开启沉浸式效果] 配置项,然后在 Window 或 Frame 的 apiready 事件后...如果由于各种原因造成 apiready 执行太晚,当 Header 高度变化时会产生页面跳动的现象,也可以根据需求自己来实现,在合适的时机(如 onload 事件中)判断平台类型后,手动调整 Header

    2.3K20

    jQuery Mobile的默认配置项详解,jQuery Mobile的中文配置api,jQuery Mobile的配置说明,配置大全

    //该数值越小,延时越小,触摸越灵敏,但同时很有可能错误的触发页面滚动条滚动。因此建议数值不要太小。...ignoreContentEnabled:false, //布尔值 默认值:false把该选项设置为 true , //并且在某元素的父元素上设置 data-enhance="false"...属性,那么该元素会自动降低 jQuery Mobile //增强(jQuery Mobile 元素增强指的是 jQuery Mobile 对网页基本元素在样式上的丰富、交互上的增强以及相应的 HTML...subPageUrlKey:"ui-page" ,// 字符串 默认值:"ui-page" URL 参数用来指向由组件生成的子页面(如嵌套列表页), //该 URL 会被解释成如 example.html...&ui-page=subpageIdentifier 的形式,而在 &ui-page= 之前的哈希值会被 jQuery Mobile 向此 URL 地址做 Ajax 请求。

    1.5K20

    处理视觉冲突 | 手势导航 (二)

    系统 UI 包括屏幕上由系统提供的所有 UI,例如导航栏和状态栏,另外它还包括诸如通知面板之类的内容。...我们甚至能看到在 StackOverflow 上有个一直热门的问题就是关于这个的。 Insets 区域负责描述屏幕的哪些部分会与系统 UI 相交 (intersect),例如导航或状态栏。...自 API 1 以来,它们就以各种形式存在着,并且每当系统 UI 重叠显示在您的应用上方时,这个方法就会被调用。常见的例子是下拉状态栏和导航栏,或者弹出屏幕软键盘 (IME)。...在系统使用手势导航模式时 (即导航栏变成屏幕底部的一条粗线,也就是导航条),由于导航条有动态色彩调整功能,这个冲突可能不会那么明显。...注意,使用可点击区域里的数值进行布局时,依然可能导致自己的控件与系统 UI 在视觉上重叠,这一点与系统窗口区域 insets 不同,使用后者的值对自己的控件进行位移后能确保不会与系统/导航栏发生视觉重叠

    2.8K30

    前端面试题归类-css

    解决自适应两栏布局问题:利用BFC的区域不会与float box重叠的规则。解决浮动后塌陷问题:利用计算BFC的高度时,浮动元素也参与计算规则。...参数是scroll时候,必会出现滚动条。参数是auto时候,子元素内容大于父元素时出现滚动条。参数是visible时候,溢出的内容出现在父元素之外。参数是hidden时候,溢出隐藏。...项目都排在一条线(又称”轴线”) 上。...)word-wrap:break-word11.媒体查询:定义两套css,当浏览器的尺寸变化时会采用不同的属性CSS 创建一个三角形把上、左、右三条边隐藏掉(颜色设为 transparent)#demo...(即每个字占的空间大了 1 px,但点阵没变),于是略显稀疏。元素竖向的百分比设定是相对于容器的高度吗?

    1.6K40

    对定位的深入理解与应用

    特点 不会像浮动一样脱离文档流,只是视觉上的效果,不会对其他元素产生影响 定位元素层级比层级元素高,所有定位层级相同: 定位的元素会覆盖在普通元素上。...margin 调整位置,但不推荐这样做 注意:绝大多数情况下,相对定位,会与绝对定位配合使用。...overflow: scroll;:内容被剪裁,显示滚动条。 overflow: auto;:根据内容是否超出自动显示滚动条。...粘性定位通常用于创建吸顶效果或侧边栏固定效果,当用户滚动页面时,元素会始终保持在视口内的特定位置。...滚动属性(特别是 overflow: auto;)可以在元素内容超出容器时提供滚动条,使用户能够滚动查看全部内容,与粘性定位结合使用时,可以在固定位置时仍然允许内容的查看和操作。

    11810

    从零开始学 Web 之 CSS3(三)渐变,background属性

    ,如果背景图定义在div里面,而显示的位置在浏览器范围内但是不在div的范围内的话,背景图无法显示。...*/ local与scroll的区别:当滚动的是当前盒子(div)里面的内容的时候, local:背景图片会跟随内容一起滚动; scroll:背景图片不会跟随内容一起滚动。...语法: background-origin: padding-box|border-box|content-box; border-box:从border的左上角位置开始填充背景,会与border重叠;...padding-box:从padding的左上角位置开始填充背景,会与padding重叠; content-box:从内容左上角的位置开始填充背景。...干嘛把 a 标签做的这么大,跟需要的精灵图一样大不好吗? 还记得手机通讯录右侧的A-Z的列表吗?容易点吗?是不是很容易点错?

    1.9K10
    领券