AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

移动下的CSS布局 by 施峰峰@1号店

发布者 csser
发布于 1440464802048  浏览 2504 关键词 CSS, 移动开发 
分享到

第1页

移动下的css布局

yhd前端工程师 施峰峰



第6页

像素比:2、3



第7页

我们该如何还原视觉设计?



第8页

我们该如何还原视觉设计?

无法使用像素来衡量元素的宽度 无法保持元素的宽高比 在高清屏幕上的模糊



第9页

使用Viewport units

vw: viewport 宽度的1% vh: viewport 高度的1% vmin: viewport Math.min(高度,宽度)的1% vmax: viewport Math.max(高度,宽度)的1%



第10页

使用Viewport units



CSS:

div{ height: 10vw; width: 50vw; line-height: 10vw; font-size: 5vw; text-align: center; color: #fff; background-color: red; margin: auto;

}



HTML:

<div>按钮内容</div>



第11页

使用Viewport units



第12页

使用Viewport units



第13页

神奇的padding/margin-top ⼦子元素的padding-top百分⽐比基准是⽗父元素的宽度



第14页

神奇的padding/margin-top

.papa{ width: 100px; height: 300px; background-color: #ddd; overflow: hidden;

}

.child{ width: 50px; height: 50px; background-color: red; margin-top: 100%;

}



第15页

使用Padding top 保持比例



Sass:

@mixin aspect-ratio($width, $height) { position: relative; &:before { display: block; content: ""; width: 100%; padding-top: ($height / $width) * 100%; } > .content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

}



HTML:

<div class="sixteen-nine"> <div class="content"> insert content here this will maintain a 16:9 aspect ratio </div>

</div>

Usage:

.sixteen-nine { @include aspect-ratio(16, 9);

}



第16页

使用margin top 保持间隙



第17页

结合使用rem & mediaquires



html{ font-size: 62.5%;

} body{

font-size: 1.6rem; } h1{

text-align: center; font-size: 3rem; } p{ text-align: center; font-size: 1.8rem; }



@media all and (max-width:700px){ html{ font-size: 60%; }

} @media all and (max-width:608px){

html{ font-size: 52%;

} } @media all and (max-width:533px){

html{ font-size: 45%;

} }



第18页

结合使用rem & mediaquires



第19页

理解flex

理解伸缩容器盒&伸缩项目 理解主轴&侧轴 flex换过几次标准,所以兼容性问题比较大



第20页

flex兼容性方案



https://github.com/TVVT/commonless



@import ‘common.less’

.papa{ .display(flex);

}

.child1{ display:block; width:200px;

}

.child2{ .flex(1);

}



不包含flex wrap的情况 兼容IE10+



第21页

iconfont & svg

不管何种分辨率或像素比都不会模糊 请求数能够减少 维护成本比css split 小很多 体积较小



第22页

yhd的iconfonts协作方案



添加或删除svg

Seafile



Seafile



Seafile



同步上传



server 监听⽂文件夹变化 使⽤用fontcustom编译



http://fontcustom.com/ https://www.seafile.com/home/



第23页

开始使用svg

可以使用多种颜色 可以将svg打包到js中,减少和开发的沟通成本 无跨域的问题 可以使用svg动画



第24页

如何快速的从psd中导出svg?

图层必须是path photoshop cc 2015 可以直接右击图层 导出svg

或者只保存包含path图层的psd,然后用illustrator打开并另存为svg 使用 photoshop plugin

http://hackingui.com/design/export-photoshop-layer-to-svg/

让设计师放弃photoshop使用sketch😂



第25页

一个完全用svg制作的demo

整个页面的大小只有282KB 请求数为5个 使用css3为svg添加动画



第26页

使用图片的最佳实践 能不要用图片就不要用图片(css3,font-spider)

http://font-spider.org/

直接使用低精度的2x图片

http://www.html5rocks.com/en/mobile/high-dpi/



第27页

QA



支持文件格式:*.ppt, *.pptx, *.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。