• 欢迎访问大姚哥前端笔记
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧
  • 欢迎留言o(∩_∩)o 哈哈

IOS中弹出键盘后出现fixed失效现象的解决方案

这个问题常出现在移动web开发中聊天或者留言页面的绝对定位输入框上,页面超过屏幕大小时候输入框focus状态下(键盘弹出)绝对定位的元素失效,输入框位置发生错乱,体验十分不好,在此留下一自己的方法,让更多的人不需要再爬这样的小坑。 解决方法 既然在 iOS 下由于软键盘唤出后,页面 fixed 元素会失效,导致跟随页面一起滚动,那么假如——页面不会过长出现滚……继续阅读 »

dayaoge 2年前 (2016-11-16) 835浏览 0个赞

rem在chrome下最小字体限制导致布局错乱【天天踩坑】

话说chrome已经废弃了-webkit-text-size-ajust:none很久了,这导致chrome浏览器无法显示12px以下的字体了,因为chrome觉得12px以下的字体在桌面设备上不利用用户阅读。(这又是何必呢,不要拿你的想法左右我们 )。 这就导致我们设置的html{font-size:62.5%}在chrome浏览器里解释相当于html{……继续阅读 »

dayaoge 2年前 (2016-08-31) 998浏览 0个赞

利用css计数器counter美化有序列表

用ol提供的默认列表样式,很难美化,并且兼容性还是个问题。 今天我们来用css的计数器counter配合content来美化我们的列表 先看下效果; .counter-test ul,.counter-test li{ list-style:none; font-size:12px;} .list1{counter-rese……继续阅读 »

dayaoge 2年前 (2016-08-09) 658浏览 3个赞

HTML不定宽高元素水平垂直居中

以前解决这种问题兼容版本的浏览器通常使用display:table,这种方法这里就不说了。 这里介绍两种其他的解决方法。 1)、绝对定位,然后利用css3 transform属性 HTML代码: <div class="box1"> <div class="box-cont1"> ……继续阅读 »

dayaoge 2年前 (2016-07-02) 675浏览 4个赞

利用CSS3视窗单位来实现宽高相等

响应式开发中经常会遇到宽度自适应,高度需要和宽度相等,正方形盒子。以前遇到这种情况我们通常会借助js。今天我们来利用CSS3的新长度单位:vw来实现这个问题。 vw——代表视窗(Viewport)的宽度为1%,在我们的例子里50vw = 500px。 vh——窗口高度的百分比 50vh = 400px。 vmin——vmin的值是当前vw和vh中较小的值。……继续阅读 »

dayaoge 2年前 (2016-05-24) 625浏览 3个赞

css常用的代码填坑积累

以下是常用的代码收集,没有任何技术含量,只是填坑的积累。转载请注明出处,谢谢。 1. css 2.x 文字换行 /*强制不换行*/ white-space:nowrap; /*自动换行*/ word-wrap: break-word; word-break: normal; /*强制英文单词断行*/ word-break:break-all……继续阅读 »

dayaoge 2年前 (2016-05-10) 539浏览 2个赞