CSS3自适应布局

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

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

废话不多说，上干货


上为手机，下为pc，自适应小讲堂开课啦！
第1步，设计思路，根据不同的设备，转换表格和列
第2步，实现技术，使用CSS3媒体查询中的media关键字，检测屏幕宽度
第3步，设计表格（省略）
第4步，设计响应式样式，
使用@media判断视野宽度小于60px，隐藏表格标题，单元格以块显示，
并向左浮动，从而设计垂直层叠效果，再用attr（）函数获取data-label属性值，以动态方式显示在每个单元格的左侧，

上面样式却在一个缺点，必须为每个单元格标签添加data-label属性
第5步，响应式代码如下

好了，今天的干货分享就结束了，如果感觉阿雨的分享对你有帮助的，就关注我吧！！！
创作不易，感谢有你，一路同行，加油！