html中怎么写响应式布局代码

这篇文章主要讲解了“html中怎么写响应式布局代码”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“html中怎么写响应式布局代码”吧！

　　1.直接在CSS文件中使用：

　　@media 类型 and (条件1) and (条件二){

　　css样式

　　}

　　@media screen and (max-width:1024px) {

　　body{

　　background-color: red;

　　}

　　}

　　2.使用@import导入

　　@import url("css/moxie.css") all and (max-width:980px);

　　3.也是最常用的方法--直接使用link连接，media属性用于设置查询方法

　　下面是一个简单的响应式的布局HTMl代码：

　　响应式

　　下面是CSS样式：

　　*{

　　margin:0;

　　padding:0;

　　text-align:center;

　　color:yellow;

　　}

　　.header{

　　width:100%;

　　height:100px;

　　background:#ccc;

　　line-height:100px;

　　}

　　.main{

　　background:green;

　　width:100%;

　　}

　　.clearfix:after{

　　display:block;

　　height:0;

　　content:"";

　　visibility:hidden;

　　clear:both;

　　}

　　.left,.center,.right{

　　float:left;

　　}

　　.left{

　　width:20%;

　　background:#112993;

　　height:300px;

　　font-size:50px;

　　line-height:300px;

　　}

　　.center{

　　width:60%;

　　background:#ff0;

　　height:400px;

　　color:#fff;

　　font-size:50px;

　　line-height:400px;

　　}

　　.right{

　　width:20%;

　　background:#f0f;

　　height:300px;

　　font-size:50px;

　　line-height:300px;

　　}

　　.footer{

　　width:100%;

　　height:50px;

　　background:#000;

　　line-height:50px;

　　}

　　样式代码

　　.right{

　　float:none;

　　width:100%;

　　background:#f0f;

　　clear:both;

　　}

　　.left{

　　width:30%;

　　}

　　.center{

　　width:70%;

　　}

　　.main{

　　height:800px;

　　}

　　样式代码

　　.left,.center,.right{

　　float:none;

　　width:100%;

　　}

　　当窗口大于1024px 时，指挥被压缩，并不会发生其他变化：

　　当窗口小于1024px，大于720px的时候，右侧栏取消浮动，在下边显示：

　　当窗口小于720px的时候，左中右三栏，全都取消浮动，宽度100%：

感谢各位的阅读，以上就是“html中怎么写响应式布局代码”的内容了，经过本文的学习后，相信大家对html中怎么写响应式布局代码这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！