随笔分类 -  CSS

构造高度自适应的textarea
摘要：高度自适应的textarea，这个需求还是比较常见的，随着用户的输入textarea的高度自动变化，这样输入较少的时候可以节省空间，输入多的时候可以不出现滚动条，让内容尽可能的展现在用户的视线内。可惜的是textarea本身没有自适用的技能，文字过多就会出现滚动条的，所以我们需要曲线救国。基本思路：... 阅读全文
posted @ 2015-12-28 22:17 zjzhome 阅读(9790) 评论(2) 推荐(8)
maxlength属性在textarea里奇怪的表现
摘要：HTML5给表单带来了很多改变，比如今天要说的maxlength，这个属性可以限制输入框输入的最大字字符数，更方便的是对于粘贴的内容也能够根据字符数自动截断。最近就接到这要一个需求，限制用户最多输入600字（汉字和字母不区分），对于粘贴的内容也要能自动截断，输入600字后就无法输入。第一时间想到了m... 阅读全文
posted @ 2015-12-26 15:05 zjzhome 阅读(3797) 评论(1) 推荐(0)
移动web开发的一些坑
摘要：类似的题目一搜一大堆，我就不再写那些meta标签类似的内容了，记录一下自己实现中遇到的问题，如果能帮到你，那再好不过了。1px border的问题，大家能搜到很多方案，但如何选择还是要根据实际情况，比如border-image不能处理圆角，最好用的transform scale可能会因为改变布局导致... 阅读全文
posted @ 2015-11-21 15:54 zjzhome 阅读(1003) 评论(4) 推荐(1)
完美解决移动Web小于12px文字居中的问题
摘要：前几天的一篇博文：移动Web单行文字垂直居中的问题，提到了移动web里小于12px的文字居中异常的问题，最后还是改为12px才近乎解决了问题。但是有时候或许并不是那么乐观，你并不能将原本定为10px的字体改为12px。那该怎么办呢。我们都知道，移动端为了高清屏显示1px的border，会有那么几种方法，通常最好的方法是transform scale，并且支持圆角。既然一个border能缩放，那么整个文字区域自然也能缩放。 阅读全文
posted @ 2015-10-27 13:33 zjzhome 阅读(10207) 评论(2) 推荐(4)
再谈移动端Web屏幕适配
摘要：一个多月前水了一篇移动web屏幕适配方案，当时噼里啪啦的写了一通，自我感觉甚是良好。不过最近又有一些新的想法，和之前的有一些不同。先说一下淘宝的方案，感觉现在好多的适配方案都是受了它的影响，上周六看了winter在一个会议的分享，讲到了这个方案。现在你谷歌一下移动web适配，绝对可以看到很多类似的，... 阅读全文
posted @ 2015-10-26 23:36 zjzhome 阅读(2465) 评论(8) 推荐(2)
移动Web轮播图IOS卡顿的问题
摘要：移动端的3d硬件加速真的很有用！晚饭前，被测试吐槽说，banner轮播手动左右滑的时候会卡顿。我一看不科学啊，大水果手机怎么会卡顿。我一看测试手中拿的是iPod，我觉得大概是这小玩意性能不强悍，后来又拿来5S，依然会卡顿，有趣的是，两个5S，一个IOS7一个IOS8，IOS7基本没有卡顿，IOS8会卡。饭后着手解决此问题。 阅读全文
posted @ 2015-10-22 19:39 zjzhome 阅读(5592) 评论(5) 推荐(1)
移动Web单行文字垂直居中的问题
摘要：移动Web单行文字垂直居中在PC端显而易见, 到了移动端却发现了诡异的bug, 原因竟然是... 阅读全文
posted @ 2015-10-21 19:53 zjzhome 阅读(9356) 评论(8) 推荐(7)
display的小故事
摘要：这个博文主要记录display的一些小tips，不定时更新。 阅读全文
posted @ 2015-09-17 19:50 zjzhome 阅读(343) 评论(0) 推荐(0)
移动web屏幕适配方案
摘要：刚进部门就被拉去趟移动端Web的浑水，视觉稿是按照640px设计的。那如何做屏幕适配呢？当然想到的第一方法就是问前辈了，问他们之前怎么做的，前辈说直接按视觉稿来，我说640太大了，他说除以2啊，按320来。。我说不行吧，屏幕多种多样的，6 plus显示的得多小。。他说你和视觉沟通下。。。orz。。。还是自食其力吧——网络搜索，大概能搜到一些，不过要么太高大全（淘宝的方案），要么都是零零碎碎的。最终根据淘宝的方案还有Rem这个单位，自己做了一套简单的方案。 阅读全文
posted @ 2015-09-12 17:23 zjzhome 阅读(2573) 评论(1) 推荐(2)
[译]Autoprefixer:用最可行的方式处理浏览器前缀的CSS后处理器
摘要：Autoprefixer，通过Can I Use数据库来确定哪些浏览器前缀是需要的，然后解析CSS文件，将前缀添加到CSS规则里。 你所要做的就是添加你的资源构建工具（比如：Grunt），然后你就可以忘记CSS前缀了，按照最新的W3C标准尽情书写无前缀的CSS。 阅读全文
posted @ 2015-03-11 17:06 zjzhome 阅读(660) 评论(0) 推荐(0)