响应式布局

原创 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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

html5/css3响应式布局

html5图片自适应http://www.gbtags.com html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能。移动终端一般都是对css3支持比较好的...
  • wyaspnet
  • wyaspnet
  • 2015年02月25日 14:06
  • 2190

web前端开发之几种布局方式之响应式布局

一理解几种布局的概念 1、静态布局(Static Layout) 即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;  意思就是不管浏览...
  • gertYY
  • gertYY
  • 2016年10月09日 10:55
  • 20967

html5 响应式布局示例

响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联...
  • csdn9_14
  • csdn9_14
  • 2016年12月05日 23:10
  • 1563

响应式布局跟自适应布局的不同总结

第一点:自适应的目的是在不同分辨率的不同设备上面显示相同的页面。 手机的屏幕比较小,宽度通常在600像素以下,pc的像素一般在1000像素以上,部分配置高的笔记本在2000像素以上的也有,同样的页面要...
  • u010507417
  • u010507417
  • 2016年07月01日 17:03
  • 6368

<响应式布局>3---设计案例样式文件的另一种引入方式

1.main.html: 响应式网站布局 header left main right footer ...
  • Fuego801
  • Fuego801
  • 2016年03月29日 21:31
  • 663

什么叫响应式布局

前端继续学习中。在CSS样式中看到响应式布局。感觉好高大上的样子。特意查询相关资料,整理如下。 简单点说,就是页面排版布局能够兼容多个终端设备。要知道每个设备,尤其是移动端设备,各种尺寸。 说的再...
  • persitail
  • persitail
  • 2016年07月02日 21:29
  • 1876

实现响应式布局的方式-CSS3实现

如何实现响应式布局: 1. css3-Media Query //最简单的方式 2. 原生JavaScript //成本高 不建议使用 3. 第三方开源框...
  • Makenzie
  • Makenzie
  • 2017年08月04日 16:45
  • 338

响应式布局基础二:设置viewport

在开发PC端的网站的时候,我们通常需要根据屏幕分辨率的大小,通过css的媒体查询,设置响应的像素大小。 在开发手机网站的时候,通常也需要这样设置的。但是在手机端,还需要多设置viewport这个元素。...
  • a767536305
  • a767536305
  • 2016年02月23日 22:04
  • 421

典型的响应式布局实例代码

响应式布局-样式表中内嵌法 header sidebarLeft main sidebarRight footer...
  • lichbin
  • lichbin
  • 2014年04月15日 15:14
  • 6415

常见的响应式布局方式

布局类型 在谈响应式布局前,我们先梳理下网页设计中整体页面排版布局,常见的主要有如下几种类型:   布局实现 采用何种方式实现布局设...
  • bboyjoe
  • bboyjoe
  • 2016年03月31日 10:54
  • 2389
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:响应式布局
举报原因:
原因补充:

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