响应式布局的简单案例

ttx9n · 发表于 2016-7-18 08:54:20

下面小编就为大家带来一篇响应式布局的简单案例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦

响应式布局

响应式布局在面对不同分辨率设备灵活性强，在平时的网页设计中基本上都要用到响应式布局设计，它给我们提供了良好的用户浏览页面，能带给我们更好的客户体验，下面给大家分享下我做的一个简单的响应式的布局：

201607180855592.jpg

201607180855593.jpg

不同的页面会适用不同大小浏览器页面，它会随着分辨率的变化而变化。代码展示如下：

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
　　p{
　　　　font-size: 12px;
　　}
　　header{
　　　　width: 100%;
　　}
　　header img{
　　　　width: 100%;
　　}
　　@media (min-width: 1300px) and (max-width:1400px) {
　　　　#left{
　　　　　　float: left;
　　　　　　width: 30%;
　　　　　　margin: 0px 50px;
　　　　}
　　　　#left #logo-bg{
　　　　　　margin: 10% 10%;
　　　　　　width: 80%;
　　　　　　position: relative;
　　　　}
　　　　#left #logo{
　　　　　　float: left;
　　　　　　width: 12%;
　　　　　　position: absolute;
　　　　　　left: 13%;
　　　　　　top: 230px;
　　　　}
　　　　#left p{
　　　　　　margin-bottom: -20px;
　　　　}
　　　　#left p,h4{
　　　　　　text-align: center;
　　　　　　color: red;
　　　　}
　　　　#right{
　　　　　　float: left;
　　　　　　width: 60%;
　　　　　　margin: 15% 0px;
　　　　}
　　　　#right h2{
　　　　　　text-align: center;
　　　　}
　　　　#right fieldset{
　　　　　　text-align: center;
　　　　　　border-left: none;
　　　　　　border-right: none;
　　　　　　border-bottom: none;
　　　　}
　　　　#right fieldset legend{
　　　　　　padding: 0px 20px;
　　　　}
　　　　#fen{
　　　　　　width: 100%;
　　　　　　-webkit-column-count: 6;
　　　　　　-moz-column-count: 6;
　　　　　　-o-column-count: 6;
　　　　　　-ms-column-count: 6;
　　　　　　column-count: 6;
　　　　　　-webkit-column-gap: 1em;
　　　　　　-moz-column-gap: 1em;
　　　　　　-o-column-gap: 1em;
　　　　　　-ms-column-gap: 1em;
　　　　　　column-gap: 1em;
　　　　}
　　　　#fen img{
　　　　　　width: 100%;
　　　　　　border-radius: 10px 10px 10px 10px;
　　　　}
　　　　#fen p,h4{
　　　　　　text-align: center;
　　　　　　color: red;
　　　　}
　　　　#fen p{
　　　　　　margin-bottom: -20px;
　　　　}
　　　　#di p{
　　　　　　text-align: center;
　　　　}
　　　　#di p span{
　　　　　　　color: red;
　　　　}
　　}
　　@media (min-width: 1000px) and (max-width:1300px){
　　　　#left{
　　　　　　float: left;
　　　　　　width: 30%;
　　　　　　margin: 0px 50px;
　　　　}
　　　　#left #logo-bg{
　　　　　　margin: 10% 10%;
　　　　　　width: 80%;
　　　　　　position: relative;
　　　　}
　　　　#left #logo{
　　　　　　width: 12%;
　　　　　　position: absolute;
　　　　　　left: 14%;
　　　　　　top: 190px;
　　　　}
　　　　#left p{
　　　　　　margin-bottom: -20px;
　　　　}
　　　　#left p,h4{
　　　　　　text-align: center;
　　　　　　color: red;
　　　　}
　　　　#right{
　　　　　　float: left;
　　　　　　width: 60%;
　　　　　　margin: 15% 0px;
　　　　}
　　　　#right h2{
　　　　　　text-align: center;
　　　　}
　　　　#right fieldset{
　　　　　　text-align: center;
　　　　　　border-left: none;
　　　　　　border-right: none;
　　　　　　border-bottom: none;
　　　　}
　　　　#right fieldset legend{
　　　　　　padding: 0px 20px;
　　　　}
　　　　#fen{
　　　　　　width: 100%;
　　　　　　-webkit-column-count: 3;
　　　　　　-moz-column-count: 3;
　　　　　　-o-column-count: 3;
　　　　　　-ms-column-count: 3;
　　　　　　column-count: 3;
　　　　　　-webkit-column-gap: 1em;
　　　　　　-moz-column-gap: 1em;
　　　　　　-o-column-gap: 1em;
　　　　　　-ms-column-gap: 1em;
　　　　　　column-gap: 1em;
　　　　}
　　　　#fen img{
　　　　　　　　width: 100%;
　　　　　　　　border-radius: 10px 10px 10px 10px;
　　　　}
　　　　#fen p,h4{
　　　　　　　　text-align: center;
　　　　　　　　color: red;
　　　　　　}
　　　　#fen p{
　　　　　　　　margin-bottom: -20px;
　　　　}
　　　　#di p{
　　　　　　text-align: center;
　　　　}
　　　　#di p span{
　　　　　　color: red;
　　　　}
　　}
</style>
</head>
<body>
　　<header>
　　　　<img src="img/rag.png" />
　　</header>
　　<aside id="left">
　　　　<img src="img/logo-bg.png" id="logo-bg"/>
　　　　<img src="img/logo.png" id="logo" />
　　　　<hr />
　　　　<p>THE</p>
　　　　<h4>WEBLOCUE</h4>
　　　　<hr />
　　　　<p>THE</p>
　　　　<h4>WEBLOCUE</h4>
　　　　<hr />
　　　　<p>THE</p>
　　　　<h4>WEBLOCUE</h4>
　　　　<hr />
　　</aside>
　　<article id="right">
　　　　<h2>“Give me problems, give me work.”</h2>
　　　　<p>In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course,In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course,In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course.</p>
　　　　<p>In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course,In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course,In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course.</p>
　　　　<fieldset><legend>victors</legend></fieldset>
　　　　<div id="fen">
　　　　　　<img src="img/1.jpg" />
　　　　　　<p>SETCOME</p>
　　　　　　<h4>HOLEMES</h4>
　　　　　　<img src="img/2.jpg" />
　　　　　　<p>SETCOME</p>
　　　　　　<h4>HOLEMES</h4>
　　　　　　<img src="img/3.jpg" />
　　　　　　<p>SETCOME</p>
　　　　　　<h4>HOLEMES</h4>
　　　　　　<img src="img/4.jpg" />
　　　　　　<p>SETCOME</p>
　　　　　　<h4>HOLEMES</h4>
　　　　　　<img src="img/5.jpg" />
　　　　　　<p>SETCOME</p>
　　　　　　<h4>HOLEMES</h4>
　　　　　　<img src="img/6.jpg" />
　　　　　　<p>SETCOME</p>
　　　　　　<h4>HOLEMES</h4>
　　　　</div>
　　　　<fieldset><legend>*</legend></fieldset>
　　　　<div id="di">
　　　　　　<p>In the year 1878 I took <span>Suing table</span> dogree of Doctor</p>
　　　　　　<p>What the year 2016 I took dogree <span>Ruing roid</span> of Doctor</p>
　　　　</div>
　　</article>
</body>
</html>

做的不够严谨，因为时间问题，请见谅。

以上这篇响应式布局的简单案例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

原文地址：http://www.cnblogs.com/duzheqiang/p/5666465.html

9jduu05 · 发表于 2022-9-4 23:36:32

那三门，你们谁寂寞才快乐撒

Alisaliu · 发表于 2022-10-18 14:00:32

怕怕怕怕怕怕怕怕怕怕怕怕怕怕

Alisaliu · 发表于 2022-12-16 11:59:34

灌灌灌灌水

醉梦娱乐网 · 发表于 2023-4-14 04:21:36

谢谢小Y分享

a75620618 · 发表于 2023-7-2 01:35:28

论坛有你更精彩！

leidie123a · 发表于 2023-10-16 13:31:54

的沙发水电费水电费

do827261756 · 发表于 2023-11-16 12:26:58

而快乐你们快乐马年快乐

qq303604905 · 发表于 2024-5-1 12:33:56

女生看了弄丢了卡萨诺的卡洛斯

3t0ukmu · 发表于 2024-8-21 05:16:25

而非为吾问无为谓娃娃

账号		自动登录	找回密码
密码			立即注册

[CSS] 响应式布局的简单案例

相关帖子