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

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

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

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

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

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

发布于 2022-03-03 21:22:25
收藏
分享
海报
0 条评论
28
上一篇:html5编辑器本地保存图片不显示怎么解决 下一篇:HTML5中怎么用Canvas绘制各种线条
目录

    0 条评论

    本站已关闭游客评论,请登录或者注册后再评论吧~

    忘记密码?

    图形验证码