响应式布局

原创 2015年11月21日 10:15:03

随着显示屏幕大小的变化,网页所显示的效果也不一样。如下:
当屏幕在980px以上时:

这里写图片描述

当屏幕在980Px和560px之间时:

这里写图片描述

响应式布局可以参考:媒体查询
代码奉上:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>css响应式设计</title>
<style>
    *{margin:0;padding:0;}
    .content{width:980px;margin:0 auto;background-color:#b1fffc;overflow:hidden;}
    .content ul{list-style:none;}
    .content li{width:200px;height:200px;float:left;margin:20px;background:#ffccf7;}
    @media screen and(min-width:650px) and (max-width:980px){
        .content{width:96%;}
        .content li{margin-right:20px;}
        .box3,.box6,{margin-right:30px;}
    }
</style>
</head>

<body>
<div class="content">
  <ul>
    <li class="box1">box1</li>
    <li class="box2">box2</li>
    <li class="box3">box3</li>
    <li class="box4">box4</li>
    <li class="box5">box5</li>
    <li class="box6">box6</li>
    <li class="box7">box7</li>
    <li class="box8">box8</li>
  <ul>
</div>
</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

响应式布局

  • 2015年03月23日 15:32
  • 11.01MB
  • 下载

响应式布局

  • 2017年08月23日 15:44
  • 2KB
  • 下载

HTML之meta&&响应式布局

meta在head标签中的meta标签,可以为HTML文档提供额外信息 meta属性主要分为两组 1.name属性与content属性 name属性用于描述网页,它是以名称/值形式的名称,nam...

java实现响应式布局爬虫技术

  • 2015年04月18日 21:49
  • 654KB
  • 下载

bootstrap响应式布局学习日记

大学放寒假每天待在家里无聊的要死,打游戏又不起劲,于是又研究起了代码。 是这样的,比如我们在一个网页中有一个导航条,导航条上有许许多多选项,比如说有12个(因为bootstrap的栅格系统每行最多只有...
  • mate_ge
  • mate_ge
  • 2016年02月13日 00:38
  • 1256

工业化、响应式的的CSS3 grid布局应用及其向后兼容问题-- 下 --(翻译自smashingmagazine,有删改)

接上,[工业化、响应式的的CSS3 grid布局应用及其向后兼容问题– 上 –(翻译自smashingmagazine,有删改)](工业化、响应式的的CSS3 grid布局应用及其向后兼容问题– 上 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:响应式布局
举报原因:
原因补充:

(最多只允许输入30个字)