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中怎么写响应式布局代码这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是云技术，小编将为大家推送更多相关知识点的文章，欢迎关注！

相关推荐: 在页面中引用css的方式有哪些

本篇内容主要讲解“在页面中引用css的方式有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“在页面中引用css的方式有哪些”吧! 　　优先级：外部样式 　　优先级，即：同名的选择器右边的会覆盖左边 免费云主机、域…