移动下的css布局

yhd前端工程师 施峰峰

像素比：2、3

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

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

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

使用Viewport units

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

使用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>

使用Viewport units

使用Viewport units

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

神奇的padding/margin-top

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

}

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

}

使用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);

}

使用margin top 保持间隙

结合使用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%;

} }

结合使用rem & mediaquires

理解flex

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

flex兼容性方案



https://github.com/TVVT/commonless



@import ‘common.less’

.papa{ .display(flex);

}

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

}

.child2{ .flex(1);

}



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

iconfont & svg

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

yhd的iconfonts协作方案



添加或删除svg

Seafile



Seafile



Seafile



同步上传



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



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

开始使用svg

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

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

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

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

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

让设计师放弃photoshop使用sketch😂

一个完全用svg制作的demo

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

使用图片的最佳实践 能不要用图片就不要用图片（css3，font-spider）

http://font-spider.org/

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

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

QA