摘要: 1.使用媒体查询来适应不同视口的固定宽度设计,例如bootstrap的container类。2.将固定像素布局转换成灵活的百分比布局,才能让页面元素根据视口大小在一个又一个媒体查询间伸缩修正样式。3.目标元素宽度 / 上下文元素宽度 = 百分比宽度4.响应式的文字,使用百分比和em,em的实际大小是... 阅读全文
posted @ 2015-12-03 23:21 zcynine 阅读(800) 评论(0) 推荐(0)
摘要: box-flex的写法比flex的写法要复杂一些,兼容性的前缀要多带几个,真希望有一天flex布局能够纳入w3c标准啊! box-orient, box-direction, box-align, box-pack, box-lines box-orientbox-orient用来确定子元素的方向。 阅读全文
posted @ 2015-12-03 22:57 zcynine 阅读(770) 评论(0) 推荐(1)
摘要: Flexible Box是什么?Flexible意为可伸缩的,Box意为盒子,可以理解为一种新式的盒模型——伸缩盒模型。由CSS3规范提出,这是在原有的大家非常熟悉的block, inline-block, inline的基础上延伸出的新一代布局模式。浏览器兼容性作为非常现实的开发者,是否对一个新技... 阅读全文
posted @ 2015-12-03 22:28 zcynine 阅读(11743) 评论(0) 推荐(3)
摘要: 对于前端来说,一个比较大的问题是,当HTML提供的最原始的控件长的很丑可是又没有相应的属性去更改,碰到这个问题时我们应该怎么办?比如radio的那个单选框我觉得好丑啊,怎么办呢?一个很好的思路就是把它隐藏掉(透明度设为0),用美观的图片或者能用CSS3来实现的东西代替,而实际的触发事件还是传给被隐藏... 阅读全文
posted @ 2015-12-03 20:35 zcynine 阅读(282) 评论(0) 推荐(0)
摘要: 在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式。事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计。一切看起来很好,很正常,直到你看到他/她设计的一个选择下拉框跟浏览器默认提供的样式有些不同!你说:“这没办法... 阅读全文
posted @ 2015-12-03 10:23 zcynine 阅读(711) 评论(0) 推荐(0)