css3响应式布局

响应式布局
<link rel="stylesheet" href="css1.css" media="screen and (min-width:800px)"/>
<link rel="stylesheet" href="css2.css" media="screen and (min-width:600px) and (max-width:800px)"/>
<link rel="stylesheet" href="css3.css" media="screen and (max-width:400px)"/>

横屏portrait竖屏landscape
<link rel="stylesheet" href="css3.css" media="screen and (orientation:portrait)"/>
<link rel="stylesheet" href="css1.css" media="screen and (orientation:landscape)"/>

行内样式
@media screen and (min-width: 800px){}
@media screen and (min-width: 400px) and (max-width: 800px){}
@media screen and (max-width: 400px){}

Css3分栏布局
column-width 栏目宽度
column-count 栏目列数
column-gap 栏目距离
column-rule 栏目间隔线

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容