myless
myless copied to clipboard
RubyLouvre
我的CSS研究,重点看issue
网易移动前端已经实践近4年的移动端适配各种屏幕无痛工具脚本,设计给你的稿子是什么就怎么切，无需特殊处理,页面viewport设置成设计给的宽度，调用fixViewportWidth()即可。 O网页链接 原理请查看 O网页链接 另外PPK去年的书也有详细分析。 ``` javascript define(function(require, exports, module) { var ua = navigator.userAgent, android = ua.match(/(Android);?[\s\/]+([\d.]+)?/), ipad = ua.match(/(iPad).*OS\s([\d_]+)/), ipod = ua.match(/(iPod)(.*OS\s([\d_]+))?/), iphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/), os...
http://www.zhihu.com/question/29936125/noti-answers?group_id=576797447574036480
https://github.com/philipwalton/flexbugs/issues http://ued.ctrip.com/webkitcss/prop/flex.html
http://www.w3cplus.com/css3/a-visual-guide-to-css3-flexbox-properties.html http://www.codingserf.com/index.php/2014/08/responsive-and-mobile-2/
https://github.com/Justineo/blog/blob/gh-pages/_posts/2014-11-11-responsive-images-in-practice.md
1 布局1：多列布局 2 布局2： 多栏布局 3 布局3： 三栏三列布局4 布局4： 基于table-cell的多个元素垂直居中 5 布局5： 基于伸缩盒的多个元素垂直居中 6 布局6： 多列等高并出现水平滚动条 7 布局7，伸缩盒里出现垂直滚动条 最近在做uOS APP的布局，研究了一下CSS3自适应布局技术在IE10+中的应用，其他标准浏览器由于具有自动更新功能，只需兼容最近的几个版本就行了——因此我们可以用CSS3来提高工作效率。 前端HTML(结构)+CSS(表现)这部分，无非是两大问题，装饰与布局。装饰某个widget就算再难，我们也可以用图片搞定。布局就不是这回事了，别的不说，display:inline-block有3px BUG，定位布局与浮动布局相关的BUG也不在10以下，关键是用起来非常麻烦，需要许多额外的元素 。早些年够为著名的是圣杯布局，双飞翼布局，近一点的是960grids提倡的栏栅布局，但这些布局都很难与@media配合使用。而@media是面向移动设备响应式布局的利器。 @media无非是在CSS引入条件判定，让相同的几个元素在分支不同时，呈现不同的布局。另，已经的浮动布局，定位布局是无法解决多列等高问题，而浮动时要求出现浮动条的需要，这也是过去不能解决的。 这正是我提倡大胆试用CSS3属性的原因。 CSS3引入了新三种布局，grid布局，伸缩盒布局，多列布局。其中grid布局的文档繁文缛节，可用性不强，目前只有IE10实现了，未来是否完蛋或重来不可知，放弃。 多列布局是针对文本与行内元素的，是为了实现报纸那种布局，与我们这种多widget的富应用不符合，暂不起用。剩下就是伸缩盒布局，是我见过的最操蛋的规范，从2009发布到去年最终定下来，更弦换辙了三次。 Flexbox 规范时间表： 2009年7月...
.mixi-frames () { from {width: 254px;} to {width: 512px;} } @-webkit-keyframes some-animation {.mixi-frames;} @-moz-keyframes some-animation {.mixi-frames;} @-ms-keyframes some-animation {.mixi-frames;} @-o-keyframes some-animation {.mixi-frames;} @keyframes some-animation {.mixi-frames;}