CSS3自适应布局

你好,欢迎打开我的博客,阿雨每天与你分享许多有趣新鲜的knowledge!

最近给大家带来的是WEB前端中重要的一部分,一些有关CSS的基础知识,俗话说的好“万丈高楼平地起”,要想做一个优秀的前端人员,必须打好基础哦。

废话不多说,上干货
CSS3自适应布局
CSS3自适应布局
上为手机,下为pc,自适应小讲堂开课啦!
第1步,设计思路,根据不同的设备,转换表格和列
第2步,实现技术,使用CSS3媒体查询中的media关键字,检测屏幕宽度
第3步,设计表格(省略)
第4步,设计响应式样式,
使用@media判断视野宽度小于60px,隐藏表格标题,单元格以块显示,
并向左浮动,从而设计垂直层叠效果,再用attr()函数获取data-label属性值,以动态方式显示在每个单元格的左侧,
CSS3自适应布局
上面样式却在一个缺点,必须为每个单元格标签添加data-label属性
第5步,响应式代码如下
CSS3自适应布局
好了,今天的干货分享就结束了,如果感觉阿雨的分享对你有帮助的,就关注我吧!!!
创作不易,感谢有你,一路同行,加油!